/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __vars.css project project-deep-sky
 */

:root {
    /* COLORS */
    --datama-white-hex: #FFFFFF;
    --datama-white-rgb: 255, 255, 255;
    /* Business Green */
    --datama-primary-hex: #00484A;
    --datama-primary-rgb: 0, 72, 74;
    /* Datama Green */
    --datama-primary-light-hex: #16D0B4;
    --datama-primary-light-rgb: 22, 208, 180;
    /* Datama Yellow */
    --datama-yellow-hex: #FEDA6A;
    --datama-yellow-rgb: 254, 218, 106;
    /* Editable Colors */
    --color-white-hex: #FFFFFF;
    --color-white-rgb: 255, 255, 255;
    /* Asset Blue */
    --color-secondary-hex: #4286F4;
    --color-secondary-rgb: 66, 134, 244;
    /* Power Orange */
    --color-danger-hex: #F8663C;
    --color-danger-rgb: 248, 102, 60;
    /* Warning Yellow */
    --color-warning-hex: #F5B700;
    --color-warning-rgb: 245, 183, 0;
    /* Dark color */
    --color-dark-hex: #1D1D1B;
    --color-dark-rgb: 29, 29, 27;
    /* Grey */
    --color-dark-thin-hex: #586F70;
    --color-dark-thin-rgb: 88, 111, 112;
    /* Lighter black */
    --color-grey-text-hex: #1F1F1F;
    --color-grey-text: 31, 31, 31;
    /* Gold */
    --color-gold-hex: #CFAC03;
    --color-gold-rgb: 207, 176, 3;

    --color-light-rgb: var(--color-white-rgb);
    --color-bg-light-rgb: var(--color-white-rgb);
    --color-bg-dark-rgb:  var(--color-dark-rgb);
    --font-family: Montserrat, Roboto, Arial, sans-serif !important;
    /* USEFUL */
    --datama-primary: rgb(var(--datama-primary-rgb));
    --datama-primary-light: rgb(var(--datama-primary-light-rgb));
    --datama-warning: rgb(var(--color-warning-rgb));
    --color-primary: rgb(var(--datama-primary-rgb));
    --color-primary-light: rgb(var(--datama-primary-light-rgb));
    --color-warning: rgb(var(--color-warning-rgb));
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-danger: rgb(var(--color-danger-rgb));
    --color-white: rgb(var(--color-white-rgb));
    --color-dark: rgb(var(--color-dark-rgb));
    --color-light: rgb(var(--color-light-rgb));
    --color-gold: rgb(var(--color-gold-rgb));
    --color-bg-dark: rgb(var(--color-bg-dark-rgb));
    --color-bg-light: rgb(var(--color-bg-light-rgb));
    --color-bg-dark-opacity: rgba(var(--color-bg-dark-rgb), 0.2);
    --color-dark-grey: rgb(var(--color-dark-thin-rgb));
    /* SHADOW */
    --shadow-color: rgba(var(--color-dark-rgb), 0.25);
    --shadow-small: 0 0 5px var(--shadow-color);
    --shadow: 0 0 10px var(--shadow-color);
    --shadow-large: 0 0 15px var(--shadow-color);
    /* BORDER */
    --border: 1px solid rgba(var(--color-dark-rgb), 0.1);
    --border-dark: 1px solid rgba(var(--color-dark-rgb), 0.25);
    --border-primary: 1px solid rgba(var(--datama-primary-rgb), 0.25);
    --border-secondary: 1px solid rgba(var(--color-secondary-rgb), 0.25);
    --border-radius: 10px;
    --border-radius-rounded: 50px;
    --border-square: 0;
    /* STATE */
    --hover: rgba(var(--color-dark-rgb), 0.1);
    /* TRANSITION */
    --transition-out: .2s ease-out;
    --transition-in: .1s ease-in;
    --transition-long-out: 1s ease-out;
    --transition-long-in: 1s ease-in;
    /* TEXT */
    --text-font-color: rgb(var(--color-grey-text));
    --quote-font-color: rgb(var(--color-dark-thin-rgb));
    --text-body: rgb(var(--color-dark-thin-rgb));
    --text-label: rgba(var(--color-dark-rgb), 0.75);
    --text-heading: var(--datama-primary);
    --text-structure: var(--datama-primary);
    --text-meta: rgba(var(--datama-primary-rgb), 0.75);
    /* INTERACTION — active / hover / focus (derived from brand tokens) */
    --state-active-bg: rgba(var(--datama-primary-rgb), 0.10);
    --state-active-border: rgba(var(--datama-primary-rgb), 0.30);
    --state-active-text: var(--datama-primary);
    --state-hover-bg: rgba(var(--datama-primary-rgb), 0.06);
    --focus-border-color: rgba(var(--datama-primary-rgb), 0.45);
    --focus-ring: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.12);
    /* CARETS — primary brand green */
    --caret-color: rgba(var(--datama-primary-rgb), 0.75);
    --caret-color-hover: var(--datama-primary);
    --caret-color-open: var(--datama-primary);
    /* TABLE */
    --table-stripe-bg: rgba(var(--datama-primary-rgb), 0.03);
    --table-hover-bg: rgba(var(--datama-primary-rgb), 0.06);
    --table-border-color: rgba(var(--datama-primary-rgb), 0.12);
    --datama-stripe-color: var(--table-stripe-bg);
    --datama-hover-color: var(--table-hover-bg);
    --datama-border-color: var(--table-border-color);
    /* ICONS — UI chrome and actions use primary; decorative stay neutral */
    --icon-chrome-color: rgba(var(--datama-primary-rgb), 0.85);
    --icon-action-color: rgba(var(--datama-primary-rgb), 0.85);
    --icon-default-color: rgba(var(--color-dark-rgb), 0.7);
    /* HELP & EXTERNAL LINKS — muted at rest, brand green on interaction */
    --help-color: rgba(var(--color-dark-rgb), 0.28);
    --help-color-hover: rgba(var(--color-dark-rgb), 0.45);
    --help-color-active: var(--datama-primary);
    --help-bg-hover: rgba(var(--datama-primary-rgb), 0.08);
    --link-external-color: var(--color-secondary);
}

/*
 * Dark theme — override semantic tokens on a parent with [data-theme="dark"].
 * Brand RGB vars (--datama-primary-rgb, etc.) remain theme-customizable via settings.
 */
[data-theme="dark"] {
    --text-body: rgba(var(--color-white-rgb), 0.75);
    --text-label: rgba(var(--color-white-rgb), 0.65);
    --text-heading: var(--datama-primary-light);
    --color-bg-light: rgb(var(--color-dark-rgb));
    --color-bg-light-rgb: var(--color-dark-rgb);
    --state-active-bg: rgba(var(--datama-primary-light-rgb), 0.12);
    --state-active-border: rgba(var(--datama-primary-light-rgb), 0.35);
    --state-active-text: var(--datama-primary-light);
    --table-stripe-bg: rgba(var(--datama-primary-light-rgb), 0.06);
    --table-hover-bg: rgba(var(--datama-primary-light-rgb), 0.10);
    --icon-default-color: rgba(var(--color-white-rgb), 0.65);
    --help-color: rgba(var(--color-white-rgb), 0.35);
    --help-color-hover: rgba(var(--color-white-rgb), 0.55);
    --help-color-active: var(--datama-primary-light);
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __fonts.css project project-deep-sky
 */

div[data-app="true"] {
    position: relative;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-body);
}

div[data-app="true"] .datama-plot {
    font-family: var(--font-family);
}

div[data-app="true"] a {
    color: var(--color-primary);
    text-decoration: none;
}

div[data-app="true"] a.datama-link-external,
div[data-app="true"] a[target="_blank"].datama-documentation {
    color: var(--link-external-color);
}

div[data-app="true"] ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

div[data-app="true"] li {
    padding-left: 10px;
}

div[data-app="true"] h1 {
    font-size: 1.5rem;
    line-height: 40px;
}

div[data-app="true"] h2 {
    font-size: 1.25rem;
    line-height: 30px;
}

div[data-app="true"] h3 {
    font-size: 1.1rem;
    line-height: 24px;
}

div[data-app="true"] h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 20px;
}

div[data-app="true"] h1, div[data-app="true"] h2, div[data-app="true"] h3, div[data-app="true"] h4, div[data-app="true"] h5, div[data-app="true"] h6 {
    font-family: var(--font-family);
    font-weight: 500;
    color: var(--text-structure);
}

div[data-app="true"] h1, div[data-app="true"] h2, div[data-app="true"] h3, div[data-app="true"] h4, div[data-app="true"] h5, div[data-app="true"] h6, div[data-app="true"] ul, div[data-app="true"] pre, div[data-app="true"] p {
    margin-top: 0;
    margin-bottom: 1rem;
}

div[data-app="true"] ul, div[data-app="true"] pre, div[data-app="true"] p, div[data-app="true"] blockquote {
    color: rgb(var(--color-dark-thin-rgb))
}

div[data-app="true"] blockquote {
    font-family: var(--font-family);
    position: relative;
    font-size: 1.5rem;
    font-weight: 300;
}

div[data-app="true"] .bg-primary blockquote {
    font-weight: 100;
}

div[data-app="true"] blockquote:not(.no-quote)::before,
div[data-app="true"] blockquote:not(.no-quote)::after {
    font-size: 30px;
    height: 10px;
    font-weight: 300;
    opacity: .75;
}

div[data-app="true"] blockquote:not(.no-quote)::before {
    content: "❛❛";
    left: 0;
    top: 0;
    margin-right: 5px;
}

div[data-app="true"] blockquote:not(.no-quote)::after {
    content: '❜❜';
    right: 0;
    bottom: 0;
    margin-left: 5px;
}

div[data-app="true"] .datama-icon, div[data-app="true"] .datama-icon path {
    display: flex;
    height: 100%;
    align-items: center;
    width: fit-content;
    fill: var(--icon-default-color);
    color: var(--icon-default-color);
}

/* DataMaIconsNew roots are <svg class="datama-icon">. The flex/height:100%
 * rules above target icomoon <span.datama-icon> wrappers and shift SVG
 * glyphs toward the bottom-right when applied to the svg itself. */
div[data-app="true"] svg.datama-icon {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

div[data-app="true"] svg.datama-icon path {
    display: unset;
    height: auto;
    width: auto;
}

div[data-app="true"] .icon-booting {
    position: absolute;
}

div[data-app="true"] .datama-icon .icon-booting path {
    fill: transparent !important;
}

div[data-app="true"] .datama-badge {
    transform: scale(.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%;
}

div[data-app="true"] .datama-badge-top .datama-badge {
    top: -5px;
    right: -10px;
}

div[data-app="true"] .font-primary {
    color: var(--datama-primary);
}

div[data-app="true"] .datama-translate {
    position: fixed;
    z-index: 9;
}

div[data-app="true"] .datama-translated {
    position: relative !important;
    display: inline-block;
}

div[data-app="true"] .datama-translate-hover:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--datama-primary-rgb), .1);
    transition: .2s ease-in;
}

/* ── Translation edition dialog: backdrop ── */
div[data-app="true"] .datama-translation-edition-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 99;
}

/* ── Translation edition dialog: container ── */
div[data-app="true"] .datama-translation-edition {
    position: fixed;
    background: var(--color-bg-light);
    box-shadow: var(--shadow-large, var(--shadow));
    border: var(--border);
    border-radius: var(--border-radius, 8px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 90%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}

/* ── Header ── */
div[data-app="true"] .datama-translation-edition-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
    flex-shrink: 0;
}

div[data-app="true"] .datama-translation-edition-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgb(var(--color-dark-rgb));
}

div[data-app="true"] .datama-translation-edition-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: rgb(var(--color-dark-rgb));
    opacity: 0.6;
    transition: all 0.15s ease;
}

div[data-app="true"] .datama-translation-edition-close:hover {
    opacity: 1;
    background: var(--hover, rgba(var(--color-dark-rgb), 0.06));
}

/* ── Body: two-column editor + preview ── */
div[data-app="true"] .datama-translation-edition-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

div[data-app="true"] .datama-translation-edition-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

div[data-app="true"] .datama-translation-edition-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--color-dark-rgb), 0.5);
    margin-bottom: 6px;
    display: block;
}

div[data-app="true"] .datama-translation-edition-editor {
    padding: 12px 14px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: var(--border-radius, 6px);
    font-size: 0.85rem;
    line-height: 1.6;
    min-height: 100px;
    background: var(--color-white, #fff);
    color: rgb(var(--color-dark-rgb));
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow-y: auto;
    word-break: break-word;
}

div[data-app="true"] .datama-translation-edition-editor:focus {
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.12);
}

div[data-app="true"] .datama-translation-edition-editor.loading {
    opacity: 0.5;
}

div[data-app="true"] .datama-translation-edition-preview {
    padding: 12px 14px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: var(--border-radius, 6px);
    font-size: 0.85rem;
    line-height: 1.6;
    min-height: 100px;
    background: rgba(var(--color-dark-rgb), 0.02);
    color: rgb(var(--color-dark-rgb));
    overflow-y: auto;
    word-break: break-word;
}

/* ── Variables collapsible section ── */
div[data-app="true"] .datama-translation-edition-variables {
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.06);
    flex-shrink: 0;
}

div[data-app="true"] .datama-translation-edition-variables-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--color-dark-rgb), 0.6);
    transition: color 0.15s ease;
    user-select: none;
}

div[data-app="true"] .datama-translation-edition-variables-toggle:hover {
    color: rgb(var(--color-dark-rgb));
}

div[data-app="true"] .datama-translation-edition-toggle-icon {
    font-size: 0.55rem;
    transition: transform 0.15s ease;
}

div[data-app="true"] .datama-translation-edition-variables-content {
    padding: 0 20px 12px;
    max-height: 200px;
    overflow-y: auto;
}

div[data-app="true"] .datama-translation-edition-variables-content.hide {
    display: none;
}

div[data-app="true"] .datama-translation-edition table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.75rem;
}

div[data-app="true"] .datama-translation-edition table td {
    vertical-align: top;
    padding: 4px 6px;
}

div[data-app="true"] .datama-translation-edition table th {
    padding: 4px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(var(--color-dark-rgb), 0.5);
}

div[data-app="true"] .datama-var-tree {
    font-size: 12px;
    width: 100%;
}

div[data-app="true"] .datama-var-tree-header-row {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border, #ddd);
    margin-bottom: 4px;
}

div[data-app="true"] .datama-var-tree-col-title {
    flex: 1;
}

div[data-app="true"] .datama-var-tree-node {
    border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,.06));
}

div[data-app="true"] .datama-var-tree-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px;
    min-height: 28px;
    transition: background-color .15s;
}

div[data-app="true"] .datama-var-tree-expandable {
    cursor: pointer;
}

div[data-app="true"] .datama-var-tree-expandable:hover {
    background-color: var(--color-bg-hover, rgba(0,0,0,.03));
}

div[data-app="true"] .datama-var-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    font-size: 9px;
    color: var(--color-text-secondary, #888);
    user-select: none;
    transition: transform .15s;
}

div[data-app="true"] .datama-var-tree-toggle-spacer {
    display: inline-block;
    width: 14px;
    min-width: 14px;
}

div[data-app="true"] .datama-var-tree-key {
    font-weight: 500;
    color: var(--color-text, #333);
    white-space: nowrap;
}

div[data-app="true"] .datama-var-type-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

div[data-app="true"] .datama-var-type-string {
    background: #e8f5e9;
    color: #2e7d32;
}

div[data-app="true"] .datama-var-type-number {
    background: #e3f2fd;
    color: #1565c0;
}

div[data-app="true"] .datama-var-type-boolean {
    background: #fff3e0;
    color: #e65100;
}

div[data-app="true"] .datama-var-type-object {
    background: #f3e5f5;
    color: #7b1fa2;
}

div[data-app="true"] .datama-var-type-array {
    background: #fce4ec;
    color: #c62828;
}

div[data-app="true"] .datama-var-type-null {
    background: #f5f5f5;
    color: #9e9e9e;
}

div[data-app="true"] .datama-var-tree-value {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    color: var(--color-text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

div[data-app="true"] .datama-var-tree-count {
    font-size: 10px;
    color: var(--color-text-secondary, #999);
    font-style: italic;
}

div[data-app="true"] .datama-var-tree-path {
    margin-left: auto;
    font-family: monospace;
    font-size: 10px;
    color: var(--color-text-tertiary, #aaa);
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

div[data-app="true"] .datama-var-tree-path:hover {
    background: var(--color-bg-hover, rgba(0,0,0,.06));
    color: var(--color-text, #333);
}

div[data-app="true"] .datama-var-tree-path-copied {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}

div[data-app="true"] .datama-var-tree-children {
    overflow: hidden;
    transition: max-height .2s ease-in-out;
}

div[data-app="true"] .datama-var-tree-collapsed {
    display: none;
}

div[data-app="true"] .datama-translation-edition-preview {
    font-size: .8rem;
    white-space: wrap;
    padding: 10px;
    height: fit-content;
    border: var(--border);
    border-radius: var(--border-radius);
    position: relative;
}

div[data-app="true"] .datama-translation-edition table pre > code ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

div[data-app="true"] .datama-translation-edition table pre > code li {
    display: inline-block;
    list-style: none;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

div[data-app="true"] .datama-instance-type {
    font-weight: 300;
    font-size: 0.65rem;
    font-style: italic;
}

/* ── Footer: action buttons ── */
div[data-app="true"] .datama-translation-edition-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
    flex-shrink: 0;
}

div[data-app="true"] .datama-translation-edition-footer .datama-button {
    min-height: 32px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}

div[data-app="true"] .datama-translation-edition-btn-reset {
    margin-right: auto;
}

/* ── Responsive: stack columns on small dialogs ── */
@media screen and (max-width: 600px) {
    div[data-app="true"] .datama-translation-edition-body {
        grid-template-columns: 1fr;
    }
    div[data-app="true"] .datama-translation-edition {
        width: 95%;
    }
}

div[data-app="true"] ul > .datama-translated,
div[data-app="true"] div > .datama-translated {
    width: 100%;
}

div[data-app="true"] .datama-context-menu {
    box-shadow: var(--shadow);
    border: var(--border);
    cursor: pointer;
    color: var(--color-dark);
}

div[data-app="true"] .datama-context-menu > li:hover {
    background: var(--hover);
    transition: var(--transition-in);
}

div[data-app="true"] #datama-translation-autocomplete {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

div[data-app="true"] .datama-autocomplete-item {
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
}

div[data-app="true"] .datama-autocomplete-item .datama-autocomplete-type {
    flex-shrink: 0;
}

div[data-app="true"] .datama-autocomplete-key {
    flex: 1;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div[data-app="true"] .datama-autocomplete-value {
    flex-shrink: 0;
    max-width: 90px;
    font-weight: 300;
    font-size: 10px;
    line-height: 14px;
    color: var(--color-text-secondary, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

div[data-app="true"] .datama-autocomplete-active {
    background: var(--hover, #f0f0f0);
    outline: none;
}

div[data-app="true"] .datama-description {
    font-size: .8rem;
}

div[data-app="true"] .datama-italic {
    font-style: italic;
    font-weight: 300;
}

/*
 * 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 : __generic.css project project-deep-sky
 */

.datama-divider {
    display: inline-block;
}
.datama-divider:not(.vertical) {
    border-top: var(--border);
    width: 100%;
    height: 1px;
    margin: 5px 0;
    min-width: 10px;
}
.datama-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;
}
.datama-divider.datama-divider-half:not(.vertical) {
    width: 50%;
    margin: 5px 0 5px 50%;
    transform: translateX(-50%);
}
.datama-divider.datama-divider-half.vertical {
    height: 50%;
    margin: 50% 5px 0;
    transform: translateY(-50%);
}
* ::-webkit-scrollbar-thumb {
    background: rgba(var(--color-dark-rgb), .5);
    opacity: 0.5 !important;
    border-radius: 10px !important;
    transition: .1s ease-out;
}
* ::-webkit-scrollbar-thumb:hover {
    background: var(--datama-primary);
    transition: .2s ease-in;
}
* ::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

.datama-increase {
    color: green;
}

.datama-decrease {
    color: red;
}

.datama-danger{
    color: var(--color-danger);
}

.datama-module-title {
    width: 100%;
    white-space: wrap;
    font-size: 24px;
    line-height: 40px;
    height: 40px;
    padding: 0 20px 10px 20px;
    box-sizing: content-box;
    transition: font-size 0.3s ease;
    color: var(--text-structure);
    font-weight: 600;
}

.header-title {
    font-size: 24px;
    transition: font-size 0.3s ease;
    color: var(--text-structure);
    font-weight: 600;
}

/* Hide input when in auto mode */
.datama-input-hidden {
    display: none !important;
}

/* Manual font size mode - override responsive sizing */
.datama-module-title-manual {
    font-size: inherit !important;
    line-height: inherit !important;
    /* height: inherit !important; */
}

/* Responsive font-size for datama-module-title */
@media screen and (max-width: 1920px) {
    .datama-module-title {
        font-size: 22px;
        line-height: 38px;
        height: 38px;
    }
}

@media screen and (max-width: 1600px) {
    .datama-module-title {
        font-size: 20px;
        line-height: 36px;
        height: 36px;
    }
}

@media screen and (max-width: 1366px) {
    .datama-module-title {
        font-size: 18px;
        line-height: 34px;
        height: 34px;
    }
}

@media screen and (max-width: 1200px) {
    .datama-module-title {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
    }
}

@media screen and (max-width: 1024px) {
    .datama-module-title {
        font-size: 15px;
        line-height: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 900px) {
    .datama-module-title {
        font-size: 14px;
        line-height: 28px;
        height: 28px;
    }
}

@media screen and (max-width: 768px) {
    .datama-module-title {
        font-size: 13px;
        line-height: 26px;
        height: 26px;
    }
}

@media screen and (max-width: 600px) {
    .datama-module-title {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 480px) {
    .datama-module-title {
        font-size: 11px;
        line-height: 22px;
        height: 22px;
    }
}

@media screen and (max-width: 360px) {
    .datama-module-title {
        font-size: 10px;
        line-height: 20px;
        height: 20px;
    }
}

/* Responsive font-size for header-title */
@media screen and (max-width: 1920px) {
    .header-title {
        font-size: 18px;
    }
}

@media screen and (max-width: 1600px) {
    .header-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 1366px) {
    .header-title {
        font-size: 15px;
    }
}

@media screen and (max-width: 1200px) {
    .header-title {
        font-size: 14px;
    }
}

@media screen and (max-width: 1024px) {
    .header-title {
        font-size: 13px;
    }
}

@media screen and (max-width: 900px) {
    .header-title {
        font-size: 12px;
    }
}

@media screen and (max-width: 768px) {
    .header-title {
        font-size: 11px;
    }
}

@media screen and (max-width: 600px) {
    .header-title {
        font-size: 10px;
    }
}

@media screen and (max-width: 480px) {
    .header-title {
        font-size: 9px;
    }
}

@media screen and (max-width: 360px) {
    .header-title {
        font-size: 8px;
    }
}
.datama-module-comment {
    font-size: 14px;
}
.datama-module-comment li {
    position: relative;
}

.datama-module-comment p,
.datama-module-comment ul {
    margin-bottom: .5rem;
}
.datama-module-comment ul {
    margin-top: .5rem;
}
.datama-module-comment ul > li::after {
    content: "•" !important;
}
.datama-module-comment ul ul > li::after {
    content: "◦" !important;
}
.datama-module-comment ul ul ul > li::after {
    content: "⁃" !important;
}

.datama-module-comment ul > li::after {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1rem;
}
.datama-module-comment:empty {
    display: none;
}
.datama-translated.editable {
    cursor: pointer;
}

.w-auto {
    width: auto !important;
}

.h-auto {
    height: auto !important;
}

.opacity-0 {
    opacity: 0;
}
.datama-highlight {
    position: relative;
    transition: .25s ease-in;
    width: calc(100% - 20px);
    margin-left: 10px !important;
    margin-right: -10px !important;
}
.datama-highlight::before {
    content: '';
    position: absolute;
    left: -10px;
    top: -.15rem;
    bottom: 0;
    width: 100%;
    border-image: linear-gradient(to right, var(--datama-highlight-color) 10%, transparent 25%) 1;
    background-image: linear-gradient(to right, var(--datama-highlight-color) 0%, transparent 10px, transparent 100%);
    border-style: solid;
    border-left-width: 5px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    pointer-events: none;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __boxes.css project project-deep-sky
 */

.datama-promo-boxes {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0 20px;
}

.datama-promo-boxes > .datama-promo-box {
    width: 100%;
    max-width: 33.33%;
    padding-bottom: 10px;
    border: var(--border);
    border-radius: var(--border-radius);
    margin: 0 20px;
    transition: .1s ease-out;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-align: center;
}
.datama-promo-boxes > .datama-promo-box:hover {
    margin-top: -5px;
    margin-bottom: 5px;
    box-shadow: var(--shadow);
    transition: .2s ease-in;
}
.datama-promo-boxes > .datama-promo-box > .datama-promo-box-sub-title {
    font-size: 1.25rem;
    font-weight: 300;
    color: rgb(var(--datama-primary-light-rgb))
}
.datama-promo-boxes > .datama-promo-box > .datama-promo-box-title {
    position: relative;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    padding: 10px 0px;
    margin: -1px;
    margin-bottom: 10px;
    color: rgb(var(--color-light-rgb));
    background-color: rgb(var(--datama-primary-rgb));
    border-radius: var(--border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.datama-promo-boxes > .datama-promo-box > *:not(button):not(.datama-promo-box-title) {
    line-height: 20px;
    height: 20px;
}
.datama-promo-boxes > .datama-promo-box > button {
    padding: 5px 20px;
    border-radius: 20px;
    line-height: 20px;
    margin: 0 auto !important;
}
.datama-promo-boxes > .datama-promo-box > button > .datama-button-icon {
    font-size: 18px;
    line-height: 20px;
    margin-right: 5px;
    margin-left: -5px;
}
.datama-promo-boxes > .datama-promo-box > button > .datama-button-icon svg {
    font-size: 20px;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __button.css project project-deep-sky
 */

.datama-button {
    position: relative;
    width: fit-content;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 6px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    background: rgba(var(--color-white-rgb), 1);
    color: var(--color-dark);
    cursor: pointer;
    justify-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    font-size: 0.75rem;
    font-weight: 500;
    min-height: 36px;
    gap: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

.datama-button:hover:not(:disabled) {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transform: translateY(-1px);
}
.datama-button:hover > *,
.datama-button:hover path {
    transition: .1s ease-in;
}
.datama-button > .datama-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 100%;
}

.datama-button:not(.no-text) > .datama-button-icon {
    margin: 0 5px 0 -5px;
}
.datama-button > .datama-button-icon svg {
    display: block;
}

.datama-button.no-text {
    padding: 5px 10px;
}
.datama-button.primary,
.datama-button.primary path {
    color: rgb(var(--datama-primary-rgb));
    fill: rgb(var(--datama-primary-rgb));
}
.apply-advanced-settings,
.apply-advanced-settings .datama-icon,
.apply-advanced-settings .datama-icon path,
.apply-advanced-settings svg,
.apply-advanced-settings svg path {
   fill: var(--color-white) !important;
   color: var(--color-white) !important;
}

.datama-button.transparent {
    background: transparent;
    border: 0;
    color: rgb(var(--color-dark-rgb));
}

.datama-button.transparent:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Ensure transparent buttons in tables have no borders */
.datama-table .datama-button.transparent,
.datama-table .datama-button.transparent:focus,
.datama-table .datama-button.transparent:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 3px !important;
}

.datama-table .datama-button.transparent:hover {   
    background: rgba(var(--datama-primary-rgb), 0.05) !important;
}

.datama-button.secondary,
.datama-button.secondary path {
    color: rgba(var(--color-dark-rgb), 0.75);
    fill: rgba(var(--color-dark-rgb), 0.75);
}
.datama-button.primary:not(.no-hover):hover {
    background: var(--state-hover-bg);
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}
.datama-button.secondary:not(.no-hover):hover {
    background: rgba(var(--color-dark-rgb), 0.06) !important;
    border-color: rgba(var(--color-dark-rgb), 0.12);
}
.datama-button.bg-primary,
.datama-button.bg-primary path {
    background: var(--datama-primary);
    color: var(--color-white);
    fill: var(--color-white);
    border-color: var(--datama-primary);
}
.datama-button.bg-primary .datama-icon,
.datama-button.bg-primary .datama-icon path,
.datama-button.bg-primary svg,
.datama-button.bg-primary svg path {
    color: var(--color-white);
    fill: var(--color-white);
}
.datama-button.bg-primary:not(.no-hover):hover {
    background: rgba(var(--datama-primary-rgb), 0.9);
    border-color: rgba(var(--datama-primary-rgb), 0.9);
    box-shadow: 0 2px 4px 0 rgba(var(--datama-primary-rgb), 0.25);
}
.datama-button.outline-primary {
    background: transparent;
    border: 1px solid var(--datama-primary);
    color: var(--datama-primary);
}
.datama-button.outline-primary:not(.no-hover):hover {
    background: var(--state-hover-bg);
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}

/* Tinted active state — button groups, toggles, tabs */
.datama-button.active:not(.bg-primary) {
    background-color: var(--state-active-bg) !important;
    border-color: var(--state-active-border) !important;
    color: var(--state-active-text) !important;
}

.datama-button.active:not(.bg-primary) .datama-icon,
.datama-button.active:not(.bg-primary) .datama-icon path,
.datama-button.active:not(.bg-primary) path {
    color: var(--state-active-text) !important;
    fill: var(--state-active-text) !important;
}

.datama-button.active:not(.bg-primary):hover {
    background-color: rgba(var(--datama-primary-rgb), 0.15) !important;
    border-color: rgba(var(--datama-primary-rgb), 0.4) !important;
}

/* External documentation links */
.datama-button.datama-link-external,
.datama-button.datama-link-external path {
    color: var(--link-external-color);
    fill: var(--link-external-color);
}

.datama-button.datama-link-external:not(.no-hover):hover {
    background: rgba(var(--color-secondary-rgb), 0.08);
    border-color: rgba(var(--color-secondary-rgb), 0.25);
}

/* Highlight for buttons — flat selectors only (Tableau CEF has no CSS nesting).
 * Nested fill rules are ignored there, so the glyph stayed dark on primary. */
.datama-button.highlight {
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 1);
    background-color: rgba(var(--datama-primary-rgb), 1) !important;
    border-radius: 2px;
    color: var(--color-white);
}

.datama-button.highlight .datama-button-icon,
.datama-button.highlight .datama-icon,
.datama-button.highlight svg {
    color: var(--color-white);
}

.datama-button.highlight .datama-button-icon path,
.datama-button.highlight .datama-icon path,
.datama-button.highlight svg path {
    fill: var(--color-white) !important;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __dialog.css project project-deep-sky
 */

.datama-dialog {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.datama-dialog-open {
    visibility: visible;
    opacity: 1;
    z-index: 999;
    transition: var(--transition-in);
}
.datama-dialog-hidden {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transition: var(--transition-out);
}

.datama-dialog > .datama-dialog-container {
    box-shadow: var(--shadow-large);
    border: var(--border);
    border-radius: var(--border-radius);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 85%;
    min-width: 80%;
    max-width: 90%;
    min-height: 60%;
    max-height: 90%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-light);
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    container-type: inline-size;
}

.datama-dialog.no-border > .datama-dialog-container {
    border: unset !important;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container {
    width: min(480px, calc(100% - 32px));
    min-width: min(360px, calc(100% - 32px));
    max-width: min(520px, calc(100% - 32px));
    min-height: 280px;
    max-height: calc(100% - 32px);
    height: auto;
    overflow: hidden;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header > .datama-dialog-icon {
    width: 24px;
    height: 24px;
    margin: 0;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-dark);
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header > .datama-dialog-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header > h2 {
    flex: 1;
    min-width: 0;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main {
    flex: 1 1 auto;
    padding: 20px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline {
    border: none;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-container,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline .datama-fieldset-container {
    padding: 0;
    gap: 0;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-row,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline .datama-fieldset-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    min-height: 0;
    margin: 0 !important;
    padding: 0 0 16px;
    border: none;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
    box-shadow: none;
    background: transparent;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-row:last-child,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline .datama-fieldset-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 !important;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-left,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-right {
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-dark);
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-help-icon {
    display: none;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input-container,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-select-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input-label {
    display: none;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input-select,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main input,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-right .datama-input,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-right .datama-input-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px 20px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.05);
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > footer > .datama-button {
    margin: 0;
    flex: 0 0 auto;
}

.datama-dialog > .datama-dialog-container > header *,
.datama-dialog > .datama-dialog-container > footer * {
    font-size: 16px !important;
}

.datama-dialog > .datama-dialog-container .datama-light-version {
    display: block;
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 2;
    color: var(--color-bg-light);
    font-size: 12px;
    word-wrap: break-word;
    width: min-content;
}

.datama-dialog > .datama-dialog-container > header .datama-divider.vertical,
.datama-dialog > .datama-dialog-container > footer .datama-divider.vertical {
    height: 15px !important;
    margin-top: 7.5px !important;
}
.datama-dialog > .datama-dialog-container > header,
.datama-dialog > .datama-dialog-container > footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
}

.datama-dialog > .datama-dialog-container > header {
    padding: 0 30px 0 10px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    flex-shrink: 0;
}
.datama-dialog > .datama-dialog-container > footer {
    padding-bottom: 10px;
}
.datama-dialog > .datama-dialog-container > footer:empty {
    display: none;
}
.datama-dialog > .datama-dialog-container > header {
    border-bottom: 1px solid rgba(var(--color-dark-rgb), .05);
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon * {
    font-size: 14px !important;
    line-height: 14px;
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon {
    line-height: 30px;
    margin: 0 10px 0 -5px;
    width: 20px;
    display: flex;
    justify-content: center;
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon + button,
.datama-dialog > .datama-dialog-container > header > h2 + button {
    margin-left: auto !important;
}
.datama-dialog > .datama-dialog-container > header > h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    margin: 0;
    letter-spacing: .5px;
    flex: 1;
}
.datama-dialog > .datama-dialog-container > header > button {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 16px !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 8px;
}

.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon + button,
.datama-dialog > .datama-dialog-container > header > h2 + button {
    margin-left: auto !important;
}

/* Fix icon centering and cropping in dialog header buttons */
.datama-dialog > .datama-dialog-container > header > button svg,
.datama-dialog > .datama-dialog-container > header > button .datama-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.datama-dialog > .datama-dialog-container > header button:hover {
    background: var(--hover);
}

.datama-dialog > .datama-dialog-container > main {
    /*display: flex;*/
    /*flex-direction: column;*/
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
}
.datama-dialog > .datama-dialog-container > main > h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
}
.datama-dialog > .datama-dialog-container > main label {
    display: inline-block;
    font-weight: 500;
    margin-right: 10px;
}





.datama-dialog > .datama-dialog-container > main > .datama-tabs-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-content {
    padding-right: 10px;
    padding-left: 10px;
    flex: 1;
    overflow-y: auto;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 30px 0 30px;
    box-sizing: border-box;
    z-index: 10;
}
div[data-app="true"] .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header button {
    padding: 2px !important;
    margin: 0 !important;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border:transparent !important; 
}
div[data-app="true"] .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header .datama-divider {
    margin: 5px 8px !important;
    height: 28px !important;
    align-self: center !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header .datama-tab-icon {
    display: none;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab {
    padding: 0;
    display: flex;
    justify-content: center;
    background: #fbfcfd;
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
    max-width: 800px;
    width: 100%;
    padding: 70px 30px 20px 30px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure fieldsets and form elements maintain their white background */
.datama-dialog .datama-fieldset,
.datama-dialog .datama-reactive-table-container,
.datama-dialog .datama-button-group {
    background: var(--color-white);
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer > .datama-tab-content-wrapper {
    padding-bottom: 80px;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs {
    background: var(--datama-primary);
    width: unset;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item {
    display: flex;
    justify-content: center;
    padding: 0 10px !important;
    margin: 5px 0;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge {
    background: transparent;
    border: 1px solid transparent;
    transform: scale(.75) !important;
    right: -10px;
    bottom: -5px;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge path {
    color: red !important;
    fill: red !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button {
    font-size: 20px;
    line-height: 20px;
    border-radius: 0 !important;
    text-align: center;
    padding: 10px 0;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item.disabled {
    background: rgba(0,0,0,0.25);
    opacity: 1 !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button path {
    color: rgba(var(--datama-white-rgb), .5) !important;
    fill: rgba(var(--datama-white-rgb), .5) !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active path {
    color: rgba(var(--datama-white-rgb), 1) !important;
    fill: rgba(var(--datama-white-rgb), 1) !important;
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active {
    border-left: 2px solid rgba(var(--datama-white-rgb), 1);
    padding-left: 5px !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
    display: flex !important;
    grid-template-columns: unset !important;
    font-size: 20px;
    line-height: 20px;
    border-radius: 0px !important;
    width: 40px;
    text-align: center;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
    display: none !important;
}



.datama-dialog > .datama-dialog-container .datama-tab-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 1rem !important;
}
.datama-dialog > .datama-dialog-container .datama-tab-header .datama-tab-title {
    font-size: 1.05rem;
    margin-left: 0;
    margin-right: auto;
    font-weight: 600;
    margin-bottom: 0;
    flex: 1;
    color: var(--text-structure);
}

.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button {
    margin-left: 8px;
}
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button .datama-button-icon {
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fix SVG sizing in dialog tab header buttons */
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button .datama-button-icon svg,
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}
.datama-dialog > .datama-dialog-container .datama-tab-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 60px;
    padding: 15px 0 !important;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #fbfcfd;
    border-top: var(--border);
}

.datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.datama-dialog > .datama-dialog-container .datama-tab-content *:not(.datama-panels):not(.datama-panels *) {
    font-size: .75rem !important;
}
.datama-dialog > .datama-dialog-container .datama-tab-content > h3 {
    font-size: .9rem !important;
    line-height: 1rem;
    margin-bottom: .25rem;
}
.datama-dialog > .datama-dialog-container .datama-tab-content .datama-section {
    padding: 10px 10px;
}
@media screen and (max-width: 400px) {
    .datama-dialog > .datama-dialog-container .datama-tab {
        padding: 5px 20px !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 80px - 1rem) !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button {
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button > span {
        font-size: .75rem;
        line-height: 18px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button .datama-button-icon {
        height: 15px;
        margin-top: 2px;
    }
    
    /* Remove container constraint on mobile */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        max-width: none;
        padding: 20px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
        max-width: none;
        padding: 0 20px;
    }
    
    /* Remove horizontal padding from specific containers */
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab,
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Add padding to header in mobile and prevent overflow */
    .datama-dialog > .datama-dialog-container .datama-tab-header {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0 !important;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Adjust content padding for mobile */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        padding: 70px 20px 20px 20px;
    }
}
@media screen and (min-width: 401px) and (max-width: 900px) {
    .datama-dialog > .datama-dialog-container .datama-tab {
        padding: 5px 20px !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 90px - 1rem) !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button {
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button > span {
        font-size: .75rem;
        line-height: 18px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button .datama-button-icon {
        height: 15px;
        margin-top: 2px;
    }
    
    /* Remove container constraint on tablet */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        max-width: none;
        padding: 20px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
        max-width: none;
        padding: 0 20px;
    }
    
    /* Remove horizontal padding from specific containers */
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab,
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Add padding to header in tablet and prevent overflow */
    .datama-dialog > .datama-dialog-container .datama-tab-header {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0 !important;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Adjust content padding for tablet */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        padding: 70px 20px 20px 20px;
    }
}
@media screen and (min-width: 800px) {
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 80px - 1rem) !important;
    }
}
/*
 * 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;
}

/* Singleton floating popup (fixed so dialog/panel overflow does not clip it) */
.datama-help-tooltip-popup {
    position: fixed;
    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 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 {
    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: 0.85rem;
    font-weight: 400;
    color: var(--text-meta);
    margin: 0;
    line-height: 1.5;
    max-width: 600px;
}

.datama-fieldset-container {
    padding: 0.5rem 2rem;
    gap: 0.25rem;
    display: flex;
    flex-direction: column;
}

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

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

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

/* 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;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--help-color);
    cursor: help;
    transform: none !important;
}

div[data-app="true"] .datama-fieldset-title-container .datama-documentation:hover,
div[data-app="true"] .datama-fieldset-legend-container .datama-documentation:hover,
.datama-fieldset-title-container .datama-documentation:hover,
.datama-fieldset-legend-container .datama-documentation:hover {
    color: var(--help-color-hover);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

div[data-app="true"] .datama-fieldset-title-container .datama-documentation:active,
div[data-app="true"] .datama-fieldset-legend-container .datama-documentation:active,
.datama-fieldset-title-container .datama-documentation:active,
.datama-fieldset-legend-container .datama-documentation:active {
    color: var(--help-color-active);
}

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 {
    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);
}

.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 {
    color: rgba(var(--color-dark-rgb), 0.5);
}

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

/*
 * 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: 1rem;
    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;
    background: var(--color-white) !important;
    padding: 0 0.75rem 0 0.25rem !important;
    margin-left: 0;
    border: 0 !important;
    box-shadow: none !important;
    height: auto;
    transform: none !important;
}

.datama-fieldset-inline .datama-fieldset-container {
    padding: 0.5rem 2rem;
}

.datama-fieldset-inline .datama-fieldset-row {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0.75rem;
    box-shadow: none;
    container-type: inline-size;
}

.datama-fieldset-inline .datama-fieldset-row:not(:last-child) {
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
    /* padding-bottom: 0.75rem; */
    /* margin-bottom: 0.75rem; */
    margin-top: -1rem;
}

.datama-fieldset-inline .datama-fieldset-row:last-child {
    margin-bottom: 0;
    margin-top: -16px;
}


/* Dark mode for inline fieldset */
@media (prefers-color-scheme: dark) {}
/* 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;
}

/* What If scenario summary (settings preview sentence) */
.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;
}

/*
 * 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 : __hierarchy.css project project-deep-sky
 */

/* Dimensions hierarchy editor (Settings > Dimensions) */

.datama-fieldset-row:has(.datama-dimensions-hierarchy) {
    grid-template-columns: 1fr;
}

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

.datama-dimensions-hierarchy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 280px;
    max-width: 420px;
}

.datama-dimensions-hierarchy-row {
    display: flex;
    align-items: stretch;
}

/* Indentation guides: one per depth, the last one draws the tree elbow */
.datama-dimensions-hierarchy-guide {
    position: relative;
    flex: 0 0 20px;
}

.datama-dimensions-hierarchy-guide::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: 0;
    left: 9px;
    border-left: 1px solid rgba(var(--color-dark-rgb), 0.15);
}

.datama-dimensions-hierarchy-guide.elbow::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 9px;
    width: 10px;
    height: calc(50% + 4px);
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.15);
    border-bottom-left-radius: 6px;
}

.datama-dimensions-hierarchy-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: 8px;
    background: var(--color-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.datama-dimensions-hierarchy-card:hover {
    border-color: rgba(var(--datama-primary-rgb), 0.45);
    box-shadow: 0 1px 3px rgba(var(--color-dark-rgb), 0.08);
}

.datama-dimensions-hierarchy-row[data-pinned="true"] .datama-dimensions-hierarchy-card {
    border-color: rgba(var(--datama-primary-rgb), 0.55);
    background: rgba(var(--datama-primary-rgb), 0.04);
}

.datama-dimensions-hierarchy-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-dark);
}

.datama-dimensions-hierarchy-row[data-pinned="true"] .datama-dimensions-hierarchy-label {
    font-weight: 600;
}

.datama-dimensions-hierarchy-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

.datama-dimensions-hierarchy-card:hover .datama-dimensions-hierarchy-actions {
    opacity: 1;
}

.datama-button.datama-dimensions-hierarchy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-height: 22px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(var(--color-dark-rgb), 0.65);
    cursor: pointer;
    box-shadow: none;
    transform: none;
}

.datama-button.datama-dimensions-hierarchy-button:hover {
    background: rgba(var(--color-dark-rgb), 0.06);
    color: var(--color-dark);
    transform: none;
    box-shadow: none;
}

.datama-button.datama-dimensions-hierarchy-button.disabled {
    opacity: 0.25;
    pointer-events: none;
}

.datama-button.datama-dimensions-hierarchy-button svg {
    display: block;
    flex-shrink: 0;
}

.datama-button.datama-dimensions-hierarchy-button > .datama-button-icon {
    height: auto;
    margin: 0;
}

/*
 * bookmark-svg is complex: createSVG sets root fill="none" and content paths omit fill,
 * so the glyph is invisible until .active forces a path fill. Pin must always paint.
 */
.datama-button.datama-dimensions-hierarchy-pin svg,
.datama-button.datama-dimensions-hierarchy-pin path {
    fill: currentColor;
}

/* Pin toggle: readable by default, primary when the dimension is focused */
.datama-button.datama-dimensions-hierarchy-pin {
    color: rgba(var(--color-dark-rgb), 0.55);
    opacity: 1;
}

.datama-button.datama-dimensions-hierarchy-pin.active {
    color: var(--state-active-text);
    background: var(--state-active-bg);
    border-color: var(--state-active-border);
    opacity: 1;
}

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

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2024 DATAMA SAS, All rights reserved.
 * Generated for file : __image.css project project-deep-sky
 */

.datama-image {
    transition: var(--transition-in);
    box-sizing: border-box;
    justify-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}
.datama-image.small {
    margin: 0 auto;
    width: 30%;
    max-width: 30%;
}
.datama-image.medium {
    margin: 0 auto;
    width: 60%;
    max-width: 60%;
}
.datama-image.large {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __input.css project project-deep-sky
 */

.datama-input-container {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}

/* Responsive input containers - wrap on small screens */
@media (max-width: 900px) {
    .datama-input-container {
        gap: 0.5rem;
    }
    
    .datama-input-container .datama-input-label {
        width: 100%;
        margin-bottom: 0.25rem;
        margin-right: 0;
    }
    
    .datama-input-container .datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    
    /* Special handling for number inputs with units */
    .datama-input-container.datama-input-with-unit .datama-input[type="number"] {
        width: calc(100% - 3rem);
        max-width: calc(100% - 3rem);
    }
    
    /* Select inputs responsive */
    .datama-input-container .datama-input-select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

@container (max-width: 200px) {
    .datama-input-container {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .datama-input-container .datama-input-label {
        width: 100%;
        margin-bottom: 0.25rem;
        margin-right: 0;
    }
    
    .datama-input-container .datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select),
    .datama-input-container .datama-input-select {
        width: 100%;
        min-width: 150px;
    }
}

.datama-input-container:not(.datama-input-container-light) {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 1.5rem;
}

/* Add margin to inputs with scale effects to prevent cropping */
.datama-input[type="color"] {
    margin: 0.5rem;
}

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

/* Labels améliorés */
.datama-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 */
.datama-input-container:focus-within .datama-input-label {
    color: var(--datama-primary);
}

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

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

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

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

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

/* Documentation button - original style by default
 * Specificity must beat `div[data-app="true"] a { color: primary }` */
div[data-app="true"] a.datama-documentation,
div[data-app="true"] .datama-documentation,
.datama-documentation {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    color: var(--help-color);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: help;
}

div[data-app="true"] a.datama-documentation:hover,
div[data-app="true"] .datama-documentation:hover,
.datama-documentation:hover {
    color: var(--help-color-hover);
    background: var(--help-bg-hover);
    transform: scale(1.05);
}

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

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

/* When documentation is inside label - pure link style */
div[data-app="true"] .datama-input-label .datama-documentation,
.datama-input-label .datama-documentation {
    margin-left: auto;
    margin-right: 2px;
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    padding: 2px !important;
    border-radius: 0 !important;
    opacity: 1;
    color: var(--help-color);
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
}

div[data-app="true"] .datama-input-label .datama-documentation:hover,
.datama-input-label .datama-documentation:hover {
    opacity: 1;
    background: var(--help-bg-hover) !important;
    color: var(--help-color-hover);
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
}

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

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

.datama-input-label .datama-documentation svg {
    width: 16px;
    height: 16px;
}
.datama-input {
    position: relative;
    width: fit-content;
    display: inline-block;
    padding: 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) */
.datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-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);
}

.datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-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);
}

.datama-input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.4);
    font-style: normal;
    font-weight: 400;
}
/* Cursor styles for different input types */
.datama-input[type="text"],
.datama-input[type="number"],
.datama-input[type="email"],
.datama-input[type="tel"],
.datama-input[type="password"],
.datama-input[type="url"] {
    cursor: text !important;
}

/* Date inputs should have pointer cursor */
.datama-input[type="date"],
.datama-input[type="datetime-local"] {
    cursor: pointer !important;
}

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

.datama-input[type="color"]:hover {
    transform: scale(1.1);
    transition: all var(--transition-in);
}

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

/* Number input avec spinners natifs - pas de règles spéciales nécessaires */

/* Number input with unit support */
.datama-input-container.datama-input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
}

.datama-input-container.datama-input-with-unit .datama-input[type="number"] {
    padding-right: 3rem; /* Even more space for proper separation */
    width: 200px; /* Force consistent width for inputs with units */
    min-width: 200px;
    max-width: 200px;
}

.datama-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 */
.datama-input[type="number"]::-webkit-outer-spin-button,
.datama-input[type="number"]::-webkit-inner-spin-button {
    opacity: 0;
    height: 20px;
    width: 16px;
    cursor: pointer;
    background: rgba(var(--color-dark-rgb), 0.1);
    border-radius: 3px;
    margin: 1px;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.datama-input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.25), 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
}
.datama-input[type="date"]::-webkit-calendar-picker-indicator,
.datama-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin-left: -30px;
    margin-right: 10px;
    cursor: pointer;
}
.datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select):hover {
    background: rgba(var(--color-dark-rgb), .05);
    transition: var(--transition-in);
}
.datama-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);
}

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

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

.datama-input-select.datama-input-select-light {
    border: none !important;
    background: transparent;
    font-size: initial;
    min-width: unset;
    padding: 0 1.5rem 0 0;
    min-height: auto;
    box-shadow: none !important;
}
.datama-input-select.datama-input-select-light > .datama-input-select-value {
    align-items: center;
    height: 100%;
    display: flex;
    font-weight: 600;
}
.datama-input-select.datama-input-select-light.primary > .datama-input-select-value {
    color: var(--datama-primary);
}
.datama-input-select.datama-input-select-light.primary::after {
    border-top-color: var(--caret-color);
}
.datama-input-select.datama-input-select-light:hover {
    background: rgba(var(--datama-primary-rgb), 0.05);
    border-radius: 4px;
}

/* Icône de dropdown améliorée - style Linear */
.datama-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%);
}

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

.datama-input-select.datama-input-select-open::after {
    transform: translateY(-50%) rotate(180deg);
    border-top-color: var(--caret-color-open);
}
.datama-input-select-dropdown {
    display: inline-block;
    position: absolute;
    width: max-content;
    min-width: 100%;
    top: calc(100% + 6px);
    left: 0;
    visibility: hidden;
    z-index: -1;
    opacity: 0;
    height: 0;
    overflow-y: auto;
    transition: all 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 */
.datama-input-select-dropdown {
    /* Default: open downward and to the left */
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.datama-input-select > .datama-input-select-value {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.datama-input-select-icon {
    width: 30px;
    height: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    color: var(--icon-chrome-color);
}

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

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

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

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

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

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

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

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

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

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

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

@keyframes checkmark-appear-select {
    0% {
        transform: translateY(-50%) rotate(45deg) scale(0);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) rotate(45deg) scale(1);
        opacity: 1;
    }
}
.datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option[data-warning]::after {
    content: '⚠';
    font-size: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    right: unset;
}
/* États disabled et read-only améliorés */
.datama-input.datama-input-disabled:not([type="color"]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group),
.datama-input-select.disabled,
.datama-input:disabled:not([type="color"]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group) {
    cursor: not-allowed !important;
    opacity: 0.6;
    background: rgba(var(--color-dark-rgb), 0.05);
    border-color: rgba(var(--color-dark-rgb), 0.1);
    color: rgba(var(--color-dark-rgb), 0.6);
}

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

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

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

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

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

.datama-input-select-dropdown.datama-input-select-weighted-dropdown > .datama-input-select-group > .datama-input-select-group-option {
    padding: 0 10px 0 22px;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown > .datama-input-select-group > .datama-input-select-group-option[data-selected="selected"]::after {
    left: 8px;
    right: unset;
    transform: translateY(-50%) rotate(45deg);
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option {
    display: flex;
    flex-wrap: nowrap;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .text-container {
    flex: 1;
    min-width: 0;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .text-container > .detail {
    font-size: .7rem;
    line-height: .5rem;
    padding-bottom: 2px;
    transition: .1s ease-out;
    opacity: 0;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    padding-left: 10px;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure > .bar {
    margin: .4rem 0;
    height: .4rem;
    border-radius: .2rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(var(--datama-primary-rgb), 0.8);
    min-width: .3rem;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option.steps > .figure > .bar {
    background-color: rgba(var(--datama-yellow-rgb), .8);
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure.variant > .bar {
    background-color: rgba(var(--color-secondary-rgb), .8);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure.warning > .bar {
    background-color: rgba(var(--datama-yellow-rgb), .8);
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure.custom-color > .bar {
    background-color: var(--custom-color);
    opacity: 0.8;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option:hover > .figure > .bar {
    margin: .3rem 0;
    height: .6rem;
    border-radius: .3rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(var(--datama-primary-rgb), 1);
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option:hover > .figure.variant > .bar {
    background-color: rgba(var(--color-secondary-rgb), 1);
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option:hover > .figure.warning > .bar {
    background-color: rgba(var(--datama-yellow-rgb), 1);
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option.steps:hover > .figure > .bar {
    background-color: rgba(var(--datama-yellow-rgb), 1);
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option:hover > .figure.custom-color > .bar {
    background-color: var(--custom-color);
    opacity: 1;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem; /* Add space between label text and value */
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container > .value {
    font-size: .7rem;
    line-height: .5rem;
    display: inline-block;
    opacity: 0;
    transition: .1s ease-out;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container > .value {
    width: 100%;
    text-align: right;
    font-weight: 600;
}
.datama-input.datama-input-select-weighted:hover .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .label,
.datama-input.datama-input-select-weighted:hover .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .value,
.datama-input.datama-input-select-weighted:hover .datama-input-select-group-option[data-selected="selected"] > .text-container > .detail,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown.datama-input-select-anchor-hovered .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown.datama-input-select-anchor-hovered .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown.datama-input-select-anchor-hovered .datama-input-select-group-option[data-selected="selected"] > .text-container > .detail {
    transition: .1s ease-out;
    opacity: 0;
}
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:not(:hover) > .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option:hover > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:hover > .datama-input-select-group-option:hover[data-selected="selected"] > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:not(:hover) > .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option:hover > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:hover > .datama-input-select-group-option:hover[data-selected="selected"] > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:not(:hover) > .datama-input-select-group-option[data-selected="selected"] > .text-container > .detail,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group > .datama-input-select-group-option:hover > .text-container > .detail,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:hover > .datama-input-select-group-option:hover[data-selected="selected"] > .text-container > .detail {
    opacity: 1;
    transition: .1s ease-in;
}

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

.datama-input-radio,
.datama-input-checkbox,
.datama-input-radio-weighted,
.datama-input-checkbox-weighted {
    display: flex;
    align-items: center;
    gap: 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);
}

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

/* Style personnalisé pour les radio buttons et checkboxes - style Linear */
.datama-input-radio input[type="radio"],
.datama-input-checkbox input[type="checkbox"],
.datama-input-radio-weighted input[type="radio"],
.datama-input-checkbox-weighted input[type="checkbox"] {
    width: 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 */
.datama-input-radio input[type="radio"],
.datama-input-radio-weighted input[type="radio"] {
    border-radius: 50%;
}

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

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

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

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

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

@keyframes checkmark-appear-checkbox {
    0% {
        transform: translate(-50%, -60%) rotate(45deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -60%) rotate(45deg) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -60%) rotate(45deg) scale(1);
        opacity: 1;
    }
}

@keyframes checkmark-appear {
    0% {
        transform: translateY(-50%) rotate(45deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-50%) rotate(45deg) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) rotate(45deg) scale(1);
        opacity: 1;
    }
}


.datama-input-radio label,
.datama-input-checkbox label {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-dark);
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
    /* Tres style elouan mais il faudrait faire un vrai sujet la dessus car ce n'est pas fonctionnel */
    /*.datama-input {*/
    /*    background: rgba(var(--color-white-rgb), 0.05);*/
    /*    color: var(--color-white);*/
    /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
    /*}*/

    /*.datama-input:focus {*/
    /*    background: rgba(var(--color-white-rgb), 0.1);*/
    /*    box-shadow: 0 0 0 3px rgba(var(--datama-primary-light-rgb), 0.3);*/
    /*}*/

    /*.datama-input-select {*/
    /*    background: rgba(var(--color-white-rgb), 0.05);*/
    /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
    /*}*/

    /*.datama-input-select-open > .datama-input-select-dropdown {*/
    /*    background: var(--color-dark);*/
    /*    border-color: rgba(var(--datama-primary-light-rgb), 0.3);*/
    /*    box-shadow: var(--shadow-large);*/
    /*}*/
}

/* === FONCTIONNALITÉS AVANCÉES DES SELECTS === */

/* Search input in dropdown */
.datama-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Animation de spinner */
@keyframes datama-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Highlight des termes de recherche */
.datama-search-highlight {
    background: rgba(var(--datama-primary-rgb), 0.2);
    color: var(--datama-primary);
    font-weight: 600;
    border-radius: 2px;
    padding: 0 2px;
}

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

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

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

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

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

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

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

/* Responsive behavior for Title Size inputs - same as other inputs */
@media (max-width: 768px) {
    .datama-input-container[id*="-tab-font-size-of-title-container"] .datama-input,
    .datama-input-container[id*="-tab-font-size-of-plot-title-container"] .datama-input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        flex: 1 1 auto;
    }
}

/* Refresh button in select dropdown */
.datama-input-select-refresh-btn {
    position: absolute;
    right: -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    margin: 0 0.5rem;
    transition: opacity 0.2s, transform 0.2s;
    line-height: 1;
}

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

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

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

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

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

.datama-input-refresh-button .refresh-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
/* === EMOJI PICKER INPUT === */

.datama-input-emoji-picker {
    /* Base select padding reserves 2.5rem for the caret: not needed here (caret hidden) */
    min-width: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.datama-input-emoji-picker > .datama-input-emoji-picker-value {
    font-size: 1.1rem;
    line-height: 1.5rem;
    overflow: visible;
    pointer-events: none;
    width: 100%;
    text-align: center;
    align-self: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Portaled select dropdown (mounted under div[data-app="true"] / .datama-light) */
div[data-app="true"] .datama-input-select-dropdown {
    position: absolute;
    width: max-content;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow-y: auto;
    transition: all 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).
 */
.datama-input-select-dropdown.datama-input-select-dropdown-open,
div[data-app="true"] .datama-input-select-dropdown.datama-input-select-dropdown-open {
    height: unset;
    max-height: 280px;
    min-height: 60px;
    visibility: visible;
    opacity: 1;
    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"] .datama-input-emoji-picker-dropdown {
    width: 264px;
}

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

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

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

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

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

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

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

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

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

.datama-input-button-group .datama-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);
}

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

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

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

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

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

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

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

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

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

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

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

.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):hover {
    background-color: rgba(var(--color-dark-rgb), 0.05) !important;
    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.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __introduction.css project project-deep-sky
 */

main.datama-light-modules .datama-light-introduction,
main.datama-light-modules .datama-light-introduction-no-metrics,
main.datama-light-modules .datama-light-introduction-no-dimensions {
    height: 100%;
    overflow-x: hidden;
}
main.datama-light-modules .datama-light-introduction::after,
main.datama-light-modules .datama-light-introduction-no-metrics::after,
main.datama-light-modules .datama-light-introduction-no-dimensions::after {
    content: "";
    background-color: var(--datama-primary-light);
    display: block;
    height: calc(100% - 40vh);
    position: sticky;
    margin-top: -40vh;
    top: 40vh;
    bottom: 0;
    width: 110%;
    left: -5%;
    right: -5%;
    z-index: -1;
    border-radius: 50% 50% 0 0;
}
.qv-object-content-container:has(.datama-light) {
    z-index: 0;
    background-color: transparent;
}
#qv-page-container main.datama-light-modules .datama-light-introduction::before,
#qv-page-container main.datama-light-modules .datama-light-introduction-no-metrics::before,
#qv-page-container main.datama-light-modules .datama-light-introduction-no-dimensions::before {
    content: "";
    background-color: var(--datama-primary-light);
    display: block;
    height: calc(100% - 40vh);
    position: absolute;
    top: 40vh;
    bottom: 0;
    left: -5%;
    right: -5%;
    z-index: -1;
    border-radius: 50% 50% 0 0;
}
main.datama-light-modules .datama-light-introduction .datama-logo-full,
main.datama-light-modules .datama-light-introduction-no-metrics .datama-logo-full,
main.datama-light-modules .datama-light-introduction-no-dimensions .datama-logo-full {
    width: 20%;
    min-width: 90px;
}
main.datama-light-modules .datama-light-introduction-section {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
}
main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo,.datama-viewer-no-license-demo {
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    padding: 20px;
    width: 100%;
    gap: 20px;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}
main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo .datama-introduction-gif {
    object-fit: contain;
    align-self: center;
    width: 100%;
}
main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo .datama-introduction-indications {
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* RESPONSIVE */
@media screen and (max-width: 767px) {
    main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo {
        flex-direction: column;
        max-width: 90%;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo {
        flex-direction: column;
        max-width: 70%;
        grid-template-rows: 1fr;
        grid-template-columns: 2fr 1fr;
    }
}
@media screen and (min-width: 1200px) {
    main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo {
        flex-direction: row;
        max-width: 50%;
        grid-template-rows: 1fr;
        grid-template-columns: 3fr 1fr;
    }
}

/* RESPONSIVE */
@media screen and (max-width: 767px) {
    main.datama-light-modules .datama-light-introduction-section .datama-viewer-no-license-demo {
        flex-direction: column;
        max-width: 90%;
        grid-template-columns: 1fr;
        font-size: 20px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    main.datama-light-modules .datama-light-introduction-section .datama-viewer-no-license-demo {
        flex-direction: column;
        max-width: 70%;
        grid-template-columns: 1fr;
        font-size: 20px;
    }
}
@media screen and (min-width: 1200px) {
    main.datama-light-modules .datama-light-introduction-section .datama-viewer-no-license-demo {
        flex-direction: row;
        max-width: 50%;
        grid-template-columns: 1fr;
        font-size: 20px;
    }
}
/*
 * Compact Market Equation table: fit the plotter panel without horizontal scroll.
 * Padding / intrinsic select widths were the main horizontal bloat.
 */
.datama-market-equation-container {
    --market-equation-cell-pad-x: 0.35rem;
    --market-equation-cell-pad-y: 0.25rem;
    /* Grow with available cell space; cap so narrow panels stay usable */
    --market-equation-input-max: 12rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 10;
    max-width: 100%;
    box-sizing: border-box;
}
.datama-market-equation-container > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Table must shrink to the panel, not grow with select max-width */
.datama-market-equation-container .datama-table-container,
.datama-market-equation-container .datama-reactive-table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    margin-bottom: 0;
}
.datama-market-equation-container .datama-table,
.datama-market-equation-container .datama-reactive-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
}
.datama-market-equation-container .datama-table > .datama-table-tbody > .datama-table-row .datama-table-td,
.datama-market-equation-container .datama-table > .datama-table-thead > .datama-table-row .datama-table-th,
.datama-market-equation-container .datama-table > .datama-table-tfoot > .datama-table-row > .datama-table-th {
    padding: var(--market-equation-cell-pad-y) var(--market-equation-cell-pad-x);
    min-width: 0;
}
.datama-market-equation-container .datama-table .datama-input-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/*
 * Fill the cell when space allows, without exceeding the soft max.
 * Exclude emoji picker: it hides the caret and must stay a compact square
 * (caret gutter + width:100% created empty side bands and clipped glyphs).
 */
.datama-market-equation-container .datama-table .datama-input-select:not(.datama-input-emoji-picker) {
    width: 100% !important;
    max-width: min(100%, var(--market-equation-input-max)) !important;
    min-width: 0 !important;
    padding-left: 0.5rem;
    padding-right: 1.75rem;
    box-sizing: border-box;
}
.datama-market-equation-container .datama-table .datama-input-emoji-picker {
    width: 1.75rem !important;
    min-width: 1.75rem !important;
    max-width: 1.75rem !important;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0 !important;
    margin-inline: auto;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}
.datama-market-equation-container .datama-table .datama-input-select:not(.datama-input-emoji-picker) > .datama-input-select-value,
.datama-market-equation-container .datama-table .datama-input-select:not(.datama-input-emoji-picker) > .datama-input-select-value-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.datama-market-equation-container .datama-table .datama-input-emoji-picker > .datama-input-emoji-picker-value {
    overflow: visible;
    text-overflow: clip;
    line-height: 1;
}
.datama-market-equation-container .datama-table .datama-input:not(.datama-input-select):not(.datama-input-switch):not(.datama-input-button-group) {
    width: 100% !important;
    max-width: min(100%, var(--market-equation-input-max)) !important;
    min-width: 0 !important;
    /* Drop default 0.875rem side padding (Name / Unit / formula white bands) */
    padding: 0.25rem 0.4rem;
    box-sizing: border-box;
}
/* Unit: short values (k€, %, …) stay centered in a narrow column */
.datama-market-equation-container .datama-table .datama-input[data-key="unit"],
.datama-market-equation-container .datama-table .datama-input[data-key="totalStepUnit"] {
    padding: 0.25rem 0.35rem;
    text-align: center;
}
/*
 * Total + equation input ([1]*[2]) share one footer cell spanning `#` + Formula.
 * Label stays fixed; input grows and starts after "Total".
 */
.datama-market-equation-total-formula {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.datama-market-equation-total-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text-structure, var(--color-dark));
    white-space: nowrap;
}
.datama-market-equation-container .datama-table-tfoot .datama-table-row:not(.small) .datama-table-th:first-child .datama-market-equation-total-formula .datama-input-container,
.datama-market-equation-container .datama-table-tfoot .datama-table-row:not(.small) .datama-table-th:first-child .datama-market-equation-total-formula .datama-input:not(.datama-input-select) {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.datama-market-equation-container > .datama-market-equation-steps-container {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    height: 50px;
    width: max-content;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    overflow: visible;
}

.datama-market-equation-container > .datama-market-equation-steps-container > .datama-market-equation-parenthesis,
.datama-market-equation-container > .datama-market-equation-steps-container > .datama-market-equation-operator {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 0.5rem;
    font-size: 24px;
    font-weight: 500;
    color: var(--datama-primary);
}
.datama-market-equation-operand-container {
    margin: 0 0.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-white);
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
    min-width: 120px;
}
.datama-market-equation-operand-container::before,
.datama-market-equation-operand-container::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 4px;
    border: 1px solid rgba(var(--datama-primary-rgb), 0.2);
    border-radius: 6px;
}
.datama-market-equation-operand-container::before {
    left: 0;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.datama-market-equation-operand-container::after {
    right: 0;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.datama-market-equation-value-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
}
.datama-market-equation-value-container > * {
    display: inline-block;
    box-sizing: border-box;
}
.datama-market-equation-value-container > .datama-market-equation-value {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-dark);
    text-align: center;
}
.datama-market-equation-value-container > .datama-market-equation-operator {
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--datama-primary);
    min-width: 16px;
    text-align: center;
}
.datama-market-equation-value-container > .datama-market-equation-operator + .datama-market-equation-value {
    flex: 1;
    padding: 0.25rem 0.5rem;
}
/* Indented-card market equation editor (Settings > Market Equation, DEV-8738) */

.datama-market-equation-editor {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 0.8125rem;
}

.datama-market-equation-editor-body {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.datama-market-equation-editor-outline {
    display: flex;
    flex-direction: column;
    flex: 1 1 340px;
    min-width: 300px;
}

.datama-market-equation-editor-row {
    display: flex;
    align-items: stretch;
}

/* Indentation guides (mirrors the dimensions hierarchy) */
.datama-market-equation-editor-guide {
    position: relative;
    flex: 0 0 20px;
}

.datama-market-equation-editor-guide::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: 0;
    left: 9px;
    border-left: 1px solid rgba(var(--color-dark-rgb), 0.15);
}

.datama-market-equation-editor-guide.elbow::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 9px;
    width: 10px;
    height: calc(50% + 8px);
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.15);
    border-bottom-left-radius: 6px;
}

/* Operator gutter: sits BEFORE the card, edited in place on hover */
.datama-market-equation-editor-operator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(var(--datama-primary-rgb), 0.75);
}

.datama-market-equation-editor-operator.complex {
    color: rgba(var(--color-dark-rgb), 0.4);
    font-style: italic;
}

.datama-market-equation-editor-operator-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: rgba(var(--datama-primary-rgb), 0.75);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.datama-market-equation-editor-operator-select:hover,
.datama-market-equation-editor-operator-select:focus {
    border-color: rgba(var(--datama-primary-rgb), 0.4);
    background: rgba(var(--datama-primary-rgb), 0.06);
    color: var(--datama-primary);
}

/* Cards */
.datama-market-equation-editor-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: 8px;
    background: var(--color-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.datama-market-equation-editor-card:hover {
    border-color: rgba(var(--datama-primary-rgb), 0.45);
    box-shadow: 0 1px 3px rgba(var(--color-dark-rgb), 0.08);
}

.datama-market-equation-editor-row[data-selected="true"] .datama-market-equation-editor-card {
    border-color: rgba(var(--datama-primary-rgb), 0.65);
    background: rgba(var(--datama-primary-rgb), 0.04);
}

/* Left border color hints at the step type */
.datama-market-equation-editor-card[data-type="non-simplifiable"] {
    border-left-width: 3px;
    border-left-color: rgba(var(--color-dark-rgb), 0.35);
}

.datama-market-equation-editor-card[data-type="simplifiable"],
.datama-market-equation-editor-card[data-type="total"] {
    border-left-width: 3px;
    border-left-color: rgba(var(--datama-primary-rgb), 0.55);
}

.datama-market-equation-editor-emoji {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
}

.datama-market-equation-editor-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    line-height: 20px;
    color: var(--color-dark);
    cursor: pointer;
    padding: 0;
}

/* Card actions: hidden until the card is hovered */
.datama-market-equation-editor-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.datama-market-equation-editor-card:hover .datama-market-equation-editor-actions,
.datama-market-equation-editor-card:focus-within .datama-market-equation-editor-actions {
    opacity: 1;
    pointer-events: auto;
}

.datama-button.datama-market-equation-editor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(var(--color-dark-rgb), 0.88);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}

.datama-button.datama-market-equation-editor-button:hover {
    background: rgba(var(--color-dark-rgb), 0.06);
    color: var(--color-dark);
}

.datama-button.datama-market-equation-editor-button.disabled {
    color: rgba(var(--color-dark-rgb), 0.16);
    cursor: not-allowed;
    font-weight: 400;
}

.datama-button.datama-market-equation-editor-button.disabled:hover {
    background: transparent;
    color: rgba(var(--color-dark-rgb), 0.16);
}

.datama-button.datama-market-equation-editor-button svg {
    display: block;
    flex-shrink: 0;
}

.datama-button.datama-market-equation-editor-button > .datama-button-icon {
    height: auto;
    margin: 0;
}

/* Reorder/indent/delete use text glyphs for WebView-safe rendering (Tableau CEF). */
.datama-button.datama-market-equation-editor-button > .datama-button-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: 1;
    min-width: 0.75rem;
}

/* Hover inserter between two cards */
.datama-market-equation-editor-inserter {
    position: relative;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.datama-market-equation-editor-inserter .datama-button.datama-market-equation-editor-inserter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-height: 18px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    line-height: 0;
    border: 1px solid rgba(var(--datama-primary-rgb), 0.45);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--datama-primary);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.datama-market-equation-editor-inserter .datama-button.datama-market-equation-editor-inserter-button svg {
    display: block;
}

.datama-market-equation-editor-inserter:hover .datama-button.datama-market-equation-editor-inserter-button {
    opacity: 1;
    transform: scale(1);
}

/* Detail panel */
.datama-market-equation-editor-detail {
    flex: 1 1 280px;
    min-width: 260px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.06);
    position: sticky;
    top: 0;
    max-height: 420px;
    overflow-y: auto;
}

.datama-market-equation-editor-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.datama-market-equation-editor-detail-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-dark);
}

.datama-market-equation-editor-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.datama-market-equation-editor-field-label-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.datama-market-equation-editor-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: normal;
    color: rgba(var(--color-dark-rgb), 0.72);
}

.datama-market-equation-editor-detail .datama-input-select-value-text,
.datama-market-equation-editor-detail .datama-input:not(.datama-input-select):not(.datama-input-switch):not(.datama-input-button-group) {
    text-transform: none;
}

.datama-market-equation-editor-field-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.datama-market-equation-editor-field-error {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #b42318;
}

.datama-market-equation-editor-field-status {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
}

.datama-market-equation-editor-field-status.is-error {
    color: #b42318;
}

.datama-market-equation-editor-field-status.is-warning {
    /* Soft amber — informational, not alarming (unlike error red) */
    color: #a87b2c;
}

.datama-market-equation-editor-field.has-error .datama-input,
.datama-market-equation-editor-field.has-error .datama-market-equation-editor-sentence {
    border-color: #b42318;
}

.datama-market-equation-editor-field.has-warning .datama-input,
.datama-market-equation-editor-field.has-warning .datama-market-equation-editor-sentence {
    border-color: #f0d19a;
    background-color: rgba(250, 236, 205, 0.45);
}

.datama-market-equation-editor-card[data-validation="error"] {
    border-color: #f97066;
    box-shadow: inset 3px 0 0 #f04438;
}

.datama-market-equation-editor-card[data-validation="warning"] {
    border-color: #f0d19a;
    box-shadow: inset 3px 0 0 #e8c078;
}

.datama-market-equation-editor-validation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 8px;
}

.datama-market-equation-editor-validation-panel {
    border-radius: 6px;
    padding: 8px 10px;
    border: 1px solid transparent;
}

.datama-market-equation-editor-validation-panel.is-error {
    background: rgba(240, 68, 56, 0.08);
    border-color: rgba(240, 68, 56, 0.35);
    color: #b42318;
}

.datama-market-equation-editor-validation-panel.is-warning {
    background: rgba(250, 236, 205, 0.65);
    border-color: rgba(232, 192, 120, 0.55);
    color: #a87b2c;
}

.datama-market-equation-editor-validation-title {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 4px;
}

.datama-market-equation-editor-validation-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.72rem;
    line-height: 1.35;
}

.datama-market-equation-editor-help {
    display: inline-flex;
    align-items: center;
    color: rgba(var(--color-dark-rgb), 0.35);
    cursor: help;
}

.datama-market-equation-editor-help:hover {
    color: var(--datama-primary);
}

.datama-market-equation-editor-help svg {
    display: block;
}

/* Optional fields separation */
.datama-market-equation-editor-detail-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.datama-market-equation-editor-detail-divider::before,
.datama-market-equation-editor-detail-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
}

.datama-market-equation-editor-detail-divider-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--color-dark-rgb), 0.35);
}

/* Sentence-like equation editor (same pattern as the smart comments editor) */
.datama-market-equation-editor-sentence {
    padding: 8px 10px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: var(--border-radius, 6px);
    font-size: 0.8125rem;
    line-height: 1.9;
    min-height: 38px;
    background: var(--color-white);
    color: rgb(var(--color-dark-rgb));
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    word-break: break-word;
}

.datama-market-equation-editor-sentence:focus {
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.12);
}

.datama-market-equation-editor-sentence-chip {
    display: inline-block;
    padding: 0 7px;
    margin: 0 1px;
    border-radius: 10px;
    background: rgba(var(--datama-primary-rgb), 0.1);
    border: 1px solid rgba(var(--datama-primary-rgb), 0.25);
    color: var(--datama-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
}

.datama-market-equation-editor-formula-hint {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: rgba(var(--color-dark-rgb), 0.45);
}

.datama-market-equation-editor--insert-mode .datama-market-equation-editor-row[data-equation-insert-target="true"] .datama-market-equation-editor-card {
    cursor: copy;
    border-color: rgba(var(--datama-primary-rgb), 0.55);
    box-shadow: inset 0 0 0 1px rgba(var(--datama-primary-rgb), 0.2);
}

.datama-market-equation-editor--insert-mode .datama-market-equation-editor-row[data-equation-insert-target="true"] .datama-market-equation-editor-label {
    color: var(--datama-primary);
}

/* The legacy "fullwidth" dialog bleed (margin 0 -30px) was designed for the
   old steps table; the indented-card editor stays within the dialog width */
.datama-dialog .datama-market-equation-fullwidth:has(.datama-market-equation-editor) {
    margin: 0;
    max-width: 100%;
}

/* Equation generators (bootstrap the equation from the source metrics) */
.datama-market-equation-editor-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding: 0 4px 4px 0;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __notification.css project project-deep-sky
 */

.datama-light-notifications {
    display: flex;
    flex-direction: column;
    position: absolute;
    max-width: 33.33vw !important;
    bottom: 40px;
    right: 20px;
    transition: var(--transition-long-in);
    z-index: 999;
    direction: rtl;
}
.datama-light-notifications .datama-notification-icon {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
}
.datama-light-notifications .datama-notification-text {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}
#qv-page-container .datama-light-notifications {
    display: flex;
    flex-direction: column;
    position: absolute;
    max-width: 33.33% !important;
    bottom: 40px;
    right: 20px;
    transition: var(--transition-long-in);
    z-index: 999;
    direction: rtl;
}
.datama-light-notifications > .datama-notification {
    width: fit-content;
    min-width: 250px;
    direction: ltr;
    padding: 10px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--border-radius);
    /* Same chrome for all toasts (progress, done, accent, …) */
    border: 2px solid rgba(var(--datama-primary-rgb), 1);
    transition: var(--transition-long-out);
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    background: var(--color-white);
    cursor: pointer;
    margin-top: 10px;
    float: right;
    position: relative;
}
.datama-light-notifications > .datama-notification[data-type="warning"] {
    border-color: rgba(var(--color-warning-rgb), 1);
}
.datama-light-notifications > .datama-notification[data-type="error"] {
    border-color: rgba(var(--color-danger-rgb), 1);
}
.datama-notification > * {
    width: 100%
}
/** RICH NOTIFICATION (icon + contents + buttons) — same card chrome as base */
.datama-light-notifications > .datama-notification.datama-notification-rich {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    max-width: 400px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-content-body {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-content-body > .datama-title-h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-content-body > p,
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-content-body > .datama-notification-text {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-buttons {
    grid-row: 2;
    grid-column: 1;
    width: auto;
    justify-self: end;
    margin-top: 8px;
}
.datama-light-notifications > .datama-notification p {
    margin: 0;
    font-weight: 300;
}
.datama-light-notifications > .datama-notification p ~ p {
    margin-top: 10px;
}
.datama-light-notifications > .datama-notification.datama-notification-show {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    gap: 10px;
}
.datama-light-notifications > #container-center-container-center-footer-current-version-notification.datama-notification-show {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
}
.datama-light-notifications > #container-center-container-center-footer-current-version-notification span.datama-icon.arrow-up-right svg path {
    fill: var(--color-white) !important;
}
.datama-light-notifications > .datama-notification[data-type="warning"].datama-notification-show:hover::after {
    color: var(--color-warning);
}
.datama-light-notifications > .datama-notification[data-type="error"].datama-notification-show:hover::after {
    color: var(--color-danger);
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons:empty {
    display: none;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons > button:not(:last-child) {
    margin-right: 10px;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons > button > * {
    line-height: 20px;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons > button .datama-icon.peace {
    transform: translateY(-2px);
}
/** NOTIFICATION PROGRESS — same card as others; only reserves space for the bar */
.datama-light-notifications > .datama-notification.datama-notification-progress {
    padding-bottom: 20px;
    box-sizing: border-box;
}
.datama-light-notifications > .datama-notification > .datama-progress {
    position: absolute;
    left: 10px;
    bottom: 5px;
    height: 6px;
    right: 10px;
    width: calc(100% - 20px);
    display: flex;
    flex-wrap: nowrap;
    border-radius: 3px;
    overflow: hidden;
}
.datama-light-notifications > .datama-notification > .datama-progress > .datama-progress-bar {
    display: inline-block;
    background: rgba(var(--datama-primary-rgb), 1);
    height: 100%;
    transition: var(--transition-in);
    border-radius: 3px;
    overflow: hidden;
}

.datama-light-notifications > .datama-notification[data-type="warning"] > .datama-progress > .datama-progress-bar  {
    background: var(--color-warning);
}
.datama-light-notifications > .datama-notification[data-type="error"] > .datama-progress > .datama-progress-bar  {
    background: var(--color-danger);
}
.datama-light-notifications > .datama-notification > p {
    text-align: left;
}
.datama-light-notifications > .datama-notification > .datama-notification-icon + * {
    line-height: 20px;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="analysis"] {

    transform: scale(.75);
    width: 20px;
    height: 10px;
    --c: no-repeat radial-gradient(farthest-side,var(--datama-primary) 93%,var(--datama-primary));
    background:
            var(--c) 0    0,
            var(--c) 50%  0,
            var(--c) 100% 0;
    background-size: 4px 4px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="analysis"]:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 6px;
    background: var(--datama-primary-light);
    left: 0;
    top: 0;
    animation:
            l4-1 1s  linear infinite alternate,
            l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="default"] {

    transform: scale(.75);
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
    --c: linear-gradient(var(--datama-primary) 0 0);
    --r1: radial-gradient(farthest-side at bottom, var(--datama-primary-light) 93%, #0000);
    --r2: radial-gradient(farthest-side at top   , var(--datama-primary-light) 93%, #0000);
    background:
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2);
    background-repeat: no-repeat;
    animation: l2 1s infinite alternate;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="done"] {

    transform: rotate(-45deg) scale(.6);
    animation: writing-check 1s forwards;
    border-color: var(--datama-primary-light);
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"] {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    color: var(--color-danger)
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::before,
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::after {
    width: 15px;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    left: 2.5px;
    top: 9px;
    content: '';
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::before {
    animation: notification-error-icon-left 1s forwards;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::after {
    animation: notification-error-icon-right 1s forwards;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="warning"] {
    width: 0;
    height: 0;
    border-bottom: 20px solid currentColor;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    color: var(--color-warning);
    position: relative;
    animation: notification-warning-icon 1s ease-in forwards;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="warning"]::before {
    width: 0;
    height: 0;
    color: white;
    position: absolute;
    left: -8px;
    top: 3px;
    content: '';
    border-bottom: 16px solid currentColor;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="warning"]::after {
    content: '!';
    color: var(--color-warning);
    position: absolute;
    left: -2px;
    top: 3px;
    font-weight: bold;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="default"] {
    --c: linear-gradient(var(--color-warning) 0 0);
    --r1: radial-gradient(farthest-side at bottom, var(--color-warning) 93%, #0000);
    --r2: radial-gradient(farthest-side at top   , var(--color-warning) 93%, #0000);
    background:
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2);
    background-repeat: no-repeat;
    animation: l2 1s infinite alternate;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="done"] {
    border-color: var(--color-warning);
}
.datama-light-notifications > .datama-notification[data-type="error"] .datama-notification-icon[data-icon="done"] {
    border-color: var(--color-danger);
}
.datama-light-notifications > .datama-notification[data-type="error"] .datama-notification-icon[data-icon="analysis"] {

    transform: scale(.75);
    width: 20px;
    height: 10px;
    --c: no-repeat radial-gradient(farthest-side,var(--color-danger) 93%,var(--color-danger));
    background:
            var(--c) 0    0,
            var(--c) 50%  0,
            var(--c) 100% 0;
    background-size: 4px 4px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
}
.datama-light-notifications > .datama-notification[data-type="error"] .datama-notification-icon[data-icon="analysis"]:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 6px;
    background: var(--color-danger);
    left: 0;
    top: 0;
    animation:
            l4-1 1s  linear infinite alternate,
            l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="analysis"] {
    transform: scale(.75);
    width: 20px;
    height: 10px;
    --c: no-repeat radial-gradient(farthest-side,var(--color-warning) 93%,var(--color-warning));
    background:
            var(--c) 0    0,
            var(--c) 50%  0,
            var(--c) 100% 0;
    background-size: 4px 4px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="analysis"]:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 6px;
    background: var(--color-warning);
    left: 0;
    top: 0;
    animation:
            l4-1 1s  linear infinite alternate,
            l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
@keyframes notification-warning-icon {
    0% {
        transform: scale(.8);
    }
    10% {
        transform: scale(1.2);
    }
    20% {
        transform: scale(.9);
    }
}
@keyframes notification-error-icon-left {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
@keyframes notification-error-icon-right {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}
@keyframes writing-check {
    0% {
        height: 12px;
        width: 5px;
        border-left: 5px solid ;
        border-bottom: 5px solid transparent;
    }
    50% {
        height: 12px;
        width: 20px;
        border-left: 5px solid var(--datama-primary-light);
        border-bottom: 5px solid transparent;
    }
    100% {
        height: 12px;
        width: 20px;
        border-left: 5px solid var(--datama-primary-light);
        border-bottom: 5px solid var(--datama-primary-light);
    }
}
@keyframes l2 {
    0%,25% {
        background-size: 4px 0,4px 2px,4px 2px,4px 0,4px 2px,4px 2px,4px 0,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(50% - 1px),0 calc(50% + 1px),50% 50%,50% calc(50% - 1px),50% calc(50% + 1px),100% 50%,100% calc(50% - 1px),100% calc(50% + 1px);
    }
    50% {
        background-size: 4px 100%,4px 2px,4px 2px,4px 0,4px 2px,4px 2px,4px 0,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(0% - 1px),0 calc(100% + 1px),50% 50%,50% calc(50% - 1px),50% calc(50% + 1px),100% 50%,100% calc(50% - 1px),100% calc(50% + 1px);
    }
    75% {
        background-size: 4px 100%,4px 2px,4px 2px,4px 100%,4px 2px,4px 2px,4px 0,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(0% - 1px),0 calc(100% + 1px),50% 50%,50% calc(0% - 1px),50% calc(100% + 1px),100% 50%,100% calc(50% - 1px),100% calc(50% + 1px);
    }
    95%,100% {
        background-size: 4px 100%,4px 2px, 4px 2px,4px 100%,4px 2px,4px 2px,4px 100%,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(0% - 1px),0 calc(100% + 1px),50% 50%,50% calc(0% - 1px),50% calc(100% + 1px),100% 50%,100% calc(0% - 1px),100% calc(100% + 1px);
    }
}
@keyframes l4-0 {
    0%      {background-position: 0  100%,50% 0   ,100% 0}
    8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
    50%     {background-position: 0  0   ,50% 100%,100% 0}
    58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
    100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}
@keyframes l4-1 {
    100% {left:calc(100% - 4px)}
}
@keyframes l4-2 {
    100% {top:-0.1px}
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __panels.css project project-deep-sky
 */

.datama-panels-search {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.datama-panels-search--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-white);
    padding-top: 0.15rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 20px 10px var(--color-white);
}
.datama-panels-search--sticky::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.75rem;
    height: 0.75rem;
    background: linear-gradient(to bottom, var(--color-white), transparent);
    pointer-events: none;
}
.datama-panels-scope-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Keep rubrique titles clear of the sticky search bar on rail navigation. */
    scroll-margin-top: 3.75rem;
}
.datama-panels-scope-section--solo {
    gap: 0;
}
.datama-panels-scope-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.15rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-structure);
    border-bottom: 1px solid rgba(var(--datama-primary-rgb), 0.12);
}
.datama-panels-scope-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-chrome-color);
}
.datama-panels-scope-heading-icon .datama-icon,
.datama-panels-scope-heading-icon svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
    fill: currentColor !important;
}
.datama-panels-scope-title {
    line-height: 1.2;
}
.datama-panels-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.datama-panels-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--icon-chrome-color);
    pointer-events: none;
    z-index: 1;
}
.datama-panels-search-icon .datama-icon,
.datama-panels-search-icon svg {
    width: 1rem !important;
    height: 1rem !important;
    fill: currentColor !important;
}
.datama-panels-search input {
    width: 100%;
    padding: 0.6rem 2.25rem 0.6rem 2.5rem;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: 8px;
    outline: none;
    font-size: 0.875rem;
    color: var(--color-dark);
    background: var(--color-white);
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels-search-field:focus-within .datama-panels-search-icon {
    color: var(--icon-action-color);
}
.datama-panels-search-field:focus-within input {
    border-color: var(--focus-border-color);
    box-shadow: var(--focus-ring);
}
.datama-panels-search input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.45);
}
.datama-panels-search-clear {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: none;
    border-radius: 999px;
    background: rgba(var(--color-dark-rgb), 0.06);
    color: rgba(var(--color-dark-rgb), 0.55);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.datama-panels-search-clear:hover {
    background: rgba(var(--color-dark-rgb), 0.1);
    color: var(--color-dark);
}
.datama-panels-search-empty {
    padding: 0.35rem 0.15rem 0;
    font-size: 0.825rem;
    color: rgba(var(--color-dark-rgb), 0.55);
}
.datama-panels.datama-panels-searching > .datama-panels-list > .datama-panel.datama-panel-search-hidden,
.datama-panels.datama-panels-searching > .datama-panels-list > .datama-panels-scope-section.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-panel.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-fieldset-wrapper.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-fieldset.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-fieldset-row.datama-panel-search-hidden {
    display: none !important;
}
.datama-panels-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.datama-panels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.datama-panels > .datama-panel,
.datama-panels > .datama-panels-list > .datama-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    overflow: visible;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

/* Closed panels — clip fading content and keep a solid surface */
.datama-panels > .datama-panel.datama-panel-close,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close {
    overflow: hidden;
    background: var(--color-white);
}
.datama-panels > .datama-panel:hover,
.datama-panels > .datama-panels-list > .datama-panel:hover {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 2px 6px 0 rgba(var(--color-dark-rgb), 0.08);
}
.datama-panels > .datama-panel:has(.datama-input-select-open),
.datama-panels > .datama-panels-list > .datama-panel:has(.datama-input-select-open) {
    z-index: 10;
}
.datama-panels > .datama-panel > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    background: var(--color-white);
    color: var(--text-body);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon {
    margin-left: -.25rem;
    margin-right: .5rem;
    color: var(--icon-action-color);
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon,
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg {
    fill: var(--icon-action-color) !important;
    color: var(--icon-action-color);
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon *,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon * {
    font-size: .9rem !important;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header {
    flex: 1;
    margin-right: auto;
    margin-left: 0;
    color: var(--text-body);
}
.datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container {
    background: color-mix(in srgb, var(--datama-primary) 10%, var(--color-white));
    border-bottom-color: var(--state-active-border);
    color: var(--text-body);
}

.datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover,
.datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover {
    background: color-mix(in srgb, var(--datama-primary) 6%, var(--color-white));
    color: var(--text-body);
}

.datama-panels > .datama-panel > .datama-panel-content,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-content {
    width: 100%;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    background: var(--color-white);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: none;
    opacity: 1;
    visibility: visible;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Stack above siblings while open; keep overflow so scroll position is preserved. */
.datama-panels > .datama-panel:has(.datama-panel-content .datama-input-select-open),
.datama-panels > .datama-panels-list > .datama-panel:has(.datama-panel-content .datama-input-select-open) {
    z-index: 100;
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-content,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-content {
    height: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container {
    background: var(--color-white);
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:hover,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:hover {
    background: color-mix(in srgb, var(--color-dark) 3%, var(--color-white));
    color: var(--text-body);
}
.datama-panels > .datama-panel > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container {
    position: relative;
}
.datama-panels > .datama-panel > .datama-panel-header-container::after,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 5px solid var(--caret-color);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-bottom-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel > .datama-panel-header-container:hover::after,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:hover::after {
    border-bottom-color: var(--caret-color-hover);
}
.datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container::after,
.datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container::after {
    border-bottom-color: var(--caret-color-open);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container::after,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container::after {
    transform: translateY(-50%) rotate(180deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-bottom-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:hover::after,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:hover::after {
    border-bottom-color: var(--caret-color-hover);
}

/* Permettre l'overflow pour les dropdowns une fois l'animation terminée */
.datama-panel-content.allow-overflow {
    overflow: visible !important;
}
/*
 * 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(.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: .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 — flat selectors only (Tableau CEF has no CSS nesting). */
.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;
    color: var(--color-white);
}

.plotter-button.highlight .plotter-button-icon,
.plotter-button.highlight .plotter-icon,
.plotter-button.highlight svg {
    color: var(--color-white);
}

.plotter-button.highlight .plotter-button-icon path,
.plotter-button.highlight .plotter-icon path,
.plotter-button.highlight svg path {
    fill: var(--color-white) !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/__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 button - original style by default
 * Specificity must beat `div[data-app="true"] a { color: primary }` */
div[data-app="true"] a.plotter-documentation,
div[data-app="true"] .plotter-documentation,
.plotter-documentation {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    color: var(--help-color);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: help;
}

div[data-app="true"] a.plotter-documentation:hover,
div[data-app="true"] .plotter-documentation:hover,
.plotter-documentation:hover {
    color: var(--help-color-hover);
    background: var(--help-bg-hover);
    transform: scale(1.05);
}

div[data-app="true"] a.plotter-documentation:active,
div[data-app="true"] .plotter-documentation:active,
.plotter-documentation:active {
    color: var(--help-color-active);
}

div[data-app="true"] a.plotter-documentation svg,
div[data-app="true"] a.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;
}

/* When documentation is inside label - pure link style */
div[data-app="true"] .plotter-input-label .plotter-documentation,
.plotter-input-label .plotter-documentation {
    margin-left: auto;
    margin-right: 2px;
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    padding: 2px !important;
    border-radius: 0 !important;
    opacity: 1;
    color: var(--help-color);
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
}

div[data-app="true"] .plotter-input-label .plotter-documentation:hover,
.plotter-input-label .plotter-documentation:hover {
    opacity: 1;
    background: var(--help-bg-hover) !important;
    color: var(--help-color-hover);
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
}

div[data-app="true"] .plotter-input-label .plotter-documentation:active,
.plotter-input-label .plotter-documentation:active {
    color: var(--help-color-active);
}

.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), .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;
    transition: all 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: all 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: .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: .7rem;
    line-height: .5rem;
    padding-bottom: 2px;
    transition: .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: .4rem 0;
    height: .4rem;
    border-radius: .2rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(var(--datama-primary-rgb), 0.8);
    min-width: .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), .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), .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), .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: .3rem 0;
    height: .6rem;
    border-radius: .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: .7rem;
    line-height: .5rem;
    display: inline-block;
    opacity: 0;
    transition: .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: .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: .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-emoji-picker {
    /* Base select padding reserves 2.5rem for the caret: not needed here (caret hidden) */
    min-width: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.plotter-input-emoji-picker > .plotter-input-emoji-picker-value {
    font-size: 1.1rem;
    line-height: 1.5rem;
    overflow: visible;
    pointer-events: none;
    width: 100%;
    text-align: center;
    align-self: center;
}

.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-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: 0;
    overflow-y: auto;
    transition: all 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;
    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 {
    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.5rem 2rem;
    gap: 0.25rem;
    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.5rem 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;
}

/* 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;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--help-color);
    cursor: help;
    transform: none !important;
}

div[data-app="true"] .plotter-fieldset-title-container .plotter-documentation:hover,
div[data-app="true"] .plotter-fieldset-legend-container .plotter-documentation:hover,
.plotter-fieldset-title-container .plotter-documentation:hover,
.plotter-fieldset-legend-container .plotter-documentation:hover {
    color: var(--help-color-hover);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

div[data-app="true"] .plotter-fieldset-title-container .plotter-documentation:active,
div[data-app="true"] .plotter-fieldset-legend-container .plotter-documentation:active,
.plotter-fieldset-title-container .plotter-documentation:active,
.plotter-fieldset-legend-container .plotter-documentation:active {
    color: var(--help-color-active);
}

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;
    background: var(--color-white) !important;
    padding: 0 0.75rem 0 0.25rem !important;
    margin-left: 0;
    border: 0 !important;
    box-shadow: none !important;
    height: auto;
    transform: none !important;
}

.plotter-fieldset-inline .plotter-fieldset-container {
    padding: 0.5rem 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;
}

.plotter-fieldset-inline .plotter-fieldset-row:not(:last-child) {
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
    /* padding-bottom: 0.75rem; */
    /* margin-bottom: 0.75rem; */
    margin-top: -1rem;
}

.plotter-fieldset-inline .plotter-fieldset-row:last-child {
    margin-bottom: 0;
    margin-top: -16px;
}


/* Dark mode for inline fieldset */
@media (prefers-color-scheme: dark) {}
/* 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;
}

/* What If scenario summary (settings preview sentence) */
.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;
}

/*
 * 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.15rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 20px 10px var(--color-white);
}
.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;
    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-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: -.25rem;
    margin-right: .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: .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::after,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container::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 > .plotter-ui-panel > .plotter-ui-panel-header-container:hover::after,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container:hover::after {
    border-bottom-color: var(--caret-color-hover);
}
.plotter-ui-panels > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container::after,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container::after {
    border-bottom-color: var(--caret-color-open);
}
.plotter-ui-panels > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container::after,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container::after {
    transform: translateY(-50%) rotate(180deg);
    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 > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container:hover::after,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container:hover::after {
    border-bottom-color: var(--caret-color-hover);
}

/* 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 (parent is `.plotter-ui-panels`, not `.datama-panels`).
 */
.plotter-ui-panels > .datama-panel,
.plotter-ui-panels > .plotter-ui-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 {
    overflow: hidden;
    background: var(--color-white);
}
.plotter-ui-panels > .datama-panel:hover,
.plotter-ui-panels > .plotter-ui-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) {
    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 {
    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 {
    margin-left: -.25rem;
    margin-right: .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 > .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 {
    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 * {
    font-size: .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 {
    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 {
    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 {
    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 {
    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) {
    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 {
    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 {
    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 {
    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::after,
.plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container::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:hover::after,
.plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container:hover::after {
    border-bottom-color: var(--caret-color-hover);
}
.plotter-ui-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container::after,
.plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container::after {
    border-bottom-color: var(--caret-color-open);
}
.plotter-ui-panels > .datama-panel.datama-panel-close > .datama-panel-header-container::after,
.plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container::after {
    transform: translateY(-50%) rotate(180deg);
    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-close > .datama-panel-header-container:hover::after,
.plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container: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: .1s ease-out;
}
.plotter .plotter-shortcuts:hover .plotter-shortcut-on-hover {
    visibility: visible;
    opacity: 1;
    transition: .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;
}

.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 li {
    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 {
    margin-top: .25rem;
}

.plotter-custom-view .datama-module-comment li {
    margin-top: .35rem;
}

.plotter-custom-view .datama-module-comment ul {
    margin-bottom: .5rem;
}

.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) ,

/* Current view indicator in shortcut button-group (pinned = 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: .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: .25;
    pointer-events: none;
    transition: opacity .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: .3;
    transition: opacity .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 .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, 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: .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: .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;
}
/* 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: .1s ease-out;
}
.plotter:hover .plotter-shortcuts.plotter-shortcuts-hover-only {
    opacity: 1;
    transition: .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: .8rem;
    align-self: center;
}

/* Add margin bottom to buttons for alignment with selects */
.plotter-shortcuts .datama-button ,

/* Add margin bottom to buttons for alignment with selects */
.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 ,

/* Show dividers in button group on both desktop and mobile */
.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) ,

/* 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 .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: all 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 ,

/* Disable counter completely in plotter shortcuts */
.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 , including inactive ones */
.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: all 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 ,

    /* Show and style dividers in button group for narrow viewports */
    .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;
}

/* Chart title / subtitle bands (HTML): reserved above/below scales so axes and marks do not overlap. */
.plotter-visualization {
    position: relative;
}

.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: .2s ease-in;
}
.plotter-plot .plotter-highlight * {
    color: white;
    transition: .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;
    filter:
        drop-shadow(0 0 2px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 5px rgba(0, 0, 0, 0.22))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));
    transition: filter 0.2s ease-in, opacity 0.2s ease-in;
}

/*
 * 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;
    transition: background-color 0.2s ease-in;
}
.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: .1;
    transition: .2s ease-in;
}
.plotter *[data-hover="in"]:not([opacity="0"]):not([opacity="1"]),
.plotter *[data-hover="scope"]:not([opacity="0"]) {
    opacity: .5;
    transition: .2s ease-in;
}
.plotter *[data-hover="in"],
.plotter *.plotter-lock {
    stroke-width: 1.5px;
    stroke-opacity: 1;
    transition: 0.2s ease-in;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}


.plotter-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 10;
}
.plotter-hover .plotter-hover-element {
    position: absolute;
    opacity: 1;
    transition: opacity .1s ease-in;
    background-color: var(--color-white);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    min-width: 200px;
    white-space: pre-wrap;
    padding: 5px 10px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.25);
    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: .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), .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), .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), .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), .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: 280px;
    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;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05);
    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.collapsed {
    transform: translateX(105%);
    opacity: 0;
    pointer-events: none;
}

.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, .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
 * Light shell (`div[data-app="true"]`) via DataMaInput.__portalSelectDropdown.
 */
.plotter-panel:has(.datama-input-select-open) , 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
 * Light shell (`div[data-app="true"]`) via DataMaInput.__portalSelectDropdown.
 */
.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 is ~250px content-wide: keep label + control (toggle, trash, select) on one row. */
.plotter .plotter-panel .datama-fieldset,
.plotter .plotter-panel .datama-fieldset-inline .datama-fieldset-row {
    container-type: normal;
}

.plotter .plotter-panel .datama-fieldset-row {
    grid-template-columns: 1fr auto;
}

.plotter .plotter-panel .datama-fieldset-right {
    justify-content: flex-end;
}

.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-save-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.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-save-button > .datama-button-icon ,
.plotter .plotter-panel .plotter-settings-save-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-save-button > .datama-button-icon svg ,
.plotter .plotter-panel .plotter-settings-save-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-save-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), .1);
    transition: .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 ,

/* Increase font size for quick actions buttons */
.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 {
    transition: width 0.3s ease;
    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, 280px));
    padding-right: 8px;
}

.plotter.panel-open .plotter-shortcuts {
    right: calc(var(--plotter-panel-width, 280px) + 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;
}

.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,

/* Make the entire input clickable */
.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],

/* Style for multiple select */
.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 ,

/* Compact dropdown in shortcuts */
.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 rgba(73, 158, 149, 1) !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(.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,

/* Ensure scrollable containers have enough height for 3 items */
.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,

/* Improved scrollbar styling */
.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 ,

/* Webkit scrollbar styling - more elegant and subtle */
.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,

/* Hide scrollbar buttons */
.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 calc(100% / 12)
    );
    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 .15s ease-in, border-color .15s ease-in, color .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, .1);
    transition: box-shadow .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: Inter, Montserrat, var(--font-family), sans-serif;
    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 ,

/* Unified compact selects inside the matrix (column, gauge, indicator, add). */
.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) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __reactive_table.css project project-deep-sky
 */

/* DataMaReactiveTable styles */
.datama-reactive-table-container {
    width: 100%;
    height: 100%;
    /* Enable horizontal scrolling */
    overflow-x: auto !important; /* Force horizontal scrolling */
    /* Prevent content from being cut off */
    overflow-y: auto;
    font-family: var(--datama-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--datama-text-color, #333);
    background-color: var(--datama-background-color, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 0;
    /*border-left: var(--border);*/
    border-right: var(--border);
    border-bottom: var(--border);
    /* Remove top border from container */
    border-top: none;
    /* Improve scrollbar appearance */
    scrollbar-width: thin;
    scrollbar-color: var(--datama-border-color, #e0e0e0) transparent;
}

.datama-reactive-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    margin: 0;
    /* Use fixed layout to ensure columns maintain their width */
    table-layout: fixed;
}

/* Header styles */
.datama-reactive-table-header {
    background-color: var(--datama-background-color, #fff);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Add back the top border on the header, match thickness with left border */
.datama-reactive-table-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px; /* Match the 1px thickness of the left border */
    background-color: var(--datama-border-color, #e0e0e0);
    z-index: 11;
}

.datama-reactive-table-header::after {
    content: '';
    position: absolute;
    height: 1px;
    background-color: var(--datama-border-color, #e0e0e0);
    z-index: 11;
    margin-top: auto;
    width: 100%;
}

.datama-reactive-table-header-row {
    height: 48px;
    background: rgba(var(--datama-primary-rgb), .08);
}

/* Cell styles */
.datama-reactive-table-cell {
    padding: 1rem 1.5rem;
    text-align: left;
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
    overflow: visible; /* Allow content to be visible */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break words to prevent overflow */
}

/* Override padding for first column (selected) */
/*.datama-reactive-table-cell:not(.filterable):first-child {*/
/*    padding: 0 !important;*/
/*}*/

/* Allow cells to stretch */
.datama-reactive-table-cell:not(:first-child) {
    width: auto; /* Allow cells to stretch */
}

.datama-reactive-table th.datama-reactive-table-cell {
    font-weight: 500;
    color: var(--datama-primary, #499e95);
    white-space: normal; /* Allow header text to wrap */
    padding: 12px 16px;
    line-height: 24px;
}

/* Override padding for first header cell (selected) */
/*.datama-reactive-table th.datama-reactive-table-cell:not(.filterable):first-child {
    padding: 0 !important;
}*/

/* Header content with sort icon */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-text-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.header-title-row,
.header-subtitle-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.datama-reactive-table-cell.filterable > .header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.datama-reactive-table-cell.filterable > .header-content > .datama-button {
    width: 20px;
    height: 20px;
}
.datama-reactive-table-cell.filterable > .header-content > .datama-button:hover {
    background: rgba(var(--datama-primary-rgb), .2);
    transition: .1s ease-in;
}
.datama-reactive-table-cell.filterable > .header-content > .datama-button .datama-button-icon {
    font-size: 18px;
}
.datama-reactive-table-cell.filterable > .header-content > .header-text {
    width: calc(100% - 48px);
}
.datama-reactive-table-cell.filterable > .header-content > .filter-container {
    width: 100%;
    display: flex;
}
.datama-reactive-table-cell.filterable > .header-content > .filter-container {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
}
.datama-reactive-table-cell.filterable > .header-content > .filter-container input {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
}


.header-content.sortable {
    cursor: pointer;
}

.header-content.sortable:hover {
    color: var(--state-active-text);
}

.sort-icon {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    position: relative;
    cursor: pointer;
    transition: opacity .12s ease;
    color: var(--caret-color);
}

.sort-icon::before,
.sort-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.3;
    transition: opacity .12s ease;
}

.sort-icon::before {
    top: 0;
    border-bottom: 4px solid currentColor;
    transform: translateX(-50%);
}

.sort-icon::after {
    bottom: 0;
    border-top: 4px solid currentColor;
    transform: translateX(-50%);
}

.sort-icon.sort-asc::before,
.sort-icon.asc::before {
    opacity: 1;
    color: var(--caret-color-open);
}

.sort-icon.sort-desc::after,
.sort-icon.desc::after {
    opacity: 1;
    color: var(--caret-color-open);
}

/* Hover: darken both arrows for feedback */
.sort-icon:hover::before,
.sort-icon:hover::after {
    opacity: 0.6;
}
/* Keep active arrow fully opaque even on hover */
.sort-icon.asc:hover::before { opacity: 1; }
.sort-icon.desc:hover::after { opacity: 1; }

/* Reveal header controls (sort icons and filter toggles) only on header hover */
/* Hide all header controls by default except the active sort icon */
.datama-reactive-table-header.hover-reveal-controls .sort-icon,
.datama-reactive-table-header.hover-reveal-controls .filter-toggle-button {
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s ease;
}
.datama-reactive-table-header.hover-reveal-controls .sort-icon.asc,
.datama-reactive-table-header.hover-reveal-controls .sort-icon.desc {
    opacity: 1;
    visibility: visible;
}
/* Reveal all controls when hovering the header area, header row, or a given column */
.datama-reactive-table-header.hover-reveal-controls:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls:hover .filter-toggle-button,
.datama-reactive-table-header.hover-reveal-controls .datama-reactive-table-header-row:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls .datama-reactive-table-header-row:hover .filter-toggle-button,
.datama-reactive-table-header.hover-reveal-controls th:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls th:hover .filter-toggle-button,
.datama-reactive-table-header.hover-reveal-controls .header-content:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls .header-content:hover .filter-toggle-button {
    opacity: 1;
    visibility: visible;
}

/* Filter styles */
.filter-container {
    margin-top: 8px;
}

.filter-input {
    width: 100%;
    padding: 6px 8px;
    border: var(--border);
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}

.filter-input:focus {
    border-color: var(--focus-border-color);
    box-shadow: var(--focus-ring);
}

/* Row styles */
.datama-reactive-table-row {
    border-bottom: 1px solid transparent;
    transition: background-color 0.2s ease;
}

.datama-reactive-table-row.bordered {
    border-bottom: var(--border);
    transition: background-color 0.2s ease;
}

.datama-reactive-table-row.striped {
    background-color: var(--datama-stripe-color, rgba(0, 0, 0, 0.02));
}

.datama-reactive-table-row.hoverable:hover {
    background-color: var(--datama-hover-color, rgba(73, 158, 149, 0.1));
}

.datama-reactive-table-row.clickable {
    cursor: pointer;
}

/* Cell alignment */
.datama-reactive-table-cell.align-left {
    text-align: left;
}

.datama-reactive-table-cell.align-center,
.datama-reactive-table-cell.text-center {
    text-align: center;
}

.datama-reactive-table-cell.align-right {
    text-align: right;
}

/* Checkbox styles */
.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.checkbox-container.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reactive-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 2px solid var(--datama-border-color, #e0e0e0);
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.reactive-checkbox:checked {
    background-color: var(--datama-primary, #499e95);
    border-color: var(--datama-primary, #499e95);
}

.reactive-checkbox:checked::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    top: -1px;
    left: 3px;
}

.reactive-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(73, 158, 149, 0.2);
}

.checkbox-label {
    margin-left: 8px;
    font-size: 14px;
}

/* Bordered table */
.datama-reactive-table.bordered {
    border: var(--border);
}

.datama-reactive-table.bordered .datama-reactive-table-cell {
    border-right: var(--border);
}

.datama-reactive-table.bordered .datama-reactive-table-cell:last-child {
    border-right: none;
}

/* Vertical separators */
.datama-reactive-table.vertical-separators .datama-reactive-table-cell {
    border-right: var(--border);
}

.datama-reactive-table.vertical-separators .datama-reactive-table-cell:last-child {
    border-right: none;
}

.datama-reactive-table.no-vertical-separators .datama-reactive-table-cell {
    border-right: none;
}

/* Horizontal separators */
.datama-reactive-table.horizontal-separators tbody > tr:not(:last-child) > .datama-reactive-table-cell {
    border-bottom: var(--border);
}

.datama-reactive-table.horizontal-separators tbody > tr:not(:last-child) > .datama-reactive-table-cell:last-child {
    border-bottom: none;
}

.datama-reactive-table.no-horizontal-separators tbody > tr:not(:last-child) > .datama-reactive-table-cell {
    border-bottom: none;
}

/* Compact table */
.datama-reactive-table.compact .datama-reactive-table-cell {
    padding: 8px 12px;
}

.datama-reactive-table.compact .datama-reactive-table-header-row {
    height: 40px;
}

/* Pagination styles */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-top: var(--border);
}

.pagination-button {
    background-color: transparent;
    border: var(--border);
    border-radius: 4px;
    padding: 6px 12px;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-button[disabled="false"]:hover {
    background-color: var(--datama-primary, #499e95);
    color: white;
    border-color: var(--datama-primary, #499e95);
}

.pagination-button[disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-indicator {
    margin: 0 12px;
    font-size: 14px;
}

/* Empty state */
.empty-state {
    padding: 32px;
    text-align: center;
    color: var(--datama-text-muted, #999);
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .datama-reactive-table-cell {
        padding: 8px 12px;
    }
    
    .datama-reactive-table th.datama-reactive-table-cell {
        font-size: 13px;
    }
    
    .datama-reactive-table td.datama-reactive-table-cell {
        font-size: 13px;
    }
}

/* Interest bar styles (similar to the existing interest bars) */
.interest-bar-container {
    width: 100%;
    height: 4px;
    background-color: var(--datama-border-color, #e0e0e0);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.interest-bar {
    height: 100%;
    background-color: var(--datama-primary, #499e95);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Add a class for the anomaly count title to display on two lines */
.anomaly-count-header .header-text {
    white-space: pre-line;
}

/* Allow text wrapping in specific cells if needed */
.datama-reactive-table-cell.wrap-text {
    white-space: normal;
}

/* Checkbox column specific styling */
.datama-reactive-table-cell.align-center .checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Ensure the checkbox column is not too wide */
.datama-reactive-table-cell[id^="header-selected"] {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Style for checkbox cells to ensure they're properly centered */
td.datama-reactive-table-cell[id^="cell-selected"] {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Make the checkbox container compact */
td.datama-reactive-table-cell[id^="cell-selected"] .checkbox-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make the checkbox itself compact */
td.datama-reactive-table-cell[id^="cell-selected"] .reactive-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

/* Make interest score column wider but allow stretching */
.datama-reactive-table-cell[id^="header-interestScore"] {
    min-width: 220px !important; /* Minimum width */
    white-space: nowrap !important;
}

/* Style for interest score cells - prevent wrapping but allow stretching */
td.datama-reactive-table-cell[id^="cell-interestScore"] {
    min-width: 220px !important; /* Minimum width */
}

/* Prevent text wrapping in specific cells */
.datama-reactive-table-cell.nowrap-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !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.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __sections.css project project-deep-sky
 */

.datama-section {
    padding: 40px;
    width: 100%;
}
.datama-section-medium {
    padding: 40px 16.67%;
}
.datama-section > h3 {
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--text-structure);
}
.datama-section.bg-gradient {
    background: linear-gradient(to bottom, rgba(var(--datama-primary-light-rgb), .75) 0% , var(--color-white) 40%);
}
.datama-section.bg-gradient-reverse {
    background: linear-gradient(to top, rgba(var(--datama-primary-light-rgb), .75) 0% , var(--color-white) 40%);
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __start_end.css project project-deep-sky
 */

.datama-start-end .datama-input-label {
    font-weight: 400 !important;
}

/* Keep labels on the same row as controls (plotter panel forces block labels globally) */
.plotter-panel .datama-start-end .datama-input-container,
.datama-start-end .datama-input-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: center;
    width: 100%;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.plotter-panel .datama-start-end .datama-input-container .datama-input-label,
.datama-start-end .datama-input-container .datama-input-label {
    display: flex !important;
    width: auto !important;
    min-width: 80px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: left;
    flex: 0 0 auto;
}

.datama-start-end .datama-input-container .datama-input-select,
.datama-start-end .datama-input-container > .datama-input:not(.datama-input-date) {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.datama-start-end .datama-start-end-comparison-heading {
    min-height: 21px;
}
.datama-start-end .datama-input {
    background: transparent;
    border: none;
    font-weight: 600;
    border-bottom: var(--border-dark);
    border-radius: var(--border-square);
    width: fit-content !important;
    padding-bottom: 5px !important;
    min-width: unset !important;
}
.datama-start-end .datama-start-end-metrics .datama-input {
    width: auto !important;
}
/* Fix date input sizing and layout */
.datama-start-end .datama-input.datama-input-date {
    padding: 5px 8px;
    min-width: 140px !important; /* Increase to accommodate calendar icon */
    width: 160px !important; /* Set comfortable width for dates + icon */
    max-width: 180px !important; /* Allow for longer dates */
    flex: 1; /* Allow to grow in flex container */
}

.datama-start-end .datama-input.datama-input-date + .datama-input-date {
    padding: 5px 8px;
    margin-right: 0;
    margin-left: 12px; /* Increase spacing for better separation */
    min-width: 140px !important;
    width: 160px !important;
    max-width: 180px !important;
    flex: 1;
}

.datama-start-end .datama-input.datama-input-date + .datama-input-date::before {
    content: " - ";
    position: absolute;
    transform: translateX(-100%);
    margin-left: -16px; /* Adjust positioning to prevent overlap */
    margin-right: 0;
    width: auto;
    font-weight: normal;
    color: rgba(var(--color-dark-rgb), 0.6);
}

/* Create proper flex container for date inputs */
.datama-start-end .datama-start-end-container > div:has(.datama-input-date) {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0 !important; /* Remove margin-bottom from date input containers */
}

/* Remove margin-bottom specifically from date input lines in StartEnd component */
.datama-start-end .datama-start-end-container > .datama-start-end-container.mb-2 {
    margin-bottom: 0 !important;
}
/* Fix main container layout - remove RTL direction chaos */
.datama-start-end .datama-start-end-content > .datama-start-end-container {
    display: flex;
    flex-direction: column;
    /* Remove gap to tighten spacing between lines */
    /* Remove problematic RTL direction */
    direction: ltr;
    padding: 12px;
    margin-right: 8px; /* Reduce excessive right margin */
}

.datama-start-end .datama-start-end-content > * {
    border: 1px solid transparent !important;
    border-radius: var(--border-radius) !important;
    transition: .1s ease-out;
}

.datama-start-end .datama-start-end-content > *:hover {
    border: var(--border) !important;
    transition: .2s ease-in;
}

/* Fix individual elements layout */
.datama-start-end .datama-start-end-content > .datama-start-end-container > *:not(button) {
    width: 100%;
    direction: ltr; /* Ensure consistent text direction */
}

/* Fix VS label positioning */
.datama-start-end .datama-start-end-content > .datama-start-end-container > label {
    width: fit-content;
    /* Remove float: right to prevent layout issues */
    align-self: center;
    text-align: center;
    margin: 0; /* Remove all margins */
}

/* Fix button positioning */
.datama-start-end .datama-start-end-content> .datama-start-end-container button {
    /* Remove float: right */
    align-self: flex-end;
    margin: 0; /* Remove all margins */
}

/* Remove margins from arrow button specifically in VS container */
.datama-start-end .datama-start-end-content > .datama-start-end-container > div[id*="-vs-container"] button:not(.ml-0) {
    margin: 0 !important; /* Remove all margins including inherited ones */
}

/* Fix VS container layout - VS on left, arrow button on right */
.datama-start-end .datama-start-end-content > .datama-start-end-container > div[id*="-vs-container"] {
    display: flex;
    align-items: center;
    justify-content: space-between; /* VS on left, button on right */
    flex-direction: row !important; /* Ensure horizontal layout */
    width: 100%; /* Ensure full width for proper space-between */
    /* Remove order property to keep natural position between end and start inputs */
}

/* Improve responsive layout for the entire content */
.datama-start-end .datama-start-end-content {
    gap: 12px; /* Add gap between comparison containers */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: flex-start !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.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __steps.css project project-deep-sky
 */

.datama-license-manager .datama-steps {
    display: flex;
    flex-direction: column;
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets {
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-bottom: 2rem;
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullet {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    line-height: 32px;
    background: rgb(var(--datama-primary-rgb), 1);
    color: rgb(var(--color-light-rgb));
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullets-link {
    position: relative;
    flex: 1;
    margin: 0 20px;
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullets-link:not(.datama-steps-bullets-link-half)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 1px;
    background: rgba(var(--color-dark-rgb), .1);
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullets-link.datama-steps-bullets-link-half {
    flex: .5;
}
.datama-license-manager .datama-steps > .datama-steps-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.datama-license-manager .datama-steps > .datama-steps-content > .datama-step {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.datama-license-manager .datama-steps > .datama-steps-content > .datama-step > .datama-step-header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 1rem;
}
.datama-license-manager .datama-steps > .datama-steps-content > .datama-step > .datama-step-content {
    font-size: 12px;
    line-height: 20px;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2024 DATAMA SAS, All rights reserved.
 * Generated for file : __table.css project project-deep-sky
 */

.datama-table-container {
    margin: 0 auto 1rem auto;
    width: 100%;
}
.datama-table-container + .datama-table-container {
    margin-top: -1rem;
}
.datama-table-container > .datama-table {
    min-width: 100%;
}
.datama-table-container > .datama-table.datama-table-full {
    width: 100%;
}
.datama-table {
    border-collapse: collapse;
    table-layout:fixed;
}
.datama-table > .datama-table-thead > .datama-table-row > .datama-table-th {
    border-bottom: 1px solid var(--table-border-color);
    color: var(--text-structure);
    font-weight: 600;
    font-size: 0.8125rem;
}
.datama-table > .datama-table-tfoot > .datama-table-row > .datama-table-th {
    border-top: 1px solid var(--table-border-color);
    padding: 0 20px;
}
.datama-table .datama-input {
    width: 100% !important;

}
.datama-table > .datama-table-tbody > .datama-table-row:nth-child(2n) {
    background: var(--table-stripe-bg);
    transition: var(--transition-out);
}
.datama-table > .datama-table-tbody > .datama-table-row:hover {
    background: var(--table-hover-bg);
    transition: var(--transition-in);
}
.datama-table > .datama-table-tbody > .datama-table-row .datama-table-td,
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th {
    vertical-align: middle;
    text-align: left;
    border-collapse: collapse;
    padding: 5px 20px;
}

.datama-table > .datama-table-tbody > .datama-table-row > .datama-table-td {
    color: var(--text-body);
    font-size: 0.8125rem;
}

.datama-table .datama-icon,
.datama-table .datama-icon path {
    fill: var(--icon-action-color);
    color: var(--icon-action-color);
}

.datama-table .datama-icon:hover,
.datama-table .datama-icon:hover path {
    fill: var(--icon-action-color);
    color: var(--icon-action-color);
}
.datama-table > .datama-table-tbody > .datama-table-row .datama-table-td.text-center .datama-icon,
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th.text-center .datama-icon {
    margin: 0 auto;
}

.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub {
    line-height: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    font-size: .7rem;
    font-weight: 500;
}
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub > div {
    line-height: initial !important;
    min-height: initial !important;
    height: initial !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 5px 0;
}
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub > div > span {
    line-height: 10px !important;
    min-height: 10px !important;
    height: 10px !important;
    font-size: 10px;
}
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub > div > span.datama-icon {
    font-size: 14px !important;
}

.datama-table > .datama-table-tbody > .datama-table-row > .datama-table-td *:not(.datama-input-select-dropdown):not(.datama-divider):not(svg):not(.datama-input-switch),
.datama-table > .datama-table-tfoot > .datama-table-row > .datama-table-th *:not(.datama-input-select-dropdown):not(.datama-divider):not(svg):not(.datama-input-switch),
.datama-table > .datama-table-thead > .datama-table-row > .datama-table-th *:not(.datama-input-select-dropdown):not(.datama-divider):not(svg):not(.datama-input-switch) {
    min-height: 26px;
    line-height: 26px;
    height: 26px;
}

.datama-table .datama-table-row.small * {
    line-height: 1rem !important;
    height: unset !important;
    font-size: 0.75rem;
    min-height: 1rem !important;
}
/* RESPONSIVE */
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .datama-table .datama-input:not(.datama-input-switch) {
        min-width: 75px !important;
    }
    .datama-table > .datama-table-tbody > .datama-table-row .datama-table-td,
    .datama-table > .datama-table-thead > .datama-table-row .datama-table-th {
        padding: 5px 10px;
    }
    .datama-table .datama-button {
        padding: 0 10px !important;
    }
}
@media screen and (max-width: 1199px) {
    .datama-table .datama-table-sub .datama-table-div-text {
        display: none !important;
    }
}
@media screen and (min-width: 1200px) {
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __tabs.css project project-deep-sky
 */

.datama-tabs-container {
    display: grid;
    overflow: auto;
}
.datama-tabs-container.horizontal {
    /*justify-content: flex-start;*/
    /*flex-wrap: nowrap;*/
    grid-template-areas: "menu contents";
    grid-template-columns: fit-content(300px) 1fr;
    grid-template-rows: 1fr;
}
.datama-tabs-container.vertical {
    grid-template-areas: "menu" "contents";
    grid-template-rows: fit-content(60px) 1fr;
    grid-template-columns: 1fr;
    /*flex-direction: column;*/
    /*justify-content: flex-start;*/
}
.datama-tabs-container > .datama-tabs {
    margin: 0;
    padding: 5px 0 0 0;
    list-style: none;
    text-align: left;
    border-right: var(--border);
}
.datama-tabs-container.vertical > .datama-tabs {
    display: flex;
    justify-content: right;
}
.datama-tabs-container.vertical.center > .datama-tabs {
    justify-content: center;
}
.datama-tabs-container.vertical.right > .datama-tabs {
    justify-content: flex-end;
}
.datama-tabs-container.vertical.left > .datama-tabs {
    justify-content: flex-start;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item {
    padding: 5px 10px;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
    display: grid;
    grid-template-areas: "icon text documentation";
    grid-template-columns: 30px 0 0;
    grid-template-rows: 1fr;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
    text-align: center;
    grid-area: icon;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon > span.datama-icon{
    display: inline-block;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation {
    text-align: left;
    grid-area: documentation;
    opacity: 0;
    transition: .2s ease-out;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item:hover > .datama-button > .datama-documentation {
    transition: .1s ease-in;
    opacity: 1;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
    text-align: left;
    grid-area: text;
    width: 100%;
    padding: 0 5px;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button {
    background: transparent;
    border: none;
    font-size: 16px;
    line-height: 1rem;
    font-weight: 500;
    padding: 0;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active {
    background: var(--state-active-bg);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--state-active-border);
}

.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active > span,
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active path {
    color: var(--state-active-text);
    fill: var(--state-active-text);
}
.datama-tabs-container > .datama-tabs-content {
    max-height: 100%;
    overflow-y: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab {
    position: relative;
    height: 100%;
    padding: 5px 20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer > .datama-tab-content {
    height: calc(100% - 82px - 1rem);
    overflow: auto;
    margin-right: -20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-header > .datama-tab-content {
    height: calc(100% - 70px - 1rem);
    overflow: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer.datama-tab-has-header > .datama-tab-content {
    height: calc(100% - 128px - 1rem);
    overflow: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 1rem;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header > .datama-tab-icon {
    margin-left: 0;
    margin-right: 0;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header > .datama-tab-title {
    margin-left: 0;
    margin-right: auto;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--text-structure);
}
.datama-tab-subtitle {
    color: var(--text-meta);
    font-size: 0.75rem; 
    margin-bottom: 0;
    margin-top: 0.25rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.waterfall-font-category {
    color: var(--color-primary);
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0.5rem 0 1rem 0;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;

}

.waterfall-font-category::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 80%;
    transform: translateX(-50%);
    width: 150px;
    height: 1px;
    background-color: var(--color-primary);
    opacity: 0.6;

}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button {
    border: 0;
    font-size: 20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button,
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button path {
    color: var(--color-primary);
    fill: var(--color-primary);
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    background: var(--color-white);
    border-top: var(--border);
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-footer button {
    font-size: 16px;
}
.datama-tabs-item .datama-documentation {
    padding: 2px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: 0.2s ease-out;
    background: transparent;
    border: none;
}
.datama-tabs-item .datama-documentation path {
    fill: var(--help-color);
}
.datama-tabs-item .datama-documentation:hover path {
    fill: var(--help-color-hover);
    transition: 0.1s ease-in;
}
.datama-tabs-item .datama-documentation:active path {
    fill: var(--help-color-active);
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
    margin: 0;
}
/* RESPONSIVE */
@media screen and (max-width: 767px) {
    .datama-tabs-container > .datama-tabs {
        width: 40px;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
        grid-area: icon;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
        display: none;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 0 10px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .datama-tabs-container > .datama-tabs {
        width: 40px;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item {
        padding: .5rem 0 ;
        display: flex;
        justify-content: center;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
        display: flex;
        justify-content: center;
        grid-template-areas: none;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
        display: none;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 0 10px;
    }
}
@media screen and (min-width: 1200px) {
    .datama-tabs-container > .datama-tabs > .datama-tabs-item .datama-button {
        grid-template-columns: 30px 1fr 20px;
        width: 100%;
        text-align: left;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 5px 20px;
    }
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __context_menu.css project project-deep-sky
 */

/*
 * DataMaContextMenu stylesheet (Linear / Shadcn inspired).
 *
 * Root node classes driven by `DataMaContextMenu`:
 * - `.show`                  : menu is visible
 * - `.expand-right`          : sub menus grow to the right (caret on the right side)
 * - `.expand-left`           : sub menus grow to the left (caret on the left side)
 * - `.expand-down`           : menu appears under the mouse, sub menus align top
 * - `.expand-up`             : menu appears above the mouse, sub menus align bottom
 *
 * Item slots (each one optional, in DOM order):
 * - `.datama-context-menu-slot-icon`          : item icon
 * - `.datama-context-menu-element-container`  : item text
 * - `.datama-context-menu-slot-numeric-input` : compact number input on a leaf item
 * - `.datama-context-menu-slot-color-swatch`  : right-aligned palette-style color chip (`colorSwatch`)
 * - `.datama-context-menu-slot-shortcut`      : keyboard shortcut keys (`kbd` children)
 * - `.datama-context-menu-slot-documentation` : "?" in a circle showing a documentation tip
 * - `.datama-context-menu-slot-checkbox`      : pin/checkbox input on a leaf item
 * - `.datama-context-menu-slot-switch`         : on/off switch on a leaf item
 * - `.datama-context-menu-slot-caret`         : caret for items holding sub items
 * - `.datama-context-menu-search`             : search slot (visible after the first typed key)
 * - `.selected` / `.active` on `.datama-context-menu-element` : current choice (button-group active look)
 */

div[data-app="true"] .datama-context-menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: white;
    width: max-content;
    min-width: 200px;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    font-size: 13px;
    line-height: 20px;
    z-index: 999;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
    color: var(--color-dark);
    cursor: default;
    transform: translateY(2px);
    /* Root stays overflow:visible so flyout sub-menus are not clipped.
       max-height + overflow-y live on `.datama-context-menu-scroll`. */
    overflow: visible;
}

div[data-app="true"] .datama-context-menu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

div[data-app="true"] .datama-context-menu:focus {
    outline: none;
}

/* ------------------------------------------------------------------ */
/* Scroll body + flyout hosts                                         */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap {
    display: block;
    position: static;
    width: 100%;
    padding: 0 !important;
    margin: 0;
    border: none;
    background: transparent !important;
    list-style: none;
    min-height: 0;
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap:hover,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover {
    background: transparent !important;
}

/*
 * Legacy `__waterfall.css` styles EVERY `li > ul` as an absolute submenu
 * (`left: 100%; display: none` until hover). The scroll body is `li > ul` by
 * necessity (root is a `ul`) — reset those rules so content is not shifted
 * into a blank "gutter" on the left.
 */
div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap > .datama-context-menu-scroll,
div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap:hover > .datama-context-menu-scroll {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-x: hidden;
    /* overflow-y / max-height set inline by viewport clamp */
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap {
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub {
    pointer-events: auto;
}

/*
 * Legacy `__waterfall.css` uses `li:hover > ul { display: inline-flex }`.
 * All flyouts are siblings under `li.flyouts-wrap`, so hovering any open
 * panel would otherwise reveal EVERY flyout at once. Visibility is owned
 * exclusively by the `.open` class (JS).
 */
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover > .datama-context-menu-sub {
    display: none !important;
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub.open,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover > .datama-context-menu-sub.open {
    display: inline-flex !important;
}

/* ------------------------------------------------------------------ */
/* Search slot                                                        */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-search {
    display: none;
    width: 100%;
    padding: 6px 8px 4px 8px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    pointer-events: auto;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search.visible {
    display: block;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search:hover {
    background: transparent !important;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search > input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-dark);
    padding: 0;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search > input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.45);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search-empty {
    pointer-events: none;
    color: rgba(var(--color-dark-rgb), 0.45);
    font-style: italic;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search-empty:hover {
    background: transparent !important;
}

div[data-app="true"] .datama-context-menu.datama-context-menu-searching .datama-context-menu-sub {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* Group dividers                                                     */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-divider {
    width: 100%;
    position: relative;
    padding: 5px 8px 2px 8px;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    pointer-events: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-divider:not(.datama-context-menu-divider-first) {
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-divider:hover {
    background: transparent !important;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-divider > span {
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-structure);
}

/* ------------------------------------------------------------------ */
/* Items and slots                                                    */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-element {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    margin: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease-out;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element:hover {
    background: rgba(var(--color-dark-rgb), 0.06);
}

/* Disabled leaf: dimmed, no hover background, click blocked in JS (#bindItemClick) —
   pointer-events stay enabled so the native `title` tooltip explains why. */
div[data-app="true"] .datama-context-menu .datama-context-menu-element.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.disabled:hover {
    background: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active {
    background-color: var(--state-active-bg);
    color: var(--state-active-text);
    box-shadow: inset 0 0 0 1px var(--state-active-border);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected::after,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active::after {
    content: none;
    display: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected:hover,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active:hover {
    background-color: rgba(var(--datama-primary-rgb), 0.15);
    box-shadow: inset 0 0 0 1px rgba(var(--datama-primary-rgb), 0.4);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon {
    color: var(--state-active-text);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon svg,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon svg {
    fill: var(--state-active-text);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-element-container,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-element-container {
    color: var(--state-active-text);
    font-weight: 500;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 20px;
    padding: 0 !important;
    color: var(--icon-action-color);
    transform: unset;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--icon-action-color);
}

/* Palette-style color chip — right-aligned input slot (like switch / numeric). */
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-color-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    overflow: visible;
    cursor: pointer;
    gap: 2px;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-color-swatch--multi {
    width: auto;
    min-width: 20px;
    cursor: default;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-color-swatch--multi .datama-context-menu-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-color-swatch__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    border: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-color-swatch {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
    flex: 0 0 auto;
    pointer-events: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element:hover .datama-context-menu-color-swatch,
div[data-app="true"] .datama-context-menu .datama-context-menu-element:focus-within .datama-context-menu-color-swatch {
    border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 1px 4px rgba(var(--color-dark-rgb), 0.12);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-color-swatch,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-color-swatch {
    border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.85);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 0 0 2px rgba(var(--datama-primary-rgb, 73, 158, 149), 0.35);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element-container {
    display: inline-block;
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 0;
    font-weight: 400;
    text-rendering: geometricprecision;
    color: inherit;
    text-decoration: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-shortcut {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    flex: 0 0 auto;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-shortcut > kbd {
    min-width: 16px;
    padding: 0 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(var(--color-dark-rgb), 0.04);
    font-family: inherit;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    color: rgba(var(--color-dark-rgb), 0.6);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-documentation {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--color-dark-rgb), 0.35);
    border-radius: 50%;
    font-size: 9px;
    line-height: 12px;
    font-weight: 600;
    color: rgba(var(--color-dark-rgb), 0.55);
    cursor: help;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-documentation:hover {
    border-color: var(--datama-primary);
    color: var(--datama-primary);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-caret {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 14px;
    color: var(--icon-action-color);
}

/* Items without shortcut still push the caret/documentation to the end */
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-caret:first-of-type,
div[data-app="true"] .datama-context-menu .datama-context-menu-element-container + .datama-context-menu-slot-caret,
div[data-app="true"] .datama-context-menu .datama-context-menu-element-container + .datama-context-menu-slot-documentation {
    margin-left: auto;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-checkbox {
    flex: 0 0 auto;
    margin-right: 8px;
    width: 14px;
    height: 14px;
    accent-color: var(--datama-primary, #0066cc);
    cursor: pointer;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-switch {
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    cursor: pointer;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element-has-switch:hover {
    background: rgba(var(--color-dark-rgb), 0.06);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-numeric-input {
    width: 44px;
    flex: 0 0 44px;
    margin-left: auto;
    padding: 0 4px;
    border: none;
    outline: none;
    border-radius: 6px;
    background: rgba(var(--color-dark-rgb), 0.06);
    font-family: inherit;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: inherit;
    -moz-appearance: textfield;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-numeric-input::-webkit-outer-spin-button,
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-numeric-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-numeric-input,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-numeric-input {
    background: rgba(var(--datama-primary-rgb), 0.12);
    color: var(--datama-primary);
}

/* ------------------------------------------------------------------ */
/* Sub menus (flyouts hosted outside the scroll body)                 */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-sub {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
    list-style: none;
    position: absolute;
    padding: 5px;
    left: 100%;
    top: -5px;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 160px;
    background-color: white;
    margin: 0;
    z-index: 1000;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-sub.open {
    display: inline-flex !important;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-sub.scrollable {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ------------------------------------------------------------------ */
/* Expansion direction (quadrant based)                               */
/* ------------------------------------------------------------------ */

/* Defaults used before JS positions flyouts; keep caret side flip. */
div[data-app="true"] .datama-context-menu.expand-right .datama-context-menu-sub {
    left: 100%;
    right: unset;
}

div[data-app="true"] .datama-context-menu.expand-left .datama-context-menu-sub {
    left: unset;
    right: 100%;
}

/* Caret moves to the expansion side */
div[data-app="true"] .datama-context-menu.expand-left .datama-context-menu-slot-caret {
    order: -1;
    margin-left: 0;
    transform: scaleX(-1);
}

div[data-app="true"] .datama-context-menu.expand-down .datama-context-menu-sub {
    top: -5px;
    bottom: unset;
}

div[data-app="true"] .datama-context-menu.expand-up .datama-context-menu-sub {
    top: unset;
    bottom: -5px;
}

/*
 * DATAMA 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 : __waterfall.css project project-deep-sky
 */


#datama-testing-text {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

div[data-app="true"] .no-click,
div[data-app="true"] .no-click * {
    pointer-events: none !important;
}
div[data-app="true"] .cursor-wait {
    cursor: wait !important;
}
div[data-app="true"] .no-data {
    cursor: not-allowed !important;
}
div[data-app="true"] .datama-waterfall-context-menu, div[data-app="true"] .datama-context-menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: white;
    width: max-content;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    font-size: 14px;
    line-height: 30px;
    z-index: 999;
}
div[data-app="true"] .datama-waterfall-context-menu.show, div[data-app="true"] .datama-context-menu.show {
    visibility: visible;
    opacity: 1;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider, div[data-app="true"] .datama-context-menu .datama-context-menu-divider {
    width: 100%;
    position: relative;
    padding: 5px 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider:hover, div[data-app="true"] .datama-context-menu .datama-context-menu-divider:hover {
    background: transparent !important;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider > span, div[data-app="true"] .datama-context-menu .datama-context-menu-divider > span {
    font-size: 10px;
    line-height: 10px;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider + .datama-context-menu-divider, div[data-app="true"] .datama-context-menu .datama-context-menu-divider + .datama-context-menu-divider {
    display: none;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-icon, div[data-app="true"] .datama-context-menu .datama-context-menu-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    transform: translateY(-50%);
}
div[data-app="true"] .datama-waterfall-context-menu li, div[data-app="true"] .datama-context-menu li {
    display: block;
    position: relative;
    width: 100%;
    transition: 0.2s ease-out;
}
div[data-app="true"] .datama-waterfall-context-menu li.figured li,
div[data-app="true"] .datama-context-menu li.figured li,
div[data-app="true"] .datama-context-menu li.has-interest-figure {
    padding-right: 150px;
}
div[data-app="true"] .datama-waterfall-context-menu li.figured li.disabled *, div[data-app="true"] .datama-context-menu li.figured li.disabled * {
    pointer-events: none !important;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul, div[data-app="true"] .datama-context-menu li > ul {
    border: 1px solid rgba(0, 0, 0, 0.1);
    list-style: none;
    position: absolute;
    padding: 0;
    left: 100%;
    top: 0;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: max-content;
    background-color: white;
    margin: 0;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul.scrollable, div[data-app="true"] .datama-context-menu li > ul.scrollable {
    max-height: 300px;
    overflow-y: auto;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:not(:hover) .selected .bar, div[data-app="true"] .datama-context-menu li > ul:not(:hover) .selected .bar {
    margin-top: 5px;
    transition: var(--transition-in);
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:not(:hover) .selected .datama-label, div[data-app="true"] .datama-context-menu li > ul:not(:hover) .selected .datama-label {
    opacity: 1;
    transition: var(--transition-in);
    bottom: 5px;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:hover > li:hover .figure .bar, div[data-app="true"] .datama-context-menu li > ul:hover > li:hover .figure .bar {
    margin-top: 5px;
    transition: var(--transition-in);
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:hover > li:hover .figure .datama-label, div[data-app="true"] .datama-context-menu li > ul:hover > li:hover .figure .datama-label {
    opacity: 1;
    transition: var(--transition-in);
    bottom: 5px;
}
div[data-app="true"] .datama-waterfall-context-menu li > a, div[data-app="true"] .datama-context-menu li > a {
    display: inline;
    white-space: nowrap;
    padding: 0 20px 0 30px;
    color: black;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-rendering: geometricprecision;
}
div[data-app="true"] .datama-waterfall-context-menu li > a.icon, div[data-app="true"] .datama-context-menu li > a.icon {
    position: relative;
}
div[data-app="true"] .datama-waterfall-context-menu li > a.sub::after, div[data-app="true"] .datama-context-menu li > a.sub::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    border-left: 3px solid rgba(0, 0, 0, 0.5);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}
div[data-app="true"] .datama-waterfall-context-menu li:hover, div[data-app="true"] .datama-context-menu li:hover {
    background: rgba(0, 0, 0, 0.05);
    transition: var(--transition-in);
}
div[data-app="true"] .datama-waterfall-context-menu li:hover > ul, div[data-app="true"] .datama-context-menu li:hover > ul {
    display: inline-flex;
}
div[data-app="true"] .datama-waterfall-context-menu li.selected::after, div[data-app="true"] .datama-context-menu li.selected::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    bottom: 3px;
    width: 5px;
    background: rgba(0, 0, 0, 0.1);
}
div[data-app="true"] .datama-waterfall-context-menu.to-right li > ul, div[data-app="true"] .datama-context-menu.to-right li > ul {
    left: 100%;
    right: unset;
}
div[data-app="true"] .datama-waterfall-context-menu.to-left li > ul, div[data-app="true"] .datama-context-menu.to-left li > ul {
    left: unset;
    right: 100%;
}
div[data-app="true"] .datama-waterfall-context-menu.to-top li > ul, div[data-app="true"] .datama-context-menu.to-top li > ul {
    top: unset;
    bottom: 0;
}
div[data-app="true"] .datama-waterfall-context-menu.to-bottom li > ul, div[data-app="true"] .datama-context-menu.to-bottom li > ul {
    top: 0;
    bottom: unset;
}
div[data-app="true"] .datama-waterfall-context-menu.datama-context-menu-show, div[data-app="true"] .datama-context-menu.datama-context-menu-show {
    visibility: visible;
    opacity: 1;
    transition: transform var(--transition-in), opacity 0.15s ease-in;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateX(0) !important;
    display: block;
}
div[data-app="true"] .datama-waterfall-context-menu .figure, div[data-app="true"] .datama-context-menu .figure {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 135px;
    top: 0;
    bottom: 0;
    right: 5px;
    pointer-events: none;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .bar, div[data-app="true"] .datama-context-menu .figure > .bar {
    height: 10px;
    display: block;
    border-radius: 15px;
    margin-top: 10px;
    transition: var(--transition-out);
    order: 1;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .datama-label, div[data-app="true"] .datama-context-menu .figure > .datama-label {
    width: 100%;
    opacity: 0;
    height: 15px;
    font-size: 10px;
    font-weight: 300;
    line-height: 15px;
    transition: var(--transition-out);
    order: 2;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .datama-label > .datama-label-text, div[data-app="true"] .datama-context-menu .figure > .datama-label > .datama-label-text {
    max-width: 70px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .datama-label > .value, div[data-app="true"] .datama-context-menu .figure > .datama-label > .value {
    position: absolute;
    right: 0;
    font-weight: 600;
    max-width: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
div[data-app="true"] .datama-waterfall-context-menu .steps .figure .bar, div[data-app="true"] .datama-context-menu .steps .figure .bar {
    background: rgba(var(--color-secondary-rgb));
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions .figure .bar, div[data-app="true"] .datama-context-menu .dimensions .figure .bar {
    background: rgba(var(--datama-primary-rgb));
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input, div[data-app="true"] .datama-context-menu .datama-context-menu-input {
    display: flex !important;
    flex-wrap: nowrap;
    padding-right: 60px;
    padding-left: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > span, div[data-app="true"] .datama-context-menu .datama-context-menu-input > span {
    line-height: 30px;
    white-space: nowrap;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > input, div[data-app="true"] .datama-context-menu .datama-context-menu-input > input {
    position: absolute;
    right: 5px;
    width: 30px;
    height: 20px;
    margin: 5px 0 0;
    line-height: 30px;
    padding: 0 5px;
    text-align: center;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    min-height: unset;
    font-size: 12px;
    -moz-appearance: textfield;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > input::-webkit-inner-spin-button, div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > input::-webkit-outer-spin-button, div[data-app="true"] .datama-context-menu .datama-context-menu-input > input::-webkit-inner-spin-button, div[data-app="true"] .datama-context-menu .datama-context-menu-input > input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu .dimensions, div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu .steps, div[data-app="true"] .datama-context-menu .datama-context-menu .dimensions, div[data-app="true"] .datama-context-menu .datama-context-menu .steps {
    padding: 0 !important;
    padding-right: 150px !important;
    margin: 0 !important;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a, div[data-app="true"] .datama-waterfall-context-menu .steps > a, div[data-app="true"] .datama-context-menu .dimensions > a, div[data-app="true"] .datama-context-menu .steps > a {
    display: flex !important;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a > .figure-label, div[data-app="true"] .datama-waterfall-context-menu .steps > a > .figure-label, div[data-app="true"] .datama-context-menu .dimensions > a > .figure-label, div[data-app="true"] .datama-context-menu .steps > a > .figure-label {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a > .figure-label > .text, div[data-app="true"] .datama-waterfall-context-menu .steps > a > .figure-label > .text, div[data-app="true"] .datama-context-menu .dimensions > a > .figure-label > .text, div[data-app="true"] .datama-context-menu .steps > a > .figure-label > .text {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a > .figure-label > .detailed, div[data-app="true"] .datama-waterfall-context-menu .steps > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .dimensions > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .steps > a > .figure-label > .detailed {
    width: 100%;
    height: 10px;
    line-height: 10px;
    font-size: 10px;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: var(--transition-out);
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions.selected > a > .figure-label > .detailed, div[data-app="true"] .datama-waterfall-context-menu .steps.selected > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .dimensions.selected > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .steps.selected > a > .figure-label > .detailed {
    opacity: 1;
    transition: 0.2s ease-int;
}
div[data-app="true"] .datama-waterfall-context-menu ul:hover li:not(:hover) .figure-label .detailed, div[data-app="true"] .datama-context-menu ul:hover li:not(:hover) .figure-label .detailed {
    opacity: 0 !important;
    transition: var(--transition-out);
}
div[data-app="true"] .datama-waterfall-context-menu ul:hover li:hover .figure-label .detailed, div[data-app="true"] .datama-context-menu ul:hover li:hover .figure-label .detailed {
    opacity: 1 !important;
    transition: 0.2s ease-int;
}
div[data-app="true"] .datama-hover {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    z-index: 999;
    pointer-events: none;
    max-width: 400px;
}
div[data-app="true"] .datama-hover > p {
    font-family: "Karla", "Arial";
    margin: 0;
    padding: 0;
}
div[data-app="true"] .datama-hover > header {
    font-size: 12px;
    line-height: 18px;
    display: flex;
    flex-wrap: wrap;
}
div[data-app="true"] .datama-hover > header > div {
    display: flex;
    flex-wrap: wrap;
    width: 25%;
}
div[data-app="true"] .datama-hover > header > div > * {
    width: 100%;
}
div[data-app="true"] .datama-hover > main {
    padding: 0;
}
div[data-app="true"] .datama-hover > main, div[data-app="true"] .datama-hover > main * {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    font-family: "Karla", sans-serif;
    text-align: justify;
}
div[data-app="true"] .datama-hover > main strong, div[data-app="true"] .datama-hover > main b {
    font-weight: 600;
}
div[data-app="true"] .datama-hover.datama-hover-show {
    visibility: visible;
    opacity: 1;
    transition: transform var(--transition-in), opacity 0.15s ease-in;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateX(0) !important;
}
div[data-app="true"] .datama-hover.datama-hover-left.datama-hover-top {
    box-shadow: -10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(-10px);
}
div[data-app="true"] .datama-hover.datama-hover-left.datama-hover-bottom {
    box-shadow: -10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(-10px);
}
div[data-app="true"] .datama-hover.datama-hover-right.datama-hover-top {
    box-shadow: 10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(10px);
}
div[data-app="true"] .datama-hover.datama-hover-right.datama-hover-bottom {
    box-shadow: 10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(10px);
}
div[data-app="true"] .datama-waterfall-bar {
    transition: var(--transition-out);
}
div[data-app="true"] .datama-waterfall-bar:hover, div[data-app="true"] .datama-waterfall-bar.hover {
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
    stroke-width: 1.5px;
    stroke-opacity: 1;
    transition: 0.2s ease-in;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    /*fill-opacity: 0.75;*/
}
div[data-app="true"] .datama-waterfall-bar[data-depth="0"]:not(div[data-app="true"] .datama-waterfall-bar[data-expanded=true]), div[data-app="true"] .datama-waterfall-bar[data-depth="1"]:not(div[data-app="true"] .datama-waterfall-bar[data-expanded=true]) {
    cursor: zoom-in;
}
div[data-app="true"] .datama-waterfall-bar.has-children, div[data-app="true"] .datama-waterfall-bar[data-type=net], div[data-app="true"] .datama-waterfall-bar[data-depth="2"] {
    cursor: zoom-out;
}
div[data-app="true"] .datama-waterfall-bar[data-type=net] {
    cursor: zoom-out !important;
}
div[data-app="true"] .datama-waterfall-annotations {
    transition: 0.2s ease-in;
}

.datama-waterfall-with-shortcut {
    box-sizing: content-box;
    padding-top: 40px;
}
div[data-app="true"] .datama-shortcut {
    height: 40px;
    margin: -40px 0 0;
    padding: 0 20px;
    line-height: 40px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    list-style: none;
}
div[data-app="true"] .datama-shortcut .datama-shortcut-item {
    background: transparent;
    border: none;
    font-size: 16px;
    display: flex;
    justify-content: center;
    justify-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
}
div[data-app="true"] .datama-shortcut .datama-shortcut-item.active,
div[data-app="true"] .datama-shortcut .datama-shortcut-item.active * {
    color: var(--state-active-text);
    fill: var(--state-active-text);
}

div[data-app="true"] .datama-shortcut .datama-shortcut-item.active {
    background: var(--state-active-bg);
    box-shadow: inset 0 0 0 1px var(--state-active-border);
    border-radius: 6px;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __context_menu.css project project-deep-sky
 */

/*
 * DataMaContextMenu stylesheet (Linear / Shadcn inspired).
 *
 * Root node classes driven by `DataMaContextMenu`:
 * - `.show`                  : menu is visible
 * - `.expand-right`          : sub menus grow to the right (caret on the right side)
 * - `.expand-left`           : sub menus grow to the left (caret on the left side)
 * - `.expand-down`           : menu appears under the mouse, sub menus align top
 * - `.expand-up`             : menu appears above the mouse, sub menus align bottom
 *
 * Item slots (each one optional, in DOM order):
 * - `.datama-context-menu-slot-icon`          : item icon
 * - `.datama-context-menu-element-container`  : item text
 * - `.datama-context-menu-slot-numeric-input` : compact number input on a leaf item
 * - `.datama-context-menu-slot-color-swatch`  : right-aligned palette-style color chip (`colorSwatch`)
 * - `.datama-context-menu-slot-shortcut`      : keyboard shortcut keys (`kbd` children)
 * - `.datama-context-menu-slot-documentation` : "?" in a circle showing a documentation tip
 * - `.datama-context-menu-slot-checkbox`      : pin/checkbox input on a leaf item
 * - `.datama-context-menu-slot-switch`         : on/off switch on a leaf item
 * - `.datama-context-menu-slot-caret`         : caret for items holding sub items
 * - `.datama-context-menu-search`             : search slot (visible after the first typed key)
 * - `.selected` / `.active` on `.datama-context-menu-element` : current choice (button-group active look)
 */

div[data-app="true"] .datama-context-menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: white;
    width: max-content;
    min-width: 200px;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    font-size: 13px;
    line-height: 20px;
    z-index: 999;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
    color: var(--color-dark);
    cursor: default;
    transform: translateY(2px);
    /* Root stays overflow:visible so flyout sub-menus are not clipped.
       max-height + overflow-y live on `.datama-context-menu-scroll`. */
    overflow: visible;
}

div[data-app="true"] .datama-context-menu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

div[data-app="true"] .datama-context-menu:focus {
    outline: none;
}

/* ------------------------------------------------------------------ */
/* Scroll body + flyout hosts                                         */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap {
    display: block;
    position: static;
    width: 100%;
    padding: 0 !important;
    margin: 0;
    border: none;
    background: transparent !important;
    list-style: none;
    min-height: 0;
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap:hover,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover {
    background: transparent !important;
}

/*
 * Legacy `__waterfall.css` styles EVERY `li > ul` as an absolute submenu
 * (`left: 100%; display: none` until hover). The scroll body is `li > ul` by
 * necessity (root is a `ul`) — reset those rules so content is not shifted
 * into a blank "gutter" on the left.
 */
div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap > .datama-context-menu-scroll,
div[data-app="true"] .datama-context-menu > .datama-context-menu-scroll-wrap:hover > .datama-context-menu-scroll {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-x: hidden;
    /* overflow-y / max-height set inline by viewport clamp */
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap {
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub {
    pointer-events: auto;
}

/*
 * Legacy `__waterfall.css` uses `li:hover > ul { display: inline-flex }`.
 * All flyouts are siblings under `li.flyouts-wrap`, so hovering any open
 * panel would otherwise reveal EVERY flyout at once. Visibility is owned
 * exclusively by the `.open` class (JS).
 */
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover > .datama-context-menu-sub {
    display: none !important;
}

div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub.open,
div[data-app="true"] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover > .datama-context-menu-sub.open {
    display: inline-flex !important;
}

/* ------------------------------------------------------------------ */
/* Search slot                                                        */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-search {
    display: none;
    width: 100%;
    padding: 6px 8px 4px 8px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    pointer-events: auto;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search.visible {
    display: block;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search:hover {
    background: transparent !important;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search > input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    color: var(--color-dark);
    padding: 0;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search > input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.45);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search-empty {
    pointer-events: none;
    color: rgba(var(--color-dark-rgb), 0.45);
    font-style: italic;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-search-empty:hover {
    background: transparent !important;
}

div[data-app="true"] .datama-context-menu.datama-context-menu-searching .datama-context-menu-sub {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* Group dividers                                                     */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-divider {
    width: 100%;
    position: relative;
    padding: 5px 8px 2px 8px;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    pointer-events: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-divider:not(.datama-context-menu-divider-first) {
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-divider:hover {
    background: transparent !important;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-divider > span {
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-structure);
}

/* ------------------------------------------------------------------ */
/* Items and slots                                                    */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-element {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: 100%;
    min-height: 30px;
    padding: 5px 8px;
    margin: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease-out;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element:hover {
    background: rgba(var(--color-dark-rgb), 0.06);
}

/* Disabled leaf: dimmed, no hover background, click blocked in JS (#bindItemClick) —
   pointer-events stay enabled so the native `title` tooltip explains why. */
div[data-app="true"] .datama-context-menu .datama-context-menu-element.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.disabled:hover {
    background: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active {
    background-color: var(--state-active-bg);
    color: var(--state-active-text);
    box-shadow: inset 0 0 0 1px var(--state-active-border);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected::after,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active::after {
    content: none;
    display: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected:hover,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active:hover {
    background-color: rgba(var(--datama-primary-rgb), 0.15);
    box-shadow: inset 0 0 0 1px rgba(var(--datama-primary-rgb), 0.4);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon {
    color: var(--state-active-text);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon svg,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon svg {
    fill: var(--state-active-text);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-element-container,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-element-container {
    color: var(--state-active-text);
    font-weight: 500;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 20px;
    padding: 0 !important;
    color: var(--icon-action-color);
    transform: unset;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--icon-action-color);
}

/* Palette-style color chip — right-aligned input slot (like switch / numeric). */
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-color-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    overflow: visible;
    cursor: pointer;
    gap: 2px;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-color-swatch--multi {
    width: auto;
    min-width: 20px;
    cursor: default;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-color-swatch--multi .datama-context-menu-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-color-swatch__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    border: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-color-swatch {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
    flex: 0 0 auto;
    pointer-events: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element:hover .datama-context-menu-color-swatch,
div[data-app="true"] .datama-context-menu .datama-context-menu-element:focus-within .datama-context-menu-color-swatch {
    border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 1px 4px rgba(var(--color-dark-rgb), 0.12);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-color-swatch,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-color-swatch {
    border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.85);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 0 0 2px rgba(var(--datama-primary-rgb, 73, 158, 149), 0.35);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element-container {
    display: inline-block;
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 0;
    font-weight: 400;
    text-rendering: geometricprecision;
    color: inherit;
    text-decoration: none;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-shortcut {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    flex: 0 0 auto;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-shortcut > kbd {
    min-width: 16px;
    padding: 0 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(var(--color-dark-rgb), 0.04);
    font-family: inherit;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    color: rgba(var(--color-dark-rgb), 0.6);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-documentation {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--color-dark-rgb), 0.35);
    border-radius: 50%;
    font-size: 9px;
    line-height: 12px;
    font-weight: 600;
    color: rgba(var(--color-dark-rgb), 0.55);
    cursor: help;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-documentation:hover {
    border-color: var(--datama-primary);
    color: var(--datama-primary);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-caret {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 14px;
    color: var(--icon-action-color);
}

/* Items without shortcut still push the caret/documentation to the end */
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-caret:first-of-type,
div[data-app="true"] .datama-context-menu .datama-context-menu-element-container + .datama-context-menu-slot-caret,
div[data-app="true"] .datama-context-menu .datama-context-menu-element-container + .datama-context-menu-slot-documentation {
    margin-left: auto;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-checkbox {
    flex: 0 0 auto;
    margin-right: 8px;
    width: 14px;
    height: 14px;
    accent-color: var(--datama-primary, #0066cc);
    cursor: pointer;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-switch {
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    cursor: pointer;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element-has-switch:hover {
    background: rgba(var(--color-dark-rgb), 0.06);
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-numeric-input {
    width: 44px;
    flex: 0 0 44px;
    margin-left: auto;
    padding: 0 4px;
    border: none;
    outline: none;
    border-radius: 6px;
    background: rgba(var(--color-dark-rgb), 0.06);
    font-family: inherit;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: inherit;
    -moz-appearance: textfield;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-slot-numeric-input::-webkit-outer-spin-button,
div[data-app="true"] .datama-context-menu .datama-context-menu-slot-numeric-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-numeric-input,
div[data-app="true"] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-numeric-input {
    background: rgba(var(--datama-primary-rgb), 0.12);
    color: var(--datama-primary);
}

/* ------------------------------------------------------------------ */
/* Sub menus (flyouts hosted outside the scroll body)                 */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu .datama-context-menu-sub {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
    list-style: none;
    position: absolute;
    padding: 5px;
    left: 100%;
    top: -5px;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 160px;
    background-color: white;
    margin: 0;
    z-index: 1000;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-sub.open {
    display: inline-flex !important;
}

div[data-app="true"] .datama-context-menu .datama-context-menu-sub.scrollable {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ------------------------------------------------------------------ */
/* Expansion direction (quadrant based)                               */
/* ------------------------------------------------------------------ */

/* Defaults used before JS positions flyouts; keep caret side flip. */
div[data-app="true"] .datama-context-menu.expand-right .datama-context-menu-sub {
    left: 100%;
    right: unset;
}

div[data-app="true"] .datama-context-menu.expand-left .datama-context-menu-sub {
    left: unset;
    right: 100%;
}

/* Caret moves to the expansion side */
div[data-app="true"] .datama-context-menu.expand-left .datama-context-menu-slot-caret {
    order: -1;
    margin-left: 0;
    transform: scaleX(-1);
}

div[data-app="true"] .datama-context-menu.expand-down .datama-context-menu-sub {
    top: -5px;
    bottom: unset;
}

div[data-app="true"] .datama-context-menu.expand-up .datama-context-menu-sub {
    top: unset;
    bottom: -5px;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : footer.css project project-deep-sky
 */
.datama-official-footer-link {
    text-decoration: unset;
}
div[data-app="true"] .datama-light-footer {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 0 10px !important;
    flex: 0 0 30px;
    min-height: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-x: hidden;
    overflow-y: hidden;
}
div[data-app="true"] .datama-light-footer:empty {
    display: none;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    height: 30px;
    line-height: 30px;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
    align-self: center;
    margin-right: auto;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
    white-space: nowrap;
    align-self: center;
    text-decoration: none;
}
@media screen and (max-width: 400px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 5px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .65rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: .70rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
@media screen  and (min-width: 401px) and (max-width: 600px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 5px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .65rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: .70rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 800px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 10px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .75rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: 1rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : header.css project project-deep-sky
 */

/*
 * Factory BI chrome only. Host-replaced headers add class `custom`
 * (`DATAMA_LIGHT_HEADER_CUSTOM_CLASS` in DataMaHeader.js). Those rules must
 * not run a second time after Light CSS loads, or they squash host layout
 * (40px bar, 20px buttons) on top of the Vue / host chrome.
 */
.datama-light-header:not(.custom) {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    border-bottom: var(--border);
}
.datama-light-header:not(.custom) .datama-header-license-key {
    display: flex;
    align-items: stretch;
    height: 100%;
}
.datama-light-header:not(.custom) .datama-header-logo {
    cursor: pointer;
    font-size: 20px;
    line-height: 20px;
    position: relative;
    /*border-right: var(--border);*/
}
.datama-light-header:not(.custom) .datama-header-logo + button {
    border-left: unset !important;
}

.datama-light-header:not(.custom) .datama-header-logo .datama-image {
    padding: 0 10px;
    margin-top: 7px;
    height: 26px;
    width: auto;
}

.datama-light-header:not(.custom) button.datama-button,
.datama-light-header:not(.custom) a.datama-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 40px;
    font-size: 20px !important;
    text-transform: capitalize;
    white-space: nowrap;
    transition: var(--transition-out);
    border-radius: 0;
}
.datama-light-header:not(.custom) button.datama-button:hover,
.datama-light-header:not(.custom) a.datama-button:hover,
.datama-light-header:not(.custom) .datama-header-logo:hover {
    background: var(--hover);
    transition: var(--transition-in);
}

/* Disabled header actions (demo / no license): gray chip, keep icon as-is */
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled {
    opacity: 1;
    cursor: not-allowed;
    background: rgba(var(--color-dark-rgb), 0.12);
}
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled:hover,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled:hover {
    background: rgba(var(--color-dark-rgb), 0.12);
    transform: none;
    box-shadow: none;
}
/*
 * A disabled Save button still receives `.highlight` from the many "settings changed"
 * call sites. That rule paints the primary background with `!important`, which would make
 * a demo-mode button that does nothing look like the primary call to action. Keep it gray.
 */
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled.highlight,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled.highlight {
    background-color: rgba(var(--color-dark-rgb), 0.12) !important;
    box-shadow: none;
}
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled.highlight .datama-button-icon path,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled.highlight .datama-button-icon path {
    fill: currentColor !important;
}

.datama-light-header:not(.custom) button > span.datama-button-text {
    align-self: center;
    margin-left: 5px;
    font-size: 16px;
}

.datama-light-header.custom {
    /* Datama brand stack (Montserrat). Do not use --font-sans: host Tailwind may
     * define that token as the system UI family and override inherited Montserrat. */
    font-family: var(--font-family, inherit);
}

/* Badge styles for logo */
.datama-header-logo-badge {
    position: absolute;
    bottom: 6px;
    right: 0px;
    background: var(--accent, #00484A);
    color: white;
    border-radius: 12px;
    min-width: 12px;
    height: 12px;
    padding: 0 4px;
    font-size: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 2px solid var(--background, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.datama-header-logo-badge.pulse {
    animation: datama-badge-pulse 2s infinite;
}

@keyframes datama-badge-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Logo quick-links menu (.datama-header-logo-menu)                   */
/* Datama visiting-card dropdown anchored under the header logo       */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu.datama-header-logo-menu {
    min-width: 200px;
    padding: 4px 6px 8px;
    border: 1px solid rgba(var(--datama-primary-rgb), 0.12);
    border-radius: 12px;
    box-shadow:
        0 12px 40px -12px rgba(0, 72, 74, 0.28),
        0 8px 16px -12px rgba(22, 23, 24, 0.18);
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-search,
div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-search.visible {
    display: none !important;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-divider-first {
    display: none;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-divider:not(.datama-context-menu-divider-first) {
    width: 50%;
    margin: 6px auto 4px;
    padding: 0;
    border-top: 1px solid rgba(var(--datama-primary-rgb), 0.18);
    justify-content: center;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-divider > span {
    display: none;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand {
    cursor: default;
    pointer-events: none;
    min-height: auto;
    justify-content: center;
    padding: 12px 16px 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(var(--datama-primary-rgb), 0.08);
    border-radius: 8px 8px 0 0;
    /* Override global `.disabled` opacity so the full logo stays crisp */
    opacity: 1 !important;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand:hover {
    background: transparent;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand .datama-context-menu-element-container {
    display: none;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand .datama-context-menu-slot-icon {
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand-image {
    display: block;
    height: 32px;
    width: auto;
    max-width: 148px;
    padding: 0;
    margin: 0 auto;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link {
    color: var(--color-primary);
    border-radius: 8px;
    padding: 7px 10px;
    min-height: 34px;
    font-weight: 500;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link:hover {
    background: rgba(var(--datama-primary-rgb), 0.07);
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-element-container {
    order: 1;
    color: var(--color-primary);
    font-weight: 500;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon {
    order: 2;
    margin-left: auto;
    font-size: 12px;
    opacity: 0.45;
    color: var(--color-primary);
    transition: opacity 0.12s ease-out;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link:hover .datama-context-menu-slot-icon {
    opacity: 0.75;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon svg,
div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon path {
    color: var(--color-primary);
    fill: var(--color-primary);
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-version {
    cursor: default;
    pointer-events: none;
    justify-content: center;
    padding: 6px 10px 4px;
    min-height: auto;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-version:hover {
    background: transparent;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-version .datama-context-menu-element-container {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--text-meta);
    text-align: center;
    width: 100%;
}
/*
 * 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 : modules.css project project-deep-sky
 */

.datama-module {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 0;
}
.datama-light-modules {
    position: relative;
    width: 100%;
    padding: 0 10px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.datama-light:not(.configurable) .datama-module:not(.ha-75) {
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.datama-light:not(.configurable) .datama-module.ha-75 {
    min-height: 75% !important;
    max-height: 75% !important;
}
.datama-light.configurable .datama-module:not(.ha-75) {
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.datama-light.configurable .datama-module.ha-75 {
    min-height: 75% !important;
    max-height: 75% !important;
}
#qv-page-container .datama-light-modules {
    position: relative;
    width: 100%;
    padding: 0 10px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
#qv-page-container .datama-light .datama-module:not(.ha-75) {
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
}
#qv-page-container .datama-light .datama-module.ha-75 {
    min-height: 75% !important;
    max-height: 75% !important;
}
.datama-light .datama-module > .datama-section {
    margin: -40px -10px 0;
    width: calc(100% + 20px);
}
.datama-light .datama-module > .datama-section.h-100 {
    height: calc(100% + 40px);
}
.datama-light .datama-module > svg {
    margin-top: 40px;
}
.datama-light-modules .datama-slide-actions {
    padding: 5px 0;
}
.datama-light-modules .datama-slide-actions > button > * {
    line-height: 18px;
    font-size: 18px;
}
.datama-light-modules .datama-slide-actions > span {
    height: 10px !important;
    margin: 5px 5px !important;
}
.datama-light-modules .datama-slide-actions > button {
    width: 30px;
    height: 30px;
    font-weight: 600;
}
.datama-light-modules .datama-slide-actions > button path,
.datama-light-modules .datama-slide-actions > button * {
    fill: rgb(var(--color-dark-rgb));
    color: rgba(var(--color-dark-rgb), .75);
    fill-opacity: .75;
}
.datama-light-modules .datama-slide-actions > button path:hover,
.datama-light-modules .datama-slide-actions > button:hover * {
    fill-opacity: 1;
    color: rgba(var(--color-dark-rgb), 1);
}
.datama-light-modules .datama-slide-actions > button.active *,
.datama-light-modules .datama-slide-actions > button.active path {
    color: var(--state-active-text);
    fill: var(--state-active-text);
}

.datama-light-modules .datama-slide-actions > button.active {
    background: var(--state-active-bg);
    box-shadow: inset 0 0 0 1px var(--state-active-border);
    border-radius: 6px;
}
.demo .datama-module:not(.global)::after {
    content:  "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAA4CAYAAADkQPSjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAxLSURBVHgB7Z1dcts4EoAbtCe1b6s9wTAnGM0JRj5BkhPYedvamrGVE0Q+gWVnaytvkU8Q5wRWThDNCcKcYDVvM45FTHcD1C9/0CQoUTK/KscxRYEAiG78dTdU2O93YQYX4AMF3/Cf/0Ogf8e/JtFwOIUDJDzva+ebYziJ/jscQ0tLCsf400HBOQNvaGp0TPhbfwxKjeBBf47eDyNoaWlZIYA6UdBDgRzBM7jHXuMtPEWO4SBHAS1+qFcAF4T4M0Ah/Br+ux/C0yKClpYMtiWACSH3hk9FCNXhzoNb/LBtASRICD/i4k8HDp8JtLTksAsBJLq4UNOHQ2cGt9DSksOuBJC4OOheUMO43X5oKWKXAtg54F5wCt/hNbS0FLBLASRO4fCYwiNuvrf7ni0O7FoAw4NaEcVhJzzAz9H/hu3iS4sTxyBlzbSKBegYVzYDtqaR92g/0GY9jMADdk65Mq/EbYAI6oYET6lR9O5qZ4suaWVHpk3bBsF8hmD2hQnKXyVl5Tu9Es9eRlzfChPpoVDdO38jx7Yx/K1/hntfH0DGZXQzHEAJbN5/QQHo4XO7sNkAEyZ4T4RCcicxi2PrHT1/uQtWTfc+4z1foQzfsewlh6r88mP1ArROyh5m3DrF/E1s2T9Jn8eCPYOrwhuVGkc36QrIvqeXYBT05jvScAdHcIuN9w7c8lSUnlGIN/4UItdDrE6xvrvGwquovuF37JRGRQrBqwByRs/7Q/zlbtytMZPvhqIFCyvo9IwulAGf6dL48Tn3trLroYShNr+vGbwtnS/Hsi89DwXdScF8QkX6cuP7F/0rfKbbYptD3kTpkRXSQ7X5eOX6ZksoNchSBv7ngDE4abE5Cv7lemv4n34XBfyL7WXLCZ955hk8g6/7ZJ9KgsAKgZRlFaVQX9l/Wr/A+dWClW6Tt/u07Sm6xu9ei1bOS1te8fNI2KvWN/eUeoR18SEtH94F0Gp093Gwhn+63BaevznFuSb11OUFb5PBPgghKR5sCF8898YDahTgj3BZcLjxlstviD3Ox42rGug9lXn3YZZQZ37B9Pr3QmHPJ1Eua0JY1ypoBB5h4SOviuw5XhUaLYQsfEbx+C87NgrfQsj/0BShSuNFwTXv3CZaNT3Kl+Oe81z4/Cr6RT7WlEE9Aqj9ueCYlSYWvjoZhL/iWL9hcNmPuTeoz2LICKEfTT+zjVZBdYWm9CJPPtJztbyKub5DqI/Q9ubMrvcBi5EsEFXBz0v2SwwDqLcxGLDsXswCFQ9De+Ajzxq6pBS9pUdKbAYv826wI6E6er5VsDdPFH6jBZCHHttogAQNexrUC9qGty1LIT9mgRp+tNsDfggwLZ/pAW5ZZWD39M5gW1iF3+wecNu9UtAg21RfcXpc0dmN0xladNGbq6GlobR8ppe3KDTL3dvzDyl8HHU0VgA9Dj0kVG+EHmBtrLxq/mJsg4BqhNYowA+UlvI6JAwzy6i2rPAIHBLLTdG2RSxewp7ShidZe/Bf5czjOhQlbm69MIM3mMbmCwsk81LVh5ijxG1ynOGw+4iNTqYaadHrGr93h/U2LW0aaOZII6hGx+bnFvMyhmRLyuSHFFwI7izX/fVqegp7Rl6oCUHCn/P8zbErnzJBV1hP5O/5iCv+1EaOWFm8FeUHlUtzBZCGREpwPxlBv7+Klq7Q/8c4sabf7kNZs5LHgpFlVI1pgjMofGK/wECofGJ4tfaMCKjsHJVOYBqoPI04yBtks+7GtqF/Aemq7mOqgTul98ku0oXgyjHfG62lL1V4l9H1hvnkBPMzFpYvbO4cUAleEmqjTHOjAIYgMQxQWx/2biKZ9+Q4/kbvhiO2i3RP60eoCr2LDMVlDeOvQUJRelqYXhqBqPebZtku2/JJ7E9/avIijHulBOou6yO2Ttd7FptFpnw+F3z+DdzTcjYLzKQoDEcgHOLmvFvmSGj6mI57fRe1JVlba+4ijIjv+o/czyWN0EcvUB1Jg4gK7ij6fDktJ7PAXB7znyd2D9P6m9f00pEMiaPcT49EVmCd5s4BafECNGnkjm0Yobk8HyKGcKjEvPhj3KtWy574/IXwVPhzC4GNY+yVAys4RgGbet5CfTdWAKObq8KxPS8p06rWPw4r+jTO6WhYVTi0YsPeAyv7LrBz6HHRfXXUd4N7wGKs93Fqhdj9nh7ECjWabsT+nm+yFp5s2btYdlqqfwEtXiiob3KQ/gVm7CDtzF4LYII1I+ry3iENIcjiIU7G9RoOmUXZUdEk3vFxMmQ67LLvghXllnjHL9e3ZOsM9lQAl8IxvLQNbjGJFlbAvrEUGqG3oWgOvOy7YD6SmsGLqsKWxl4J4Dw8AFvJPK0G95TLvgus0UAff0zcmZrqey8EkJ1Sj+CKG98Ta3jcEGbw4SmWfRdwj6dZ0fVhCzReAMPzNxeo8QdQp1NqQ7EBsz6KNuZbSrPkDR/Clmi2PyA7SGoyJXt6wvdr/6VtDK3wbYFdCB/RXHckGnYCe4RXhbYpItgjuDEE4viqaWRu07Ss4Uf4xG2tuT3gcUpkrGKmHOTVuK68ggd4Ht0MyZrmM+wTJhCutOebWsPra/z9eqns1Y2VDxwbiiIEGSRsZPdp6ps8Nqi+A9mhPI2cA4pDUVjfrEM4Dmwp6rMbJHQaLtuj0MphtnVEoSgivP81+XL6CPtfjwBWXzSQOJKm+WatYjbn9wNJYyBXnZvCqOLtHDIPckJ2d0Ej51vq6bwN6+sagkr8q1ZgjeQe0HXqdK7ELlcRf1BSDwN3s7m/4LLwnmZ4dzQZgameGhT2ejNZ2/cugLx6J0HBuiuRewEcfK/mplq74lGLQu+D+9A7KjzbwsSW6UFLNhIH7CAjtMgqIttb/z1g4HCSzirRyl8SDRI49Gyxl5XUdSQe9u7leSbqqV3KfgrtELQIb8rZHhrUk3zHmwDawyxo6TyUfG/DoVSJnFG7eQdv2NWtOmJrSgTQfUg5kwUsyotjass+gJZMUs73y0dntyUevShx51NiEeYITvHl9paudDiGSZx7Pl82VcNFmFj7r3FsPqY/59bqMw7E1IN6cBdAUhIoDDhXLZ6vSQngY3j+pr989NXcZhTaoad3KKL1eX+KWzy3yfCfouhh26dh5wBKIBdAnbJKV2WFcT00H50rIUuPLRhspLJobq2+mgYJjL+hGB/2KRq60AEwZ/bgxm/z0A9KTVwcj3Po8NFX5/0RmKE81UVrqO1OmdXMASr9gY2211nxxCmBfAiqvQTBSdIap6wqVVniDTOuu8eEcUGVSi8JtnsBdFQVn7K7tkAzqzQaCFOvqj0LSLVF8hy6HQghXamL6lsmgMpqcF8oNdq4diQIo+cGVfAYfBJ7VELLPONezNseE6P3zApo2/iPmCdqGzIB1Hweuq8MR2nH9tooVxH4QnG0aL8CY4bNfgUFagihSArTxEVtyUJ5VlAPHJbRuW3IBPABX+aRr8asBjkf3oIvKE6lZ4GxQ5d6bCy1w+a6c1pqaIPXjqElHZ8KahEg2rltSATwkhK3WnoM1ZhkHVpvcyWLZp1NRDaSNs9+VyH95XEFa9PpoxdcjDB8l/2A8KpME8skQdtwFcDJiskXHVpSngh70le5N1ClxDKr8hRoufhknua7IVWKt561FqFOeOSyVxPuePGOrFC3QphFwFsIEVTjMtmasO33lcuXXASQ5hEnyxc4Vr8uIYTUc5Ix6/viaMY2Nmb5RoP5W38OKpEz8Dh0tELtvWGXrt8Fl7b+FmkaBdoKYQosMKaNR1CO23WbZFZ6RgijvC/mCSBp4EtM+Oc0A1RufJo1dQRFkODFcILfOZG4cHChXJ+x9DX7rFFGmhRo58TXvKhkHovTpfzH4kYxZcWTdXgIXQ/gOficYx8IPFcuJ4TXVrFvpklK0KSZuTCzvhFv5ndKYU+lb4uExTbykbWB6y6d6mP2V3Cjmc7rc+nx8p5hj30aQP75cmYsj+PvIneRJBKyDXjUW8k75blsHk1adNBj1+FrNEyZFOUT0z2xLjOUbpiZVlL2ondmVpnPMN2BPZartyg7ZBkbR+CXCPwSgQds3Ty37TnvPZrVagc/zKS+6f9sOrio7w5dY5uJJOS2DwfDumGbu4AOoORAtMaT4jtu6FcQct+wOdwjH9iIm+/kjoQb7np+9sAUP5uUye9K2TktLD9u3mcd39VSDVbQ5j12+D1SfdN79OSMS/wNY+wpEBTep2oAAAAASUVORK5CYII=");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 400px;
    opacity: 0.2;
    pointer-events: none;
}
/*
 * DATAMA SAS
 * --------------
 * Compare tree card layouts — exact port of the wireframe card CSS in
 * src/utility/components/plot/dev.card.index.html (grids + flex header/mid/footer).
 * Class prefix: .datama-compare-tree-card / __slot / __name / __main / …
 * Keep this file in sync with the playground card stylesheet.
 */

/* ---- Card shell ---- */
.datama-compare-tree-card {
    /* Defaults mirrored from wireframe :root (sizes/pad); chrome stays transparent for Plotter path. */
    --compare-tree-card-pad: 8px 12px;
    --compare-tree-card-radius: 0;
    --compare-tree-card-border: none;
    --compare-tree-card-shadow: none;
    --compare-tree-text: inherit;
    --compare-tree-positive: #16a34a;
    --compare-tree-negative: #dc2626;
    --compare-tree-size-name: 1;
    --compare-tree-size-main: 1.2;
    --compare-tree-size-sub: 0.85;
    --compare-tree-size-spark: 1;
    --compare-tree-size-indicator: 1;
    --compare-tree-size-emoji: 1;
    --compare-tree-size-gauge: 1;
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: var(--compare-tree-card-pad);
    border-radius: var(--compare-tree-card-radius);
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--compare-tree-text);
    gap: 4px;
    font-size: 13px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    --compare-tree-card-current: #2563eb;
    --compare-tree-card-semantic: var(--compare-tree-card-current);
    container-type: size;
    container-name: compare-treecard;
    pointer-events: all;
    cursor: pointer;
}

.datama-compare-tree-card[data-trend="down"] {
    --compare-tree-card-current: var(--compare-tree-negative);
    --compare-tree-card-semantic: var(--compare-tree-negative);
}

.datama-compare-tree-card[data-trend="up"] {
    --compare-tree-card-current: var(--compare-tree-positive);
    --compare-tree-card-semantic: var(--compare-tree-positive);
}

.datama-compare-tree-card__slot {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
    overflow: hidden;
}

.datama-compare-tree-card__slot[hidden] {
    display: none !important;
}

.datama-compare-tree-card__name {
    grid-area: name;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    font-size: calc(0.85rem * var(--compare-tree-size-name));
    line-height: 1.2;
    color: var(--compare-tree-slot-name-color, inherit);
    overflow-wrap: anywhere;
    word-break: break-word;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    /* Cap height to clamped lines — avoids mid-glyph crop when row is between N and N+1 lines. */
    max-height: calc(1.2em * 2);
}

/* Landscape / wide: single-line ellipsis (never mid-glyph vertical crop). */
.datama-compare-tree-card[data-aspect="landscape"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect="wide"] .datama-compare-tree-card__name {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2;
    min-height: 0;
    max-height: 1.2em;
    align-self: center;
}

/* Portrait / tall / square: up to 3 lines, height locked to clamp (no empty name band). */
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect="square"] .datama-compare-tree-card__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    line-height: 1.2;
    min-height: 0;
    max-height: calc(1.2em * 3);
    align-self: start;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="square"] .datama-compare-tree-card__name {
    -webkit-line-clamp: 2;
    max-height: calc(1.2em * 2);
}

/* Main KPI: block + ellipsis (flex breaks text-overflow). */
.datama-compare-tree-card__main {
    grid-area: main;
    display: block;
    font-weight: 700;
    font-size: calc(1.1rem * var(--compare-tree-size-main));
    line-height: 1.15;
    color: var(--compare-tree-slot-main-color, inherit);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    min-height: 0;
    max-height: 1.15em;
    align-self: center;
    text-align: center;
}

.datama-compare-tree-card__sub {
    grid-area: sub;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
}

.datama-compare-tree-card__sub-kpi {
    /* Size to the value. Shrinking with ellipsis produced pills that were
     * mostly "…" — hide extras instead (see nth-child / container rules). */
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    height: 1.35rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    font-size: calc(0.68rem * var(--compare-tree-size-sub));
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35rem;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    color: var(--compare-tree-slot-sub-color, inherit);
    box-sizing: border-box;
}

/* ---- Sub KPI display modes ---- */
.datama-compare-tree-card[data-sub-display="pills"] .datama-compare-tree-card__sub {
    gap: 0.25rem;
}

/* Non-pill modes flow as a single inline text line so the CONTAINER
 * can ellipsize at its right edge instead of clipping mid-glyph
 * when the aggregated content is wider than the sub slot. */
.datama-compare-tree-card[data-sub-display="bullet"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-sub-display="dense"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-sub-display="text"] .datama-compare-tree-card__sub {
    display: block;
    gap: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    min-width: 0;
}

.datama-compare-tree-card[data-sub-display="bullet"] .datama-compare-tree-card__sub-kpi,
.datama-compare-tree-card[data-sub-display="dense"] .datama-compare-tree-card__sub-kpi,
.datama-compare-tree-card[data-sub-display="text"] .datama-compare-tree-card__sub-kpi {
    display: inline;
    height: auto;
    max-width: none;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.datama-compare-tree-card[data-sub-display="bullet"] .datama-compare-tree-card__sub-kpi {
    font-weight: 600;
}

.datama-compare-tree-card[data-sub-display="bullet"] .datama-compare-tree-card__sub-kpi + .datama-compare-tree-card__sub-kpi::before {
    content: "•";
    display: inline;
    margin: 0 0.35rem;
    opacity: 0.45;
    font-weight: 700;
}

.datama-compare-tree-card[data-sub-display="dense"] .datama-compare-tree-card__sub-kpi {
    font-size: calc(0.62rem * var(--compare-tree-size-sub));
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.datama-compare-tree-card[data-sub-display="dense"] .datama-compare-tree-card__sub-kpi + .datama-compare-tree-card__sub-kpi::before {
    content: "|";
    display: inline;
    margin: 0 0.28rem;
    opacity: 0.35;
    font-weight: 500;
    text-transform: none;
}

.datama-compare-tree-card[data-sub-display="text"] .datama-compare-tree-card__sub-kpi {
    font-size: calc(0.7rem * var(--compare-tree-size-sub));
    font-weight: 500;
    letter-spacing: 0;
}

.datama-compare-tree-card[data-sub-display="text"] .datama-compare-tree-card__sub-kpi + .datama-compare-tree-card__sub-kpi::before {
    content: ", ";
    display: inline;
    opacity: 0.75;
    font-weight: 400;
}

/* Pills stay fully readable (no ellipsis). Show as many as fit: JS
 * clips extras via countFittingTreeCardPills; container queries below
 * are the fallback before layout is measured.
 * Bullet / dense / text modes stay uncapped (line ellipsis). */

/* Centered portrait/tall grids must still stretch text/sub rows full width. */
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect="square"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect="square"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect="square"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect="landscape"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect="wide"] .datama-compare-tree-card__name {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
}

.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__sub {
    justify-content: flex-start;
}

.datama-compare-tree-card__spark {
    grid-area: spark;
    display: flex;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 3.25rem;
    overflow: hidden;
    align-self: stretch;
}

.datama-compare-tree-card__spark svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 3.25rem;
    overflow: hidden;
}

/* Portrait / tall / square: keep spark compact — few points, no empty 1fr chart band. */
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect="square"] .datama-compare-tree-card__spark {
    max-width: 100%;
    max-height: 1.75rem;
    height: 1.75rem;
    justify-self: stretch;
}

.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__spark svg,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__spark svg,
.datama-compare-tree-card[data-aspect="square"] .datama-compare-tree-card__spark svg {
    max-height: 1.75rem;
}

.datama-compare-tree-card__indicator {
    flex: 0 0 auto;
    width: max-content;
    max-width: 2.5rem;
    grid-area: indicator;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: calc(0.95rem * var(--compare-tree-size-indicator));
    color: var(--compare-tree-slot-indicator-color, var(--compare-tree-card-current));
    line-height: 1;
}

.datama-compare-tree-card__indicator-pill {
    width: calc(10px * var(--compare-tree-size-indicator));
    height: calc(10px * var(--compare-tree-size-indicator));
    border-radius: 999px;
    background: var(--compare-tree-slot-indicator-color, var(--compare-tree-card-current));
}

.datama-compare-tree-card__emoji {
    flex: 0 0 auto;
    width: max-content;
    max-width: 2rem;
    grid-area: emoji;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: calc(1.25rem * var(--compare-tree-size-emoji));
    line-height: 1;
}

/* Gauge overlays */
.datama-compare-tree-card__gauge {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    color: var(--compare-tree-slot-gauge-color, var(--compare-tree-card-current));
}

.datama-compare-tree-card__gauge[data-format="bar"][data-side="left"],
.datama-compare-tree-card__gauge[data-format="bar"][data-side="right"] {
    top: 0;
    width: 6px;
    height: calc(var(--compare-tree-gauge-value, 0.5) * 100%);
    background: currentColor;
    border-radius: 6px;
}

.datama-compare-tree-card__gauge[data-format="bar"][data-side="left"] {
    left: 0;
    bottom: 0;
    top: auto;
}

.datama-compare-tree-card__gauge[data-format="bar"][data-side="right"] {
    right: 0;
    bottom: 0;
    top: auto;
}

.datama-compare-tree-card__gauge[data-format="bar"][data-side="top"],
.datama-compare-tree-card__gauge[data-format="bar"][data-side="bottom"] {
    left: 0;
    height: 6px;
    width: calc(var(--compare-tree-gauge-value, 0.5) * 100%);
    background: currentColor;
    border-radius: 6px;
}

.datama-compare-tree-card__gauge[data-format="bar"][data-side="top"] {
    top: 0;
}

.datama-compare-tree-card__gauge[data-format="bar"][data-side="bottom"] {
    bottom: 0;
}

.datama-compare-tree-card__gauge[data-format="background"] {
    inset: 0;
    opacity: var(--compare-tree-gauge-opacity, 0.35);
}

.datama-compare-tree-card__gauge[data-format="background"][data-direction="vertical"] {
    background: linear-gradient(
        to top,
        currentColor 0%,
        currentColor calc(var(--compare-tree-gauge-value, 0.5) * 100%),
        transparent calc(var(--compare-tree-gauge-value, 0.5) * 100%)
    );
}

.datama-compare-tree-card__gauge[data-format="background"][data-direction="horizontal"] {
    background: linear-gradient(
        to right,
        currentColor 0%,
        currentColor calc(var(--compare-tree-gauge-value, 0.5) * 100%),
        transparent calc(var(--compare-tree-gauge-value, 0.5) * 100%)
    );
}

.datama-compare-tree-card__gauge[data-format="circular"] {
    grid-area: gauge;
    position: relative;
    inset: auto;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.datama-compare-tree-card__gauge[data-format="circular"] svg {
    transform: rotate(-90deg);
}

.datama-compare-tree-card__gauge[data-format="circular"] .track {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 3.5;
}

.datama-compare-tree-card__gauge[data-format="circular"] .value {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5;
    stroke-linecap: round;
    opacity: var(--compare-tree-gauge-opacity, 0.9);
}

/* Progressive layouts — size × aspect (pixel-perfect small formats) */
/* Shared: keep content clear of left gauge bar */
.datama-compare-tree-card[data-show-gauge="true"][data-gauge-format="bar"] {
    padding-left: 10px;
}

.datama-compare-tree-card[data-breakpoint="micro"][data-show-gauge="true"][data-gauge-format="bar"],
.datama-compare-tree-card[data-breakpoint="xs"][data-show-gauge="true"][data-gauge-format="bar"] {
    padding-left: 8px;
}

/* ---- micro ---- */
.datama-compare-tree-card[data-breakpoint="micro"][data-aspect="portrait"],
.datama-compare-tree-card[data-breakpoint="micro"][data-aspect="tall"] {
    grid-template-areas:
        "main"
        "name";
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 2px 3px 2px 8px;
    gap: 1px;
    align-content: center;
}

.datama-compare-tree-card[data-breakpoint="micro"][data-aspect="square"] {
    grid-template-areas: "main";
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding: 2px 2px 2px 10px;
    gap: 0;
}

.datama-compare-tree-card[data-breakpoint="micro"][data-aspect="landscape"],
.datama-compare-tree-card[data-breakpoint="micro"][data-aspect="wide"] {
    grid-template-areas: "name main";
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr) max-content;
    padding: 1px 4px 1px 8px;
    gap: 4px;
    align-items: center;
    align-content: center;
}

.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__name {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: calc(0.55rem * var(--compare-tree-size-name));
    max-height: 1.2em;
    min-height: 0;
    align-self: center;
}

.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__main {
    font-size: calc(0.62rem * var(--compare-tree-size-main));
    max-height: 1.15em;
}

/* ---- xs ---- */
.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="portrait"],
.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="tall"] {
    grid-template-areas:
        "emoji"
        "main"
        "name";
    grid-template-rows: auto auto auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 3px 4px 3px 8px;
    justify-items: center;
    text-align: center;
    align-content: center;
    row-gap: 2px;
}

.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="portrait"][data-emoji="false"],
.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="tall"][data-emoji="false"] {
    grid-template-areas:
        "main"
        "name";
    grid-template-rows: auto auto;
}

.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="square"] {
    grid-template-areas:
        "name"
        "main";
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 4px 4px 4px 8px;
    text-align: center;
    align-content: center;
    row-gap: 2px;
}

.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="landscape"] {
    grid-template-areas: "emoji name main indicator";
    grid-template-rows: auto;
    grid-template-columns: auto minmax(0, 1fr) max-content max-content;
    padding: 2px 6px 2px 8px;
    align-items: center;
    align-content: center;
    column-gap: 4px;
}

.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="wide"] {
    grid-template-areas: "name main indicator";
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    padding: 1px 8px 1px 8px;
    align-items: center;
    align-content: center;
    column-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint="xs"] .datama-compare-tree-card__name {
    font-size: calc(0.65rem * var(--compare-tree-size-name));
    -webkit-line-clamp: 2;
    max-height: calc(1.2em * 2);
}

.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="landscape"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="wide"] .datama-compare-tree-card__name {
    display: block;
    -webkit-line-clamp: unset;
    white-space: nowrap;
    max-height: 1.2em;
}

.datama-compare-tree-card[data-breakpoint="xs"] .datama-compare-tree-card__main {
    font-size: calc(0.78rem * var(--compare-tree-size-main));
}

/* ---- sm ---- */
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"],
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"] {
    grid-template-areas:
        "emoji main indicator"
        "name name name"
        "sub sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
    padding: 6px 8px 6px 12px;
    justify-items: stretch;
    text-align: left;
    row-gap: 4px;
    column-gap: 4px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"] .datama-compare-tree-card__main {
    text-align: left;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="square"] {
    grid-template-areas:
        "emoji name name"
        "main main indicator"
        "sub sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
    padding: 6px 8px 6px 12px;
    row-gap: 4px;
    column-gap: 4px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="landscape"] {
    grid-template-areas:
        "emoji name main indicator"
        "sub sub sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
    grid-template-rows: auto auto;
    padding: 6px 10px 6px 12px;
    align-items: center;
    align-content: center;
    row-gap: 4px;
    column-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="wide"] {
    grid-template-areas: "emoji name main indicator sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content minmax(0, 0.9fr);
    grid-template-rows: auto;
    padding: 4px 10px 4px 12px;
    align-items: center;
    align-content: center;
    column-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__name {
    font-size: calc(0.72rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"] .datama-compare-tree-card__name {
    -webkit-line-clamp: 2;
    align-self: stretch;
}

.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__main {
    font-size: calc(0.95rem * var(--compare-tree-size-main));
}

/* ---- md ---- */
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="portrait"],
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="tall"] {
    grid-template-areas:
        "emoji main indicator"
        "name name name"
        "spark spark sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto minmax(1.5rem, 1fr);
    padding: 8px 10px 8px 12px;
    justify-items: stretch;
    text-align: left;
    row-gap: 4px;
    column-gap: 6px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="portrait"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="tall"] .datama-compare-tree-card__main {
    text-align: left;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="portrait"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="tall"] .datama-compare-tree-card__spark {
    width: auto;
    max-width: none;
    height: 1.65rem;
    justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="portrait"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="tall"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji main gauge"
        "name name name"
        "spark spark indicator";
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="square"] {
    grid-template-areas:
        "emoji name indicator"
        "main main spark"
        "sub sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
    padding: 8px 8px 8px 12px;
    row-gap: 4px;
    column-gap: 6px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="square"] .datama-compare-tree-card__spark {
    width: 4.5rem;
    max-width: 4.5rem;
    height: 1.75rem;
    align-self: center;
    justify-self: end;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="square"] .datama-compare-tree-card__main {
    text-align: left;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="landscape"],
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="wide"] {
    grid-template-areas:
        "emoji name main indicator"
        "spark spark sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
    grid-template-rows: auto auto;
    padding: 8px 12px 8px 12px;
    align-items: center;
    align-content: center;
    column-gap: 8px;
    row-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="wide"] {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="landscape"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="wide"] .datama-compare-tree-card__spark {
    width: auto;
    max-width: none;
    height: 1.5rem;
    justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint="md"] .datama-compare-tree-card__name {
    font-size: calc(0.78rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="md"] .datama-compare-tree-card__main {
    font-size: calc(1rem * var(--compare-tree-size-main));
}

/* ---- lg ---- */
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="portrait"],
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="tall"] {
    grid-template-areas:
        "emoji main indicator"
        "name name name"
        "spark spark sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto minmax(1.75rem, 1fr);
    padding: 10px 12px 10px 14px;
    justify-items: stretch;
    text-align: left;
    row-gap: 6px;
    column-gap: 8px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="portrait"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="tall"] .datama-compare-tree-card__main {
    text-align: left;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="portrait"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="tall"] .datama-compare-tree-card__spark {
    width: auto;
    max-width: none;
    height: 1.75rem;
    justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="portrait"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="tall"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji main gauge"
        "name name name"
        "spark spark indicator";
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="square"] {
    grid-template-areas:
        "emoji name indicator"
        "main main spark"
        "sub sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
    padding: 10px 12px 10px 14px;
    row-gap: 6px;
    column-gap: 8px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="square"] .datama-compare-tree-card__spark {
    width: 5rem;
    max-width: 5rem;
    height: 1.75rem;
    align-self: center;
    justify-self: end;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="square"] .datama-compare-tree-card__main {
    text-align: left;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="landscape"],
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="wide"] {
    grid-template-areas:
        "emoji name main indicator"
        "spark spark sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
    grid-template-rows: auto auto;
    padding: 10px 14px 10px 14px;
    align-items: center;
    align-content: center;
    column-gap: 10px;
    row-gap: 8px;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="wide"] {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="landscape"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="wide"] .datama-compare-tree-card__spark {
    width: auto;
    max-width: none;
    height: 1.5rem;
    justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="landscape"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji name main gauge"
        "spark spark sub indicator";
}

.datama-compare-tree-card[data-breakpoint="lg"] .datama-compare-tree-card__name {
    font-size: calc(0.85rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="lg"] .datama-compare-tree-card__main {
    font-size: calc(1.15rem * var(--compare-tree-size-main));
}

/* ---- xl ---- */
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="portrait"],
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="tall"] {
    grid-template-areas:
        "emoji main indicator"
        "name name name"
        "spark spark sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto minmax(2rem, 1fr);
    padding: 12px 14px 12px 16px;
    justify-items: stretch;
    text-align: left;
    row-gap: 6px;
    column-gap: 8px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="portrait"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="tall"] .datama-compare-tree-card__main {
    text-align: left;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="portrait"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="tall"] .datama-compare-tree-card__spark {
    width: auto;
    max-width: none;
    height: 2rem;
    justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="square"] {
    grid-template-areas:
        "emoji name indicator"
        "main main spark"
        "sub sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto auto;
    padding: 12px 14px 12px 16px;
    row-gap: 6px;
    column-gap: 8px;
    align-content: start;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="square"] .datama-compare-tree-card__spark {
    width: 5.5rem;
    max-width: 5.5rem;
    height: 1.85rem;
    align-self: center;
    justify-self: end;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="square"] .datama-compare-tree-card__main {
    text-align: left;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="landscape"],
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="wide"] {
    grid-template-areas:
        "emoji name main indicator"
        "spark spark sub sub";
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
    grid-template-rows: auto auto;
    padding: 12px 16px 12px 16px;
    align-items: center;
    align-content: center;
    column-gap: 10px;
    row-gap: 8px;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="wide"] {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="landscape"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="wide"] .datama-compare-tree-card__spark {
    width: auto;
    max-width: none;
    height: 1.5rem;
    justify-self: stretch;
    align-self: center;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="landscape"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="wide"] .datama-compare-tree-card__sub {
    justify-self: stretch;
    width: 100%;
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="landscape"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="wide"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji name main gauge"
        "spark spark sub indicator";
}

.datama-compare-tree-card[data-breakpoint="xl"] .datama-compare-tree-card__name {
    font-size: calc(0.95rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="xl"] .datama-compare-tree-card__main {
    font-size: calc(1.25rem * var(--compare-tree-size-main));
}

/* ---- Circular gauge grid variants (missing coverage) ----
 * The circular gauge needs a real `gauge` grid area; otherwise it
 * gets auto-placed and creates an implicit row/column, breaking the
 * layout. These variants complete the matrix so any breakpoint x
 * aspect combination that keeps a small trend indicator can promote
 * that spot to the circular gauge. When circular is shown next to a
 * trend indicator that would duplicate meaning, hide the indicator
 * (circular already conveys value + trend). */
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji main gauge"
        "name name name"
        "sub sub sub";
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"][data-gauge-format="circular"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"][data-gauge-format="circular"] .datama-compare-tree-card__indicator {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="square"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji name name"
        "main main gauge"
        "sub sub sub";
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="square"][data-gauge-format="circular"] .datama-compare-tree-card__indicator {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="landscape"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji name main gauge"
        "sub sub sub sub";
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="wide"][data-gauge-format="circular"] {
    grid-template-areas: "emoji name main gauge sub";
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="landscape"][data-gauge-format="circular"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="wide"][data-gauge-format="circular"] .datama-compare-tree-card__indicator {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="square"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="lg"][data-aspect="square"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="square"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji name gauge"
        "main main spark"
        "sub sub sub";
}

.datama-compare-tree-card[data-breakpoint="md"][data-aspect="landscape"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="md"][data-aspect="wide"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji name main gauge"
        "spark spark sub indicator";
}

.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="portrait"][data-gauge-format="circular"],
.datama-compare-tree-card[data-breakpoint="xl"][data-aspect="tall"][data-gauge-format="circular"] {
    grid-template-areas:
        "emoji main gauge"
        "name name name"
        "spark spark indicator";
}

/* Circular gauge cell: keep the SVG round and bounded by its cell,
 * driven by a dedicated --compare-tree-size-gauge (defaulted from spark size
 * for backward compat when JS didn't set it). Prevents the SVG from
 * exploding past the cell on medium+ cards. */
.datama-compare-tree-card__gauge[data-format="circular"] svg {
    width: 100%;
    height: 100%;
    max-width: calc(2rem * var(--compare-tree-size-gauge, var(--compare-tree-size-spark, 1)));
    max-height: calc(2rem * var(--compare-tree-size-gauge, var(--compare-tree-size-spark, 1)));
}

/* Micro / xs breakpoints have no gauge grid area at all — most demos
 * use bar or background gauges there. If a user forces circular, we
 * fall back to an absolutely-positioned pill in the top-right so it
 * never breaks the row/column structure. */
.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__gauge[data-format="circular"],
.datama-compare-tree-card[data-breakpoint="xs"] .datama-compare-tree-card__gauge[data-format="circular"] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: auto;
    height: auto;
}

.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__gauge[data-format="circular"] svg,
.datama-compare-tree-card[data-breakpoint="xs"] .datama-compare-tree-card__gauge[data-format="circular"] svg {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
}

/* =================================================================
 * FLEX LAYOUT for sm / md / lg / xl cards
 *
 * ROOT CAUSE OF PREVIOUS BUGS
 * ---------------------------
 * The old design used a single CSS grid per breakpoint x aspect.
 * Sparkline / sub pills placed in a shared column pushed that
 * column past its share via max-content contribution, and the main
 * KPI column then collapsed to 0 px (measured in md-portrait /
 * xl-portrait via Playwright: `main.clientWidth === 0`). Name was
 * also crushed on xl-landscape (~124 px).
 *
 * FIX
 * ---
 * DOM is now grouped into header / (mid) / footer FLEX rows. Row
 * tracks live in a flex column on the card; column tracks live
 * inside each row's own flex context. No grid column is ever
 * shared between header and footer, so sub pills or long
 * sparklines cannot starve the main slot anymore.
 *
 * The legacy per-breakpoint grid templates are neutralised for sm+
 * (`grid-template-*: none !important`) but kept in the stylesheet
 * for micro / xs which still rely on them.
 * ================================================================= */
.datama-compare-tree-card[data-breakpoint="sm"],
.datama-compare-tree-card[data-breakpoint="md"],
.datama-compare-tree-card[data-breakpoint="lg"],
.datama-compare-tree-card[data-breakpoint="xl"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

/* Short landscape / wide: name + main share the header, pills sit directly
 * underneath. Do not pin the footer to the bottom — that leftover height
 * is a hollow band, not a useful name row (stacked layouts own that gap). */
.datama-compare-tree-card[data-layout-signature="inline"] {
    justify-content: center;
    gap: 3px;
}

.datama-compare-tree-card__header,
.datama-compare-tree-card__mid,
.datama-compare-tree-card__footer {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.datama-compare-tree-card__header > .datama-compare-tree-card__emoji,
.datama-compare-tree-card__header > .datama-compare-tree-card__indicator {
    flex: 0 0 auto;
    align-self: center;
}

.datama-compare-tree-card__header > .datama-compare-tree-card__name {
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
}

.datama-compare-tree-card__header > .datama-compare-tree-card__main {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

/* Stacked aspects (no name in the header): let main grow so it
 * claims horizontal space and never collapses. */
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature="stacked"][data-aspect="landscape"] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature="stacked"][data-aspect="wide"] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
    flex: 1 1 auto;
    min-width: 3.25rem;
}

.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
    font-size: calc(0.7rem * var(--compare-tree-size-main));
    letter-spacing: -0.02em;
    flex: 1 0 auto;
    min-width: 0;
}

.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__sub-kpi {
    height: 1.15rem;
    line-height: 1.15rem;
    padding: 0 0.32rem;
    font-size: calc(0.58rem * var(--compare-tree-size-sub));
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"] .datama-compare-tree-card__header > .datama-compare-tree-card__emoji,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"] .datama-compare-tree-card__header > .datama-compare-tree-card__emoji {
    /* Narrow cards: keep emoji out of the KPI flex fight. */
    position: absolute;
    top: 4px;
    left: 10px;
    font-size: calc(0.85rem * var(--compare-tree-size-emoji));
    pointer-events: none;
    z-index: 2;
}

.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="portrait"] .datama-compare-tree-card__header,
.datama-compare-tree-card[data-breakpoint="sm"][data-aspect="tall"] .datama-compare-tree-card__header {
    padding-left: 1.1rem;
}

.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__header > .datama-compare-tree-card__emoji {
    font-size: calc(1rem * var(--compare-tree-size-emoji));
}

/* Short landscape / wide (inline): main sizes to its value so the name
 * receives leftover width (sm's `flex: 1 0 auto` otherwise splits the
 * row 50/50 and ellipsizes "Revenue Total" to "Reve..."). `text-align`
 * is required because `__main` is `display: block` — justify-content
 * does not apply. */
.datama-compare-tree-card[data-layout-signature="inline"][data-aspect="landscape"] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature="inline"][data-aspect="wide"] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
    flex: 0 0 auto;
    justify-content: flex-end;
    text-align: right;
}

/* Tall landscape / wide (stacked): main grows left in the header. */
.datama-compare-tree-card[data-layout-signature="stacked"][data-aspect="landscape"] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature="stacked"][data-aspect="wide"] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
    justify-content: flex-start;
}

/* Standalone name (stacked layouts) fills the middle vertical band
 * with a proper multi-line clamp aligned with its line-height. Last
 * visible line ends with ellipsis, never a mid-glyph crop.
 * Centered + larger than the inline header name — it is the secondary
 * hero under the main KPI (portrait / tall / tall landscape). */
.datama-compare-tree-card[data-breakpoint="sm"] > .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint="md"] > .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint="lg"] > .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint="xl"] > .datama-compare-tree-card__name {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    align-self: stretch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    line-height: 1.25;
    max-height: calc(1.25em * 3);
    text-align: center;
    white-space: normal;
    font-size: calc(1rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="sm"] > .datama-compare-tree-card__name {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(1.25em * 2);
    font-size: calc(0.9rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="md"] > .datama-compare-tree-card__name {
    font-size: calc(1.05rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="lg"] > .datama-compare-tree-card__name {
    font-size: calc(1.15rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint="xl"] > .datama-compare-tree-card__name {
    font-size: calc(1.25rem * var(--compare-tree-size-name));
}

/* Mid row (square) — main grows to fill, spark stays bounded.
 * !important on width / max-width defeats the legacy grid-context
 * rules (specificity 0,4,0) that hard-pinned spark to 5.5-7 rem
 * inside a grid column shared with emoji/main. */
.datama-compare-tree-card__mid {
    flex: 1 1 auto;
    min-height: 0;
    align-items: center;
}

.datama-compare-tree-card__mid > .datama-compare-tree-card__main {
    flex: 1 1 auto;
    min-width: 3.25rem;
    justify-content: flex-start;
    text-align: left;
}

.datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
    flex: 0 1 auto;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 5.5rem !important;
    height: 1.5rem !important;
    justify-self: stretch !important;
}

/* Footer pinned to bottom so leftover height is a purposeful gap
 * between name and footer (or absorbed by a growing spark), not a
 * hollow band under the whole card. Inline layouts skip this — the
 * name already lives in the header, so auto-margin is just empty space. */
.datama-compare-tree-card__footer {
    margin-top: auto;
    flex: 0 0 auto;
    align-items: flex-end;
    min-width: 0;
    overflow: hidden;
}

.datama-compare-tree-card[data-layout-signature="inline"] .datama-compare-tree-card__footer {
    margin-top: 0;
}

.datama-compare-tree-card__footer > .datama-compare-tree-card__spark {
    flex: 0 1 auto;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 5.5rem !important;
    height: 1.5rem !important;
    max-height: 3.25rem;
    justify-self: stretch !important;
    align-self: flex-end;
}

.datama-compare-tree-card__footer > .datama-compare-tree-card__sub {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    align-self: center;
}

/* Portrait / tall: grow footer so spark can use leftover vertical room. */
.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__footer,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__footer {
    flex: 1 1 auto;
    align-items: flex-end;
    min-height: 0;
}

.datama-compare-tree-card[data-aspect="portrait"] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect="tall"] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark {
    height: 100% !important;
    max-height: 3.25rem;
    align-self: stretch;
}

/* Per-breakpoint spark cap so it never dominates its row. */
.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
    max-width: 4.5rem !important;
    height: 1.35rem !important;
}

.datama-compare-tree-card[data-breakpoint="lg"] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="lg"] .datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
    max-width: 6.5rem !important;
    height: 1.6rem !important;
}

.datama-compare-tree-card[data-breakpoint="xl"] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="xl"] .datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
    max-width: 7rem !important;
    height: 1.75rem !important;
}

/* When sub is hidden, spark reclaims the row width. */
.datama-compare-tree-card[data-show-sub="false"] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark {
    max-width: 100%;
    flex: 1 1 auto;
}

/* Collapse footer when both children are disabled — avoids the
 * empty band at the bottom of the card. */
.datama-compare-tree-card[data-show-spark="false"][data-show-sub="false"] .datama-compare-tree-card__footer {
    display: none;
}

.datama-compare-tree-card[data-show-main="false"][data-show-spark="false"] .datama-compare-tree-card__mid {
    display: none;
}

/* Neutralise legacy `grid-area` on slots for sm+ so no stale rule
 * accidentally forces auto-placement inside the flex containers. */
.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__slot,
.datama-compare-tree-card[data-breakpoint="md"] .datama-compare-tree-card__slot,
.datama-compare-tree-card[data-breakpoint="lg"] .datama-compare-tree-card__slot,
.datama-compare-tree-card[data-breakpoint="xl"] .datama-compare-tree-card__slot {
    grid-area: auto;
}

/* Neutralise legacy `width: 100%` / `justify-self: stretch` that was
 * meant for grid stretching. Inside header/mid/footer flex rows we
 * want each slot to size on its own flex-basis / min-width chain,
 * otherwise every slot would try to be 100% wide and push the
 * others out of the row. Standalone name (direct child of card)
 * keeps its `width: 100%` because it lives in the card flex column
 * where the cross-axis stretch is desired. */
.datama-compare-tree-card__header > .datama-compare-tree-card__slot,
.datama-compare-tree-card__mid > .datama-compare-tree-card__slot,
.datama-compare-tree-card__footer > .datama-compare-tree-card__slot {
    width: auto;
    justify-self: auto;
    max-width: 100%;
}

/* Re-apply width:100% only for the slots that are FILL items inside
 * the row (name in header, sub in footer, main in mid). Their
 * flex-basis is 0 so the width serves as the initial target that
 * flex-grow will hand actual pixels to. */
.datama-compare-tree-card__footer > .datama-compare-tree-card__sub,
.datama-compare-tree-card__mid > .datama-compare-tree-card__main {
    width: 100%;
}

/* Circular gauge in the flex world: lives IN the header/mid row as a
 * flex item (never absolute overlay). That reserves horizontal room
 * so name / main cannot be painted underneath the ring. Indicator is
 * hidden when circular is shown (ring already conveys value + trend). */
.datama-compare-tree-card__header > .datama-compare-tree-card__gauge[data-format="circular"],
.datama-compare-tree-card__mid > .datama-compare-tree-card__gauge[data-format="circular"] {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    align-self: center;
    grid-area: auto;
    z-index: 1;
    width: calc(1.75rem * var(--compare-tree-size-gauge, 1));
    height: calc(1.75rem * var(--compare-tree-size-gauge, 1));
    min-width: calc(1.75rem * var(--compare-tree-size-gauge, 1));
    min-height: calc(1.75rem * var(--compare-tree-size-gauge, 1));
    max-width: calc(2rem * var(--compare-tree-size-gauge, 1));
    max-height: calc(2rem * var(--compare-tree-size-gauge, 1));
}

.datama-compare-tree-card__header > .datama-compare-tree-card__gauge[data-format="circular"] svg,
.datama-compare-tree-card__mid > .datama-compare-tree-card__gauge[data-format="circular"] svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Bar / background gauges stay absolute overlays relative to the card
 * (position:absolute removes them from the flex flow automatically). */

.datama-compare-tree-card[data-breakpoint="sm"][data-gauge-format="circular"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="md"][data-gauge-format="circular"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="lg"][data-gauge-format="circular"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="xl"][data-gauge-format="circular"] .datama-compare-tree-card__indicator {
    display: none !important;
}

/* Slot visibility driven by settings (`data-show-*`).
 * Size-tier hides below still apply when a slot is enabled: compact
 * templates (micro / xs) have no sub/spark track, so honoring
 * `data-show-sub="true"` (the default) painted pills outside the card. */
.datama-compare-tree-card[data-show-spark="false"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-show-sub="false"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-show-indicator="false"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-show-emoji="false"] .datama-compare-tree-card__emoji,
.datama-compare-tree-card[data-show-name="false"] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-show-main="false"] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-show-gauge="false"] .datama-compare-tree-card__gauge {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="micro"] .datama-compare-tree-card__emoji,
.datama-compare-tree-card[data-layout-signature="compact"] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-layout-signature="compact"] .datama-compare-tree-card__spark {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="micro"][data-aspect="square"] .datama-compare-tree-card__name {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="xs"] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint="xs"] .datama-compare-tree-card__sub {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="portrait"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="tall"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="square"] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="square"] .datama-compare-tree-card__emoji {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="xs"][data-aspect="wide"] .datama-compare-tree-card__emoji {
    display: none !important;
}

.datama-compare-tree-card[data-breakpoint="sm"] .datama-compare-tree-card__spark {
    display: none !important;
}

/* Drop chrome before cropping text on very short / narrow cards.
 * Sub KPIs stay visible on typical sm equation cards (~70–90px tall);
 * only spark / emoji / extra pills yield. */
@container compare-treecard (max-height: 48px) {
    .datama-compare-tree-card__indicator,
    .datama-compare-tree-card__emoji {
        display: none !important;
    }
}

@container compare-treecard (max-width: 100px) {
    .datama-compare-tree-card[data-sub-display="pills"] .datama-compare-tree-card__sub-kpi:nth-child(n + 2) {
        display: none !important;
    }
}

@container compare-treecard (max-width: 72px) {
    .datama-compare-tree-card[data-sub-display="pills"] .datama-compare-tree-card__sub {
        display: none !important;
    }
}


/*
 * DATAMA 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 : index.css project project-deep-sky
 */


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

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

div[data-app="true"]  {
    position: relative;
    color: var(--text-body);
    width: 100%;
    max-width: 100%;
    /* Utility demos must grow with content; clipping breaks Cypress visibility. */
    min-height: 100vh;
    height: auto;
    overflow: visible;
}
/* Real Light shell: fixed viewport, modules scroll internally. */
div[data-app="true"].datama-light {
    height: 100vh;
    overflow: hidden;
}
#qv-page-container div[data-app="true"]  {
    position: relative;
    color: var(--text-body);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

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

div[data-app="true"] .lock,
.datama-light .lock {
    position: relative;
}

div[data-app="true"] .lock::after,
.datama-light .lock::after {
    position: absolute;
    bottom: -.1rem;
    right: 0;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--datama-primary);
    border-radius: 1.2rem;
    content: "🔒";
    line-height: 1.2rem;
    font-size: .8rem;
    padding: .1rem;
    box-shadow: var(--shadow);
    text-align: center !important;
}

.datama-light {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Opt-in shell fill — default stays transparent so host viz page backgrounds show through. */
.datama-light.datama-light--host-background-override {
    background-color: var(--color-bg-light, #fff);
}
.datama-light > .datama-light-header {
    order: 1;
}
.datama-light > .datama-light-header:not(.custom) {
    flex: 0 0 40px;
}
.datama-light > .datama-light-header.custom {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
}
.datama-light > .datama-light-modules {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
}
.datama-light > .datama-light-introduction {
    order: 3;
}
.datama-light > .datama-light-footer {
    order: 4;
    flex: 0 0 30px;
    min-height: 30px;
}
.datama-light > .datama-light-footer.datama-light-footer-host {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
}
.datama-light > .datama-light-notifications {
    order: 5;
}
#qv-page-container .datama-light {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.datama-light > *:not(.datama-input-select-dropdown) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#qv-page-container .datama-light > *:not(.datama-input-select-dropdown) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.datama-light > div:not(.datama-input-select-dropdown) {
    padding: 0 20px;
}

/*
 * Portaled DataMaInput selects are appended as direct children of the Light shell.
 * Keep them out of the flex column flow so they paint above the settings rail
 * (and other overflow-clipped descendants) instead of competing as flex items.
 */
.datama-light > .datama-input-select-dropdown {
    flex: none;
    width: max-content;
    max-width: none;
    order: 100;
}

div[data-app="true"] .datama-slide-actions {
    visibility: hidden;
    opacity: 0;
    transition: .1s ease-out;
}

div[data-app="true"]:hover .datama-slide-actions {
    visibility: visible;
    opacity: 1;
    transition: .1s ease-in;
}
div[data-app="true"] .datama-slide-actions .datama-input-label,
div[data-app="true"] .datama-slide-actions .datama-input-select {
    min-width: unset;
    margin: 0 !important;
}
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: .75rem;
}
div[data-app="true"] .datama-slide-actions {
    position: absolute;
    right: 10px;
    top: 0;
}

div[data-app="true"] .datama-grow {
    flex: 1;
}

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

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

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

div[data-app="true"] .no-border {
    border: unset !important;
}

div[data-app="true"] .datama-hidden {
    display: none;
}

div[data-app="true"] .border-none {
    border: none;
}

div[data-app="true"] .border-square {
    border-radius: 0;
}

div[data-app="true"] .border-round-1 {
    border-radius: 5px;
}

div[data-app="true"] .border-round-2 {
    border-radius: 10px;
}

div[data-app="true"] .border-round-3 {
    border-radius: 15px;
}

div[data-app="true"] .border-round-4 {
    border-radius: 20px;
}

div[data-app="true"] .border-round-5 {
    border-radius: 25px;
}

div[data-app="true"] .border-round {
    border-radius: 100em;
}

div[data-app="true"] .border-radius {
    border-radius: var(--border-radius);
}

div[data-app="true"] .border {
    border: var(--border-primary);
}

div[data-app="true"] .border-primary {
    border-color: var(--color-primary);
}

div[data-app="true"] .border-secondary {
    border-color: var(--color-secondary);
}

div[data-app="true"] .border-warning {
    border-color: var(--color-warning);
}

div[data-app="true"] .border-error {
    border-color: var(--color-danger);
}

div[data-app="true"] .relative {
    position: relative;
}

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

div[data-app="true"] .fixed {
    position: fixed;
}

div[data-app="true"] .sticky {
    position: sticky;
}

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

div[data-app="true"] .flex-wrap {
    flex-wrap: wrap;
}

div[data-app="true"] .flex-nowrap {
    flex-wrap: nowrap;
}

div[data-app="true"] .flex-start {
    justify-content: flex-start;
}

div[data-app="true"] .flex-end {
    justify-content: flex-end;
}

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

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

div[data-app="true"] .align-middle {
    vertical-align: middle;
    align-items: center;
}

div[data-app="true"] .justify-start {
    justify-content: flex-start;
}

div[data-app="true"] .justify-end {
    justify-content: flex-end;
}

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

div[data-app="true"] .justify-space-between {
    justify-content: space-between;
}

div[data-app="true"] .justify-space-around {
    justify-content: space-around;
}

div[data-app="true"] .primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

div[data-app="true"] .secondary,
div[data-app="true"] a.datama-link-external {
    color: var(--link-external-color) !important;
    border-color: var(--link-external-color) !important;
}

div[data-app="true"] .primary-light {
    color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

div[data-app="true"] .icon-primary .datama-icon,
div[data-app="true"] .icon-primary .datama-icon path {
    color: var(--color-primary);
    fill: var(--color-primary);
}

div[data-app="true"] .icon-secondary .datama-icon,
div[data-app="true"] .icon-secondary .datama-icon path {
    color: var(--color-secondary);
    fill: var(--color-secondary);
}

div[data-app="true"] .icon-primary-light .datama-icon,
div[data-app="true"] .icon-primary-light .datama-icon path {
    color: var(--color-primary);
    fill: var(--color-primary);
}

div[data-app="true"] .icon-danger .datama-icon,
div[data-app="true"] .icon-danger .datama-icon path {
    color: var(--color-danger);
    fill: var(--color-danger);
}

div[data-app="true"] .dark {
    color: rgb(var(--color-dark-rgb)) !important;
}

div[data-app="true"] .dark-light {
    color: rgb(var(--color-dark-thin-rgb)) !important;
}

div[data-app="true"] .white {
    color: rgb(var(--color-light-rgb)) !important;
}

div[data-app="true"] .small {
    font-size: small !important;
}

div[data-app="true"] .large {
    font-size: large !important;
}

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

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

div[data-app="true"] .underlined {
    position: relative;
}

div[data-app="true"] .underlined::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transition: .1s ease-out;
    opacity: .5;
}

div[data-app="true"] .underlined:hover::after {
    left: 0;
    right: 0;
    transition: .1s ease-in;
    opacity: 1;
}

div[data-app="true"] .p-0 {
    padding: 0 !important;
    border: transparent;
}

div[data-app="true"] .p-1 {
    padding: 5px !important;
}

div[data-app="true"] .p-2 {
    padding: 10px !important;
}

div[data-app="true"] .p-3 {
    padding: 15px !important;
}

div[data-app="true"] .p-4 {
    padding: 20px !important;
}

div[data-app="true"] .p-5 {
    padding: 25px !important;
}

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

div[data-app="true"] .pl-1 {
    padding-left: 5px !important;
}

div[data-app="true"] .pl-2 {
    padding-left: 10px !important;
}

div[data-app="true"] .pl-3 {
    padding-left: 15px !important;
}

div[data-app="true"] .pl-4 {
    padding-left: 20px !important;
}

div[data-app="true"] .pl-5 {
    padding-left: 25px !important;
}

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

div[data-app="true"] .pr-1 {
    padding-right: 5px !important;
}

div[data-app="true"] .pr-2 {
    padding-right: 10px !important;
}

div[data-app="true"] .pr-3 {
    padding-right: 15px !important;
}

div[data-app="true"] .pr-4 {
    padding-right: 20px !important;
}

div[data-app="true"] .pr-5 {
    padding-right: 25px !important;
}

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

div[data-app="true"] .pb-1 {
    padding-bottom: 5px !important;
}

div[data-app="true"] .pb-2 {
    padding-bottom: 10px !important;
}

div[data-app="true"] .pb-3 {
    padding-bottom: 15px !important;
}

div[data-app="true"] .pb-4 {
    padding-bottom: 20px !important;
}

div[data-app="true"] .pb-5 {
    padding-bottom: 25px !important;
}

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

div[data-app="true"] .pt-1 {
    padding-top: 5px !important;
}

div[data-app="true"] .pt-2 {
    padding-top: 10px !important;
}

div[data-app="true"] .pt-3 {
    padding-top: 15px !important;
}

div[data-app="true"] .pt-4 {
    padding-top: 20px !important;
}

div[data-app="true"] .pt-5 {
    padding-top: 25px !important;
}

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

div[data-app="true"] .m-1 {
    margin: 5px !important;
}

div[data-app="true"] .m-2 {
    margin: 10px !important;
}

div[data-app="true"] .m-3 {
    margin: 15px !important;
}

div[data-app="true"] .m-4 {
    margin: 20px !important;
}

div[data-app="true"] .m-auto {
    margin: auto !important;
}

div[data-app="true"] .m-5 {
    margin: 25px !important;
}

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

div[data-app="true"] .ml-1 {
    margin-left: 5px !important;
}

div[data-app="true"] .ml-2 {
    margin-left: 10px !important;
}

div[data-app="true"] .ml-3 {
    margin-left: 15px !important;
}

div[data-app="true"] .ml-4 {
    margin-left: 20px !important;
}

div[data-app="true"] .ml-auto {
    margin-left: auto !important;
}

div[data-app="true"] .ml-5 {
    margin-left: 25px !important;
}

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

div[data-app="true"] .mr-1 {
    margin-right: 5px !important;
}

div[data-app="true"] .mr-2 {
    margin-right: 10px !important;
}

div[data-app="true"] .mr-3 {
    margin-right: 15px !important;
}

div[data-app="true"] .mr-4 {
    margin-right: 20px !important;
}

div[data-app="true"] .mr-auto {
    margin-right: auto !important;
}

div[data-app="true"] .mr-5 {
    margin-right: 25px !important;
}

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

div[data-app="true"] .mb-1 {
    margin-bottom: 5px !important;
}

div[data-app="true"] .mb-2 {
    margin-bottom: 10px !important;
}

div[data-app="true"] .mb-3 {
    margin-bottom: 15px !important;
}

div[data-app="true"] .mb-4 {
    margin-bottom: 20px !important;
}

div[data-app="true"] .mb-auto {
    margin-bottom: auto !important;
}

div[data-app="true"] .mb-5 {
    margin-bottom: 25px !important;
}

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

div[data-app="true"] .mt-1 {
    margin-top: 5px !important;
}

div[data-app="true"] .mt-2 {
    margin-top: 10px !important;
}

div[data-app="true"] .mt-3 {
    margin-top: 15px !important;
}

div[data-app="true"] .mt-4 {
    margin-top: 20px !important;
}

div[data-app="true"] .mt-auto {
    margin-top: auto !important;
}

div[data-app="true"] .mt-5 {
    margin-top: 25px !important;
}

/** NEGATIVE MARGIN*/

div[data-app="true"] .m--1 {
    margin: -5px !important;
}

div[data-app="true"] .m--2 {
    margin: -10px !important;
}

div[data-app="true"] .m--3 {
    margin: -15px !important;
}

div[data-app="true"] .m--4 {
    margin: -20px !important;
}

div[data-app="true"] .m--5 {
    margin: -25px !important;
}

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

div[data-app="true"] .ml--1 {
    margin-left: -5px !important;
}

div[data-app="true"] .ml--2 {
    margin-left: -10px !important;
}

div[data-app="true"] .ml--3 {
    margin-left: -15px !important;
}

div[data-app="true"] .ml--4 {
    margin-left: -20px !important;
}

div[data-app="true"] .ml--5 {
    margin-left: -25px !important;
}

div[data-app="true"] .mr--1 {
    margin-right: -5px !important;
}

div[data-app="true"] .mr--2 {
    margin-right: -10px !important;
}

div[data-app="true"] .mr--3 {
    margin-right: -15px !important;
}

div[data-app="true"] .mr--4 {
    margin-right: -20px !important;
}

div[data-app="true"] .mr--5 {
    margin-right: -25px !important;
}

div[data-app="true"] .mb--1 {
    margin-bottom: -5px !important;
}

div[data-app="true"] .mb--2 {
    margin-bottom: -10px !important;
}

div[data-app="true"] .mb--3 {
    margin-bottom: -15px !important;
}

div[data-app="true"] .mb--4 {
    margin-bottom: -20px !important;
}

div[data-app="true"] .mb--5 {
    margin-bottom: -25px !important;
}

div[data-app="true"] .mt--1 {
    margin-top: -5px !important;
}

div[data-app="true"] .mt--2 {
    margin-top: -10px !important;
}

div[data-app="true"] .mt--3 {
    margin-top: -15px !important;
}

div[data-app="true"] .mt--4 {
    margin-top: -20px !important;
}

div[data-app="true"] .mt--5 {
    margin-top: -25px !important;
}

/** NEGATIVE MARGIN*/

div[data-app="true"] .bg-dark {
    background: rgb(var(--color-dark-rgb));
    color: rgb(var(--color-light-rgb));
}

div[data-app="true"] .bg-white {
    color: rgb(var(--color-dark-rgb));
    background: rgb(var(--color-light-rgb));
}

div[data-app="true"] .bg-primary {
    background: var(--color-primary);
}

div[data-app="true"] .bg-primary * {
    color: rgb(var(--color-light-rgb))
}

div[data-app="true"] .bg-primary .primary,
div[data-app="true"] .bg-primary a {
    color: rgb(var(--color-light-rgb)) !important;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline;
}

div[data-app="true"] .bg-primary .datama-divider {
    border-color: rgba(var(--color-light-rgb), .25) !important;
}

div[data-app="true"] .bg-secondary {
    background: var(--color-secondary);
}

div[data-app="true"] .bg-red {
    background: red;
}

div[data-app="true"] .bg-red * {
    color: rgb(var(--color-light-rgb))
}

div[data-app="true"] .bg-secondary * {
    color: rgb(var(--color-light-rgb));
    fill: rgb(var(--color-light-rgb));
}

div[data-app="true"] .bg-secondary .primary,
div[data-app="true"] .bg-secondary a {
    color: rgb(var(--color-light-rgb)) !important;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline;
}

div[data-app="true"] .bg-secondary .datama-divider {
    border-color: rgba(var(--color-light-rgb), .25) !important;
}

#datama-testing-text,
.datama-testing-text,
#plotter-testing-text,
.plotter-testing-text,
.datama-test-hidden {
    position: absolute !important;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
    z-index: -1;
    top: 0;
    left: 0;
}

div[data-app="true"] .allow-overflow {
    overflow-y: visible !important;
    overflow-x: scroll !important;
}

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

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

div[data-app="true"] .w-75 {
    width: 75%;
}

div[data-app="true"] .w-66 {
    width: 66.66%;
}

div[data-app="true"] .w-50 {
    width: 50%;
}

div[data-app="true"] .w-33 {
    width: 33.33%;
}

div[data-app="true"] .w-25 {
    width: 25%;
}

div[data-app="true"] .ha-100 {
    height: 100%;
    min-height: 100% !important;
    max-height: 100% !important;
}

div[data-app="true"] .ha-75 {
    height: 75%;
    min-height: 75% !important;
    max-height: 75% !important;
}

div[data-app="true"] .ha-66 {
    height: 66.66%;
    min-height: 66.66% !important;
    max-height: 66.66% !important;
}

div[data-app="true"] .ha-50 {
    height: 50%;
    min-height: 50% !important;
    max-height: 50% !important;
}

div[data-app="true"] .ha-33 {
    height: 33.33%;
    min-height: 33.33% !important;
    max-height: 33.33% !important;
}

div[data-app="true"] .ha-25 {
    height: 25%;
    min-height: 25% !important;
    max-height: 25% !important;
}

div[data-app="true"] .fit-content {
    width: fit-content;
}

div[data-app="true"] .disabled:not(.dimension-pill):not(.kpi) {
    cursor: not-allowed !important;
    opacity: .75;
}

div[data-app="true"] .v-btn--disabled * {
    color: rgba(var(--color-dark-rgb), .26) !important;
}

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

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

div[data-app="true"] .top-1 {
    top: 5px !important;
}

div[data-app="true"] .top-2 {
    top: 10px !important;
}

div[data-app="true"] .top-3 {
    top: 15px !important;
}

div[data-app="true"] .top-4 {
    top: 20px !important;
}

div[data-app="true"] .top-5 {
    top: 25px !important;
}

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

div[data-app="true"] .left-1 {
    left: 5px !important;
}

div[data-app="true"] .left-2 {
    left: 10px !important;
}

div[data-app="true"] .left-3 {
    left: 15px !important;
}

div[data-app="true"] .left-4 {
    left: 20px !important;
}

div[data-app="true"] .left-5 {
    left: 25px !important;
}

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

div[data-app="true"] .bottom-1 {
    bottom: 5px !important;
}

div[data-app="true"] .bottom-2 {
    bottom: 10px !important;
}

div[data-app="true"] .bottom-3 {
    bottom: 15px !important;
}

div[data-app="true"] .bottom-4 {
    bottom: 20px !important;
}

div[data-app="true"] .bottom-5 {
    bottom: 25px !important;
}

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

div[data-app="true"] .right-1 {
    right: 5px !important;
}

div[data-app="true"] .right-2 {
    right: 10px !important;
}

div[data-app="true"] .right-3 {
    right: 15px !important;
}

div[data-app="true"] .right-4 {
    right: 20px !important;
}

div[data-app="true"] .right-5 {
    right: 25px !important;
}