/* ==================================================================
 * Charts "Clean Light" (xplain.ux charts: column, pareto, line, area,
 * donut) - DOM parts of the charts: legend, tooltip, drilldown stepper,
 * title, donut center. The canvas parts (axes, grid, series) are styled
 * in xplain.ux.chart.Style.
 *
 * No SASS / theme rebuild required. Rules are prefixed with "body" and
 * use !important to win against the theme build and dark-theme.css.
 * ================================================================== */

:root {
    --xd-teal-50:   #F1FBFA;
    --xd-teal-200:  #C0EAE7;
    --xd-teal-500:  #589999;
    --xd-teal-700:  #3F7373;
    --xd-slate-900: #2A3138;
    --xd-slate-600: #7E8B99;
    --xd-slate-500: #97A2AD;
    --xd-slate-400: #B4BCC4;
    --xd-slate-200: #E7EAED;
    --xd-font:      Inter, Arial, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Title                                                               */
/* ------------------------------------------------------------------ */

body span.chartTitle {
    font-family: var(--xd-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--xd-slate-900) !important;
}

/* chart toolbar (title + drilldown stepper): scrolls horizontally if the window is too
   narrow - a thin, unobtrusive scrollbar instead of the gray system one */
body .x-toolbar:has(span.chartTitle),
body .x-toolbar:has(span.chartTitle) * {
    scrollbar-width: thin;
    scrollbar-color: var(--xd-slate-200) transparent;
}

body .x-toolbar:has(span.chartTitle) ::-webkit-scrollbar,
body .x-toolbar:has(span.chartTitle)::-webkit-scrollbar {
    height: 4px;
}

body .x-toolbar:has(span.chartTitle) ::-webkit-scrollbar-thumb,
body .x-toolbar:has(span.chartTitle)::-webkit-scrollbar-thumb {
    background: var(--xd-slate-200);
    border-radius: 999px;
}

body .x-toolbar:has(span.chartTitle) ::-webkit-scrollbar-track,
body .x-toolbar:has(span.chartTitle)::-webkit-scrollbar-track {
    background: transparent;
}

body.oe-theme-dark .x-toolbar:has(span.chartTitle),
body.oe-theme-dark .x-toolbar:has(span.chartTitle) * {
    scrollbar-color: var(--oe-border) transparent;
}

/* ------------------------------------------------------------------ */
/* Legend: one row above the chart, dots instead of boxes, no border   */
/* ------------------------------------------------------------------ */

body .x-legend.xd-chart-legend,
body .x-legend.xd-chart-legend .x-legend-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Chart background always in card color. ".dashboard .x-panel-body-default"
   (grey canvas #f4f5fa) hits every panel body as long as the class "dashboard"
   sits on the <body> (start page, removed again with a delay when the XOE
   starts). The legend is transparent and docked inside the chart panel, but
   the plot body only covers the area next to it - behind the legend shows
   the body of the panel that HOLDS the chart (donut: right half grey). Hence
   both: the plot body and the body of the parent panel. Independent of
   "body.dashboard", so it also holds if the class stays on the body. Color =
   xplain.ux.chart.Style tokens.card. */
body .x-draw-container > .x-panel-bodyWrap > .x-panel-body-default,
body .x-panel-body-default:has(> .x-draw-container) {
    background: #ffffff !important;
}

body.oe-theme-dark .x-draw-container > .x-panel-bodyWrap > .x-panel-body-default,
body.oe-theme-dark .x-panel-body-default:has(> .x-draw-container) {
    background: #1e2129 !important;
}

/* legend above the chart: right-aligned */
body .x-legend.xd-chart-legend.x-legend-horizontal .x-legend-inner {
    text-align: right !important;
    padding: 2px 8px 6px 8px !important;
}

body .x-legend.xd-chart-legend .x-legend-container .x-legend-item {
    position: relative !important;
    border: none !important;
    background: transparent !important;
    /* gap on the left: the last item ends flush with the right edge */
    margin: 0 0 0 12px !important;
    padding: 2px 0 2px 13px !important;
    font-family: var(--xd-font) !important;
    font-size: 11px !important;
    line-height: 16px !important;
    color: var(--xd-slate-600) !important;
}

body .x-legend.xd-chart-legend .x-legend-container .x-legend-item .x-legend-item-marker {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: -4px !important;
    border-radius: 50% !important;
    border: none !important;
}

body .x-legend.xd-chart-legend .x-legend-item-inactive {
    opacity: .35 !important;
}

/* donut: legend on the right as grid "dot | name | value | %" */
body .x-legend.xd-donut-legend .x-legend-inner {
    padding: 0 12px 0 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

body .x-legend.xd-donut-legend .x-legend-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 100% !important;
    width: 100% !important;
}

body .x-legend.xd-chart-legend.xd-donut-legend .x-legend-container .x-legend-item {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) auto 44px !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
    font-size: 12px !important;
    cursor: pointer;
}

body .xd-donut-legend .xd-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

body .xd-donut-legend .xd-legend-name {
    color: var(--xd-slate-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .xd-donut-legend .xd-legend-value {
    color: var(--xd-slate-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body .xd-donut-legend .xd-legend-pct {
    color: var(--xd-slate-500);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* not enough room for the donut: first the absolute values, then the percentages are dropped
   (GenericPieChart.updateLegendLayout); the names are shortened by the ellipsis above */
body .x-legend.xd-chart-legend.xd-donut-legend.xd-legend-novalues .x-legend-container .x-legend-item {
    grid-template-columns: 10px minmax(0, 1fr) 44px !important;
}

body .x-legend.xd-chart-legend.xd-donut-legend.xd-legend-names .x-legend-container .x-legend-item {
    grid-template-columns: 10px minmax(0, 1fr) !important;
}

body .xd-donut-legend.xd-legend-novalues .xd-legend-value,
body .xd-donut-legend.xd-legend-names .xd-legend-value,
body .xd-donut-legend.xd-legend-names .xd-legend-pct {
    display: none;
}

body .x-legend.xd-donut-legend .x-legend-item-inactive {
    opacity: .4 !important;
}

/* ------------------------------------------------------------------ */
/* Donut: sum + unit in the center                                     */
/* ------------------------------------------------------------------ */

body .xd-donut-center {
    position: absolute;
    z-index: 5;
    text-align: center;
    pointer-events: none;
    font-family: var(--xd-font);
    white-space: nowrap;
}

body .xd-donut-center .xd-donut-total {
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
    color: var(--xd-slate-900);
}

body .xd-donut-center .xd-donut-unit {
    font-size: 11px;
    color: var(--xd-slate-500);
}

/* ------------------------------------------------------------------ */
/* Tooltip                                                             */
/* ------------------------------------------------------------------ */

body .x-tip.xd-chart-tip {
    background: var(--xd-slate-900) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(42, 49, 56, .22) !important;
}

body .x-tip.xd-chart-tip .x-tip-body {
    color: #FFFFFF !important;
    font: 11px/1.5 var(--xd-font) !important;
    padding: 8px 11px !important;
}

body .x-tip.xd-chart-tip .xd-tip-title {
    font-weight: 600;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .x-tip.xd-chart-tip .xd-tip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

body .x-tip.xd-chart-tip .xd-tip-row b {
    font-weight: 600;
}

body .x-tip.xd-chart-tip .xd-tip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Drilldown stepper (hierarchy levels in the chart toolbar)           */
/* ------------------------------------------------------------------ */

body .x-toolbar a.x-btn.xd-drill-step {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: 3px 5px !important;
    box-shadow: none !important;
    transition: color .15s ease, background .15s ease;
}

body .x-toolbar a.x-btn.xd-drill-step .x-btn-inner {
    font-family: var(--xd-font) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--xd-slate-400) !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

body .x-toolbar a.x-btn.xd-drill-step.x-btn-over {
    background: var(--xd-teal-50) !important;
}

body .x-toolbar a.x-btn.xd-drill-step.x-btn-over .x-btn-inner {
    color: var(--xd-teal-700) !important;
}

body .x-toolbar a.x-btn.xd-drill-step.x-btn-pressed {
    background: var(--xd-teal-50) !important;
    border-color: var(--xd-teal-200) !important;
    padding: 3px 9px !important;
}

body .x-toolbar a.x-btn.xd-drill-step.x-btn-pressed .x-btn-inner {
    color: var(--xd-teal-700) !important;
    font-weight: 700 !important;
}

body .x-toolbar .xd-drill-sep {
    color: var(--xd-slate-400) !important;
    padding: 0 !important;
    margin: 0 1px !important;
    line-height: 12px !important;
}

body .x-toolbar .xd-drill-sep svg {
    display: block;
}

/* ================================================================== */
/* Dark theme                                                          */
/* ================================================================== */

body.oe-theme-dark span.chartTitle {
    color: var(--oe-text) !important;
}

body.oe-theme-dark .attribute-window .x-legend.xd-chart-legend .x-legend-container .x-legend-item,
body.oe-theme-dark .x-legend.xd-chart-legend .x-legend-container .x-legend-item {
    background: transparent !important;
    color: var(--oe-text-dim) !important;
}

body.oe-theme-dark .x-legend.xd-chart-legend,
body.oe-theme-dark .x-legend.xd-chart-legend .x-legend-container {
    background: transparent !important;
}

body.oe-theme-dark .xd-donut-legend .xd-legend-name,
body.oe-theme-dark .xd-donut-center .xd-donut-total {
    color: var(--oe-text) !important;
}

body.oe-theme-dark .xd-donut-legend .xd-legend-value {
    color: var(--oe-text-dim) !important;
}

body.oe-theme-dark .xd-donut-legend .xd-legend-pct,
body.oe-theme-dark .xd-donut-center .xd-donut-unit {
    color: var(--oe-text-muted) !important;
}

body.oe-theme-dark .x-tip.x-tip-default.xd-chart-tip {
    background: var(--oe-elevated) !important;
    border: 1px solid var(--oe-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}

body.oe-theme-dark .x-tip.xd-chart-tip .x-tip-body {
    color: var(--oe-text) !important;
}

body.oe-theme-dark .x-toolbar a.x-btn.xd-drill-step .x-btn-inner {
    color: var(--oe-text-muted) !important;
}

body.oe-theme-dark .x-toolbar a.x-btn.xd-drill-step.x-btn-over,
body.oe-theme-dark .x-toolbar a.x-btn.xd-drill-step.x-btn-pressed {
    background: rgba(88, 153, 153, .16) !important;
}

body.oe-theme-dark .x-toolbar a.x-btn.xd-drill-step.x-btn-pressed {
    border-color: rgba(104, 204, 198, .35) !important;
}

body.oe-theme-dark .x-toolbar a.x-btn.xd-drill-step.x-btn-over .x-btn-inner,
body.oe-theme-dark .x-toolbar a.x-btn.xd-drill-step.x-btn-pressed .x-btn-inner {
    color: #68CCC6 !important;
}

body.oe-theme-dark .x-toolbar .xd-drill-sep {
    color: var(--oe-text-muted) !important;
}

/* ================================================================== */
/* Dialog "X-Achse einschränken" (xplain.ux.chart.StatesSelector)     */
/* Window, header, fields (.xdField) and footer buttons come from the  */
/* shared dialog look .xdDialog (resources/message-dialogs.css) - here */
/* only the option rows and the from / to range.                       */
/* ================================================================== */

body .xdStatesDialog .x-window-body,
body .xdStatesDialog .x-panel-body,
body .xdStatesDialog .x-form-item-body {
    background: transparent !important;
    border: 0 !important;
}

/* options: one selectable row each, over the full width */
body .xdStatesDialog .xdOption {
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #e7e9f2;
    border-radius: 10px;
    margin: 0 0 8px 0 !important;
    padding: 9px 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

body .xdStatesDialog .xdOption:hover {
    border-color: #c9cfe0;
    background: #f8f9fc;
}

body .xdStatesDialog .xdOption.x-form-cb-checked {
    border-color: #417dbf;
    background: #eef0fe;
}

body .xdStatesDialog .xdOption .x-form-cb-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #171a26;
    cursor: pointer;
}

body .xdStatesDialog .xdOption.x-form-cb-checked .x-form-cb-label {
    font-weight: 600;
}

body .xdStatesDialog .xdOption .x-form-radio {
    color: #9298ab;
}

body .xdStatesDialog .xdOption.x-form-cb-checked .x-form-radio {
    color: #417dbf;
}

/* from / to: indented below the option "manually" */
body .xdStatesDialog .xdStatesRange {
    margin: -2px 0 8px 0;
    padding: 2px 0 0 30px;
    transition: opacity 150ms ease;
}

body .xdStatesDialog .xdStatesRange.x-item-disabled {
    opacity: .45;
}

body .xdStatesDialog .xdStatesRange .xdField .x-form-item-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding-bottom: 4px;
}

body .xdStatesDialog .xdStatesRange .xdField input.x-form-text {
    height: 34px;
    padding: 0 10px;
}

/* combobox: the frame sits on the trigger wrap only - the text wrap inside it would add a
   second frame (a line in front of the arrow) */
body .xdStatesDialog .xdField .x-form-trigger-wrap .x-form-text-wrap {
    border: 0 !important;
    border-radius: 0;
}

/* arrow of the combobox: only the glyph, no own box next to the field */
body .xdStatesDialog .xdField .x-form-trigger {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #9298ab !important;
    width: 28px;
}

/* dark theme */
body.oe-theme-dark .xdStatesDialog .xdOption {
    border-color: var(--oe-border);
    background: transparent;
}

body.oe-theme-dark .xdStatesDialog .xdOption:hover {
    border-color: var(--oe-input-border);
    background: var(--oe-hover);
}

body.oe-theme-dark .xdStatesDialog .xdOption.x-form-cb-checked {
    border-color: var(--oe-accent);
    background: rgba(91, 140, 255, .12);
}

body.oe-theme-dark .xdStatesDialog .xdOption .x-form-cb-label {
    color: var(--oe-text);
}

body.oe-theme-dark .xdStatesDialog .xdOption .x-form-radio {
    color: var(--oe-text-dim);
}

body.oe-theme-dark .xdStatesDialog .xdOption.x-form-cb-checked .x-form-radio {
    color: var(--oe-accent);
}

/* ------------------------------------------------------------------ */
/* Sankey chart of a sequence (xplain.ux.chart.GenericSankeyChart):    */
/* key numbers at the nodes, category texts in a clickable legend      */
/* above (xd-sankey--top) or right of the chart (xd-sankey--right)     */
/* ------------------------------------------------------------------ */

body .xd-sankey {
    --xd-sankey-bg:         #FFFFFF;
    --xd-sankey-text:       #55606C;
    --xd-sankey-key-text:   #2A3138;
    --xd-sankey-key-border: #D2D7DC;
    --xd-sankey-pct:        #3F7373;
    --xd-sankey-sel-bg:     var(--xd-teal-50);
    --xd-sankey-sel-border: var(--xd-teal-500);

    position: absolute;
    inset: 0;
    display: flex;
    gap: 12px;
    box-sizing: border-box;
    /* left: room for the selection set marker of the window */
    padding: 8px 12px 8px 34px;
    background: var(--xd-sankey-bg);
    font-family: var(--xd-font);
}

body .xd-sankey.xd-sankey--top {
    flex-direction: column;
}

body .xd-sankey.xd-sankey--right {
    flex-direction: row-reverse;
}

body .xd-sankey .xd-sankey-legend {
    display: grid;
    gap: 4px 16px;
    flex: 0 0 auto;
    align-content: start;
}

body .xd-sankey.xd-sankey--top .xd-sankey-legend {
    max-height: 40%;
    overflow-y: auto;
}

body .xd-sankey.xd-sankey--right .xd-sankey-legend {
    grid-template-columns: minmax(0, 1fr);
    width: 200px;
    overflow-y: auto;
}

body .xd-sankey .xd-sankey-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--xd-sankey-bg);
    text-align: left;
    font-family: var(--xd-font);
    font-size: 13px;
    line-height: 1.35;
    color: var(--xd-sankey-text);
    cursor: pointer;
    transition: all .15s ease;
}

body .xd-sankey .xd-sankey-legend-item:focus {
    outline: none;
}

body .xd-sankey .xd-sankey-legend-item:focus-visible {
    outline: 2px solid var(--xd-sankey-sel-border);
    outline-offset: 1px;
}

body .xd-sankey .xd-sankey-legend-item.is-selected {
    background: var(--xd-sankey-sel-bg);
    border-color: var(--xd-sankey-sel-border);
}

body .xd-sankey .xd-sankey-legend-key,
body .xd-sankey .xd-sankey-key-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--xd-sankey-key-border);
    border-radius: 4px;
    background: var(--xd-sankey-bg);
    font-family: var(--xd-font);
    font-weight: 600;
    color: var(--xd-sankey-key-text);
}

body .xd-sankey .xd-sankey-legend-key {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
}

body .xd-sankey .xd-sankey-legend-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 2px;
}

body .xd-sankey .xd-sankey-legend-text {
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

body .xd-sankey .xd-sankey-area {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body .xd-sankey .sankeychrt {
    position: absolute;
    inset: 0;
}

body .xd-sankey .xd-sankey-keys {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body .xd-sankey .xd-sankey-key {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    pointer-events: auto;
}

body .xd-sankey .xd-sankey-key-num {
    min-width: 18px;
    height: 16px;
    padding: 0 3px;
    font-size: 10.5px;
    transition: border-color .15s ease;
}

body .xd-sankey .xd-sankey-key.is-active .xd-sankey-key-num {
    border-color: var(--xd-sankey-sel-border);
}

body .xd-sankey .xd-sankey-key-pct {
    font-family: var(--xd-font);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 16px;
    color: var(--xd-sankey-pct);
    white-space: nowrap;
    text-shadow: 0 0 2px var(--xd-sankey-bg), 0 0 2px var(--xd-sankey-bg),
                 0 0 3px var(--xd-sankey-bg), 0 0 3px var(--xd-sankey-bg);
}

/* dark theme */
body.oe-theme-dark .xd-sankey {
    --xd-sankey-bg:         #1e2129;
    --xd-sankey-text:       #93a4bd;
    --xd-sankey-key-text:   #e6e8eb;
    --xd-sankey-key-border: #394051;
    --xd-sankey-pct:        #68CCC6;
    --xd-sankey-sel-bg:     rgba(88, 153, 153, .16);
    --xd-sankey-sel-border: #589999;
}

/* attribute table (xplain.ux.attribute.Tree): the first column stays pinned to the left while
   the table is scrolled horizontally. Body cells stick via CSS; the first header is shifted
   by JS (Tree.initStickyFirstColumn), because Ext scrolls the header row on its own.
   The sticky cell needs an opaque background - it inherits the row's (hover/selected) color. */
body .xd-sticky-first-col .x-grid-item > tbody,
body .xd-sticky-first-col .x-grid-item > tbody > tr {
    background-color: inherit;
}

body .xd-sticky-first-col .x-grid-item > tbody > tr > td.x-grid-cell:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: inherit;
}

body .xd-sticky-first-col.xd-scrolled-x .x-grid-item > tbody > tr > td.x-grid-cell:first-child,
body .x-column-header.xd-sticky-header {
    box-shadow: 6px 0 6px -6px rgba(15, 23, 42, .22);
}

body .x-column-header.xd-sticky-header {
    z-index: 3;
}

body.oe-theme-dark .xd-sticky-first-col.xd-scrolled-x .x-grid-item > tbody > tr > td.x-grid-cell:first-child,
body.oe-theme-dark .x-column-header.xd-sticky-header {
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .6);
}