/* =============================================================================
   Study chart modebar (was plotly.css)
   ============================================================================= */

/* .map-graph-nano .modebar {
  left:10px !important;
} */

/* .dynamic-graph-nano .modebar-container {
  border: 1px solid blue;
} */

.dynamic-graph-nano .modebar {
  left:50px !important;
  margin-top: 0 !important;
  /* border: 1px solid red;a */
  display: block !important;
  background-color: inherit;
  position: absolute !important;
}

.dynamic-graph-nano .modebar-group {
  background-color: inherit !important;
  display: flex !important;
  /* width: 100% !important; */
  /* border: 1px solid rgb(149, 255, 0) !important; */
}
/* .dynamic-graph-nano .main-svg {
  border: 1px solid rgb(149, 255, 0) !important;
} */


/* 
============================================================================
BENCHMARKING MODULE STYLES
============================================================================

CSS for the benchmarking/nano component system.
All component class names use -nano suffix to prevent conflicts.

Sections:
1. CSS Variables & Base Styles
2. Layout & Containers
3. Card Components
4. Form Inputs & Controls
5. Select & Dropdown Styling
6. Modal Components
7. Context Menu
8. Tables & Data Display
9. Alerts & Notifications
10. Utility Classes

============================================================================
*/


/* ============================================================================
   SECTION 1: CSS VARIABLES & BASE STYLES
   ============================================================================ */

/* body font: see 10_base.css (--font-sans) */

/* font sizes: see the type scale in 10_base.css (--text-*) */

/* ============================================================================
   SECTION 2: LAYOUT & CONTAINERS
   ============================================================================ */

.container-normalization {
    padding: 0 !important;
}

/* Study header (and the Cross-section one): "+", "Delete all", the tools for
   all charts and the chart count, kept at the top while the charts scroll.
   - Flush with the panel's top and side edges: the panel has padding
     (--sidebar-content-padding); a sticky element stops that far from the
     top, so charts showed through the gap above it. The negative top and
     margins cancel it.
   - A thin, see-through strip: the panel's surface at 80% with the charts
     behind it blurred, like the gear menu (.popover.chart-look-menu), and a
     line under it.
   - z-index above the charts' Plotly toolbars (.modebar, z-index 1001),
     which otherwise drew over it. */
.charts-header-nano {
    position: sticky;
    top: calc(-1 * var(--sidebar-content-padding));
    z-index: 1002;
    display: flex;
    gap: 2px;
    padding: 1px 8px;
    justify-content: flex-start;
    align-items: center !important;
    margin: calc(-1 * var(--sidebar-content-padding)) calc(-1 * var(--sidebar-content-padding)) 0;
    background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--color-border);
}

.btn-add-chart-nano {
    border: none;
    padding: 0px 4px 0px 4px !important;
    font-size: 15px; /* icon size, not text - theme-allow */
    line-height: 1.4;
    border-radius: 3px;
}

/* The tools for all charts (layout.study_all_tools_nano), after a thin line
   that separates them from "+" and "Delete all". */
.charts-header-nano__divider {
    width: 1px;
    height: 14px;
    margin: 0 4px;
    background-color: var(--color-border);
}
.study-all-tools {
    display: flex;
    gap: 2px;
}
/* The header's state, from study_chart_watcher (assets/study_charts.js):
   is-empty (no charts), all-pinned, has-stale (a pinned chart's data
   changed). A tool with nothing to do is dimmed and can't be clicked, like
   a disabled button. A chart's own refresh button (a circular arrow, in its
   card header) works the same way: always there, dimmed until that chart is
   pinned and its data changed (the watcher adds is-stale), then in the
   accent color ("Pin and refresh" below). A live chart never needs it. */
.charts-header-nano.is-empty .study-all-tools .btn,
.charts-header-nano:not(.has-stale) #btn-study-refresh-all,
.chart-card-listener-nano .card-header .chart-stale-badge:not(.is-stale) {
    opacity: var(--bs-btn-disabled-opacity, 0.65);
    pointer-events: none;
}
/* The pin for all charts shows the filled pin while every chart is pinned
   (a click then unpins them all), like a card's own pin. */
.study-pin-all__pinned,
.charts-header-nano.all-pinned .study-pin-all__live {
    display: none;
}
.charts-header-nano.all-pinned .study-pin-all__pinned {
    display: inline-block;
}

/* How many charts there are, on the header's right. */
.study-chart-count {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* CHART LOOK: the gear menu's CSS part, as classes on a Study card
   (layout.look_classes / lookClasses in assets/study_charts.js;
   plans/saved-charts.md SC4). "Text color" redefines --chart-text for this
   card only: the color of all the chart's text (23_bridge-plotly.css). Theme
   roles, so it follows dark and light. */
.chart-look--text-muted {
    --chart-text: var(--color-text-muted);
}
.chart-look--text-strong {
    --chart-text: var(--color-text-strong);
}
.chart-look--text-accent {
    --chart-text: var(--color-accent-text);
}
.chart-look--hide-axis_titles .js-plotly-plot [class^="g-x"][class$="title"],
.chart-look--hide-axis_titles .js-plotly-plot [class^="g-y"][class$="title"],
.chart-look--hide-values .js-plotly-plot .textpoint,
.chart-look--hide-values .js-plotly-plot .point > text,
.chart-look--hide-hover .js-plotly-plot .hoverlayer {
    display: none;
}

/* The gear menu (a popover under the gear button): wide enough for the
   choices' full names, and slightly see-through so the chart shows under it
   (the raised surface at 90%, the chart behind blurred a little so the text
   stays easy to read). */
.popover.chart-look-menu {
    --bs-popover-max-width: 380px;
    --bs-popover-bg: color-mix(in srgb, var(--color-surface-raised) 90%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.chart-look-menu .popover-body {
    min-width: 340px;
}
.chart-look-menu__show {
    margin-top: 8px;   /* with the form's gap: the switches set apart from the rows */
}
.chart-look-menu__reset {
    align-self: flex-start;   /* the menu is a column (form-rows): not full width */
}

/* A short message from study_chart_watcher (assets/study_charts.js) when saved
   charts couldn't be restored; empty (and taking no room) otherwise. */
.study-charts-notice {
    margin-left: 8px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* "Delete all" confirmation under the trash button (dbc.Popover): the text
   and button use the group-remove alert's classes (.alert-text, .alert-btn). */
#popover-clear-charts-nano .alert-text {
    margin-bottom: 6px;
}

#chart-container-nano,
#chart-container-cross {
    margin: 0 !important;
    padding-top: 5px;
}

/* Each card sits in a slot (utilities/chart_slots.py), and the slot is the
   row's item: no gutter, like the card had before (.chart-card-listener-nano). */
#chart-container-nano > .chart-slot,
#chart-container-cross > .chart-slot {
    padding: 0;
}

/* ============================================================================
   SECTION 3: CARD COMPONENTS
   ============================================================================ */

/* Card Header (global) */
.card-header {
    height: 30px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Card Layout Variants */
.card-top {
    height: 100% !important;
    margin: 0 !important;
}

.card-bottom {
    margin-top: 10px !important;
    height: 40vh !important;
}
.charts-page-wrapper-nano {
    margin-bottom:25px;
}

/* Cross-section well tooltip (dcc.Tooltip above the hovered marker). Box and
   arrow colors are set on the component as theme roles; text styles here. */
/* Above the chart: the graph sits at z-index 1, and the tooltip's own transform
   gives it a layer of its own at 0, so without this the band (or, with a
   property, the opaque heatmap) was painted over it. */
.dash-loading-parent .dcc-tooltip-bounding-box {
    z-index: 5;
}

/* Glassy but readable: a near-opaque raised surface with a blur behind it.
   The extra .dash-loading-parent step outranks the tooltip's injected CSS. */
.dash-loading-parent .dcc-tooltip-bounding-box .cross-well-tooltip {
    padding: 5px 9px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-raised);
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    line-height: 1.5;
    pointer-events: none;
}

.cross-well-tooltip b {
    color: var(--color-accent-text);   /* the UWI: a title in the highlight color */
    font-weight: 700;
}

/* Pin and refresh are states worth noticing: the accent color while they're
   "on", on a card and in the Study header alike. A pinned chart's pin, a
   chart to refresh; in the header, the pin while every chart is pinned and
   "refresh all" while a chart has something to refresh (when it hasn't, it's
   dimmed: "Study header" above). On the icon, not the button, so it stays
   while the pointer is over the button. */
.chart-card-listener-nano .card-header .bi-pin-angle-fill,
.chart-card-listener-nano .card-header .chart-stale-badge.is-stale i,
.charts-header-nano.all-pinned .study-pin-all__pinned,
.charts-header-nano.has-stale #btn-study-refresh-all i {
    color: var(--color-accent-text);
}

/* Chart Card Listener (Nano) */
.chart-card-listener-nano {
    width: 100% !important;
    padding: 0 !important;
}

.chart-card-listener-nano .card {
    margin: 0 0 0.5rem 0 !important;
    /* The right sidebar floats over the map and its panel is 95% opaque, so
       chart cards paint their own surface; otherwise the map shows faintly
       through the chart (cards are otherwise transparent). */
    background-color: var(--color-surface);
}

.chart-card-listener-nano .card-header {
    position: relative;
    display: flex !important;
    padding: 0.25rem 0.5rem !important;
    padding-left: 0.5rem !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: calc(0.25rem + 1px) calc(0.25rem + 1px) 0rem 0rem !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
}

.chart-card-listener-nano .card-header > div:last-child {
    display: flex !important;
    gap: 0.25rem !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
}

.chart-card-listener-nano .card-header > div:last-child > div {
    display: flex !important;
    gap: 0.25rem !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.chart-card-listener-nano .card-header .btn {
    border: none;
    padding: 0.25rem 0.5rem !important;
    margin: 0 !important;
    line-height: 1 !important;
    min-width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.chart-title-listener-nano {
    width: 80%;
    flex-shrink: 1;
}

/* Card Body */
.card-body-nano {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    position: relative !important;
}

/* Ensure graph stays below modal/context-menu overlays.
   Plotly's internal drag layers can capture pointer events,
   so the graph wrapper needs a lower stacking context. */
.card-body-nano > .dynamic-graph-nano,
.card-body-nano .dynamic-graph-nano {
    position: relative;
    z-index: 1;
}

.card-body-nano > .modal-div-nano,
.card-body-nano .modal-div-nano {
    z-index: 3;
}

/* Labels inside the chart settings panel sit on the dark backdrop, so they
   keep a raised box (as in the original) instead of the transparent label
   used on regular panels. */
.modal-div-nano .input-group-text {
    background-color: var(--color-surface-raised);
}

.card-body-nano > .modal-div-delete-nano,
.card-body-nano .modal-div-delete-nano {
    z-index: 4;
}

/* Map Card */
.map-card-body {
    padding: 0px !important;
    height: 100% !important;
}

/* .map-graph-nano {
    height: 100% !important;
} */

/* Wells Card — .card.wells-card for higher specificity than the global
   .card { margin: 0 ... !important } rule in 41_module-diagnostics.css */
.card.wells-card {
    margin-top: 20px !important;
    margin-left: 5px !important;
    margin-right: 0px !important;
}

.wells-card-header {
    padding-right: 0px;
    align-items: center;
}

/* ============================================================================
   SECTION 4: FORM INPUTS & CONTROLS
   ============================================================================ */

/* Title Input */
.input_title_nano {
    background-color: transparent !important;
    border: none !important;
    font-weight: bold !important;
    margin-bottom: 0 !important;
    padding: 0.1rem;
}

.input_title_nano::selection {
    background-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-field-text) !important;
}

/* Group Title Input */
.chart-tite-listener__groups {
    width: 100%;
    padding: 0px;
}

.input_title__groups {
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 0 !important;
    font-size: var(--text-base);
    color: var(--color-field-text) !important;
}

.input_title__groups::selection {
    background-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-field-text) !important;
}

/* Edit Item Container */
.edit-item {
    background-color: inherit;
    color: var(--color-field-text);
    height: 30px;
    font-size: var(--text-base);
    padding: 0.3rem;
    padding-right: 0.1rem !important;
}

/* Allow multi-select to grow */
.edit-item:has(.dp-select-multi-wrapper) {
    min-height: 30px;
    height: auto;
}

/* Allow range slider input group to grow when it wraps */
.edit-item:has(.input-range-slider) {
    min-height: 30px;
    height: auto;
}

/* Unified Label Styling */
.input-label {
    width: 150px;
    font-size: var(--text-base) !important;
    min-height: 30px;
    height: auto;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

.input-label-120 {
    width: 120px;
    font-size: var(--text-base) !important;
    min-height: 30px;
    height: auto;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

.input-label-125 {
    width: 125px;
    font-size: var(--text-base) !important;
    min-height: 30px;
    height: auto;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

/* Input Number */
.input-number {
    width: 3.5rem;
    height: 30px;
    background-color: var(--color-field);
    color: var(--color-field-text);
    border: 1px solid var(--color-border);
    font-size: var(--text-base);
    padding-left: 0.4rem;
    padding-right: 0.2rem;
    flex-shrink: 0;
}

/* When two `.input-number` sit adjacent in a range InputGroup, Bootstrap
   collapses them with `margin-left: -1px` so their borders overlap.
   Restore the gap so both cells read as separate fields. */
.input-number + .input-number {
    margin-left: 0 !important;
}

/* Hide native spinner arrows on all number inputs across the app.
   Applied globally because it's a UI-consistency call: the up/down
   arrows crowd the field and users edit the value directly. */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Replace Bootstrap's thick blue focus glow with a thin, modern
   1px border in the app's accent (--color-accent-strong) — same hue as the
   range-slider track and dropdown option hover, so focus/hover/active
   all read as one accent. Applies to text/number/select fields
   (Bootstrap), dcc.Dropdown (.Select-control.is-focused / .is-open)
   and the .dpg-search field. */
.form-control:focus,
.form-select:focus,
input[type="number"]:focus,
input[type="text"]:focus,
select:focus,
.Select.is-focused > .Select-control,
.Select.is-open > .Select-control,
.dpg-search:focus {
    border-color: var(--color-focus-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Input Color */
.input-color {
    max-width: 3rem;
    height: 30px;
    flex-shrink: 0;
}

/* Input Text */
.input-text {
    width: 75px;
    height: 30px;
    font-size: var(--text-base);
    flex-shrink: 0;
}

.input-text__search {
    width: auto !important;
}

/* Input Unit Label */
.input-unit {
    font-size: var(--text-base);
    color: var(--color-field-text);
    height: 30px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    flex-shrink: 0;
}

/* Slider Wrapper */
.input-slider-wrapper {
    flex-grow: 1;
    height: 30px;
    padding-top: 10px;
}

/* Range Slider */
.input-range-slider {
    flex: 1 1 auto;
    padding-top: 8px;
    padding-left: 0;
    padding-right: 5px;
    height: 30px;
    min-width: 50px;
}

.input-range-slider-inner {
    padding: 0 !important;
}

.input-range-slider .rc-slider {
    width: 100% !important;
}

/* Input Group with Text */
.input-group-wtext {
    font-size: var(--text-base);
    margin-top: 2px;
}

.input-group-wtext__label {
    width: 125px;
    color: var(--color-field-text);
}

/* ============================================================================
   SECTION 5: SELECT & DROPDOWN STYLING
   ============================================================================ */

/* Single Select (dbc.Select) */
.dp-select {
    font-size: var(--text-base) !important;
    background-color: var(--color-field) !important;
    color: var(--color-field-text);
}

.dp-select.form-select {
    border-color: var(--color-border) !important;
}

/* Specific z-index for select-normalizer-radar */
#select-normalizer-radar {
    position: relative !important;
    z-index: 100 !important;
}

/* Multi Select Wrapper (dcc.Dropdown) */
.dp-select-multi-wrapper {
    flex-grow: 1;
    padding-top: 0px;
}

/* Main dropdown control */
.Select-control {
    padding: 0 !important;
    border-color: var(--color-border) !important;
    border-radius: var(--bs-border-radius-sm);   /* inside a label group: flat on the label's side (21_bridge-dash.css) */
    min-height: 30px !important;
    height: auto !important;
}

/* Multi-value wrapper */
.Select-multi-value-wrapper {
    min-height: 28px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px !important;
    max-height: none !important;
}

/* Placeholder text */
.Select-placeholder {
    line-height: 28px !important;
    color: var(--color-field-text);
    font-size: var(--text-base) !important;
}

/* All dropdown divs */
.Select div { 
    background: var(--color-field) !important;  
    color: var(--color-field-text) !important; 
    font-size: var(--text-base) !important;
}

/* Selected value text */
.Select-value-label {
    color: var(--color-field-text) !important;
    font-size: var(--text-base) !important;
}

/* Input field inside dropdown */
.Select-input {
    height: 28px !important;
}

.Select-input > input {
    line-height: 28px !important;
    padding: 0 !important;
    color: var(--color-field-text) !important;
    font-size: var(--text-base) !important;
}

/* Dropdown menu */
.Select-menu-outer {
    background-color: var(--color-field) !important;
    border-color: var(--color-border) !important;
    font-size: var(--text-base) !important;
}

/* Menu options */
.Select-option {
    background-color: var(--color-field) !important;
    color: var(--color-field-text) !important;
    font-size: var(--text-base) !important;
    padding: 5px 10px;
}

.Select-option:hover {
    background-color: var(--color-state-hover) !important;
}

.Select-option.is-focused {
    background-color: var(--color-accent-subtle) !important;
}

.Select-option.is-selected {
    background-color: var(--color-state-pressed) !important;
}

/* Virtualized lists (most dcc.Dropdowns): the option under the mouse or the
   arrow keys. ".Select div" above paints every div the field color, which hid it. */
.Select .VirtualizedSelectFocusedOption {
    background: var(--color-field-hover) !important;
}

/* Multi-value tags */
.Select-value {
    background-color: var(--color-state-pressed) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-field-text) !important;
    font-size: var(--text-base) !important;
    line-height: 1.1 !important;
    border-radius: 4px !important;
}

/* Remove button on multi-value tags */
.Select-value-icon {
    border-color: var(--color-border-strong) !important;
}

.Select-value-icon:hover {
    background-color: var(--color-border-strong) !important;
    color: var(--color-text-strong) !important;
}

/* Clear button */
.Select-clear-zone {
    color: var(--color-field-text) !important;
}

.Select-clear-zone:hover {
    color: var(--color-text-strong) !important;
}

/* Arrow indicator */
.Select-arrow-zone {
    color: var(--color-field-text) !important;
}

/* Data source select table */
.data-source-select__table {
    padding-left: 0;
    max-width: 600px;
}

/* Select with Label (wlabel variants) */
.dp-select-wlabel-container {
    padding: 0px;
    margin: 0px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.dp-select-wlabel-label {
    font-size: var(--text-base);
    color: var(--color-field-text);
    padding: 0px;
    margin: 0px;
}

.dp-select-wlabel {
    font-size: var(--text-base);
    height: 22px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: var(--color-field);
}

.dp-select-multi-wlabel-label {
    font-size: var(--text-base);
    color: var(--color-field-text);
    padding: 0px;
    margin: 0px;
}

/* ============================================================================
   SECTION 6: MODAL COMPONENTS
   ============================================================================ */

/* ── Normal mode: graph has a fixed height ── */
/* !important needed to override inline style="height:100%" set by responsive=True */
.dynamic-graph-nano {
    width: 100%;
    height: 370px !important;
}

/* ── Full Screen Mode ── */
.full_screen_nano {
    width: 100vw !important;
    position: fixed;
    height: var(--app-frame-height) !important;  /* between the navbar and the status bar */
    top: var(--navbar-height);
    left: 0;
    z-index: 10001;
    background-color: var(--color-surface);
}

.full_screen_nano .card-body-nano {
    height: calc(var(--app-frame-height) - 42px) !important;  /* minus the card header */
    overflow: hidden !important;
}

.full_screen_nano .dynamic-graph-nano {
    height: calc(var(--app-frame-height) - 62px) !important;  /* minus the 42px card header and 20px padding */
}

/* Widen .tab-content so pointer events reach the fullscreen card */
.tab-content:has(.full_screen_nano) {
    width: 100vw !important;
    overflow: visible !important;
}

/* Modal Overlay */
.modal-div-nano {
    position: absolute !important;
    z-index: 3;
    background-color: var(--color-backdrop);
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
}

.modal-div-delete-nano {
    position: absolute !important;
    z-index: 4;
    background-color: color-mix(in srgb, var(--color-backdrop) 60%, transparent);   /* lighter dim behind the dialog */
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
}

/* Modal Content */
.modal-content {
    padding: 5px !important;
    border-radius: 0px 0px 0.25rem 0.25rem !important;
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    opacity: 0.9;
}

.modal-content .edit-item {
    background-color: inherit;
    color: inherit;
    height: 2rem;
    font-size: var(--text-base);
    padding: 0.3rem;
}

.modal-content .trace-style {
    width: 5rem;
}

.modal-content .color-picker {
    width: 5rem;
    padding: 0.3rem;
}

.modal-content .log {
    width: 5rem;
}

.modal-content .check-grids {
    width: 15rem;
}

.modal-content .show-notes {
    width: 10rem;
}

.modal-content h5 {
    text-align: center;
    margin: 10px 0;
}

.modal-content p {
    text-align: center;
    margin: 1px 0;
    font-size: var(--text-base);
}

.modal-content .icon-box {
    text-align: center;
    color: var(--bs-danger);
    font-size: 50px; /* icon size, not text - theme-allow */
    display: inline-block;
    margin-top: 13px;
}

/* Modal Content Nano Specific */
.modal-content-nano .act-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 4rem !important;
    height: 2rem;
    font-size: var(--text-base);
}

.modal-content-nano .input-label {
    width: 100px;
}

.clustering-panel .input-label {
    width: 100px;
}

.clustering-panel .clustering-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.clustering-panel .clustering-actions .btn {
    min-width: 6rem;
}
.clustering-panel .clustering-reverse-colors {
    color: var(--color-field-text) !important;
    font-size: var(--text-base) !important;
    margin-top: 1rem !important;
    margin-left: 5px !important;
}

/* Dim disabled selects (and their sibling label) so it's obvious the
   control doesn't apply to the current classifier type. */
.clustering-panel .dp-select:disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
}

.clustering-panel .input-group:has(.dp-select:disabled) .input-label {
    opacity: 0.4;
}

/* App-wide checkbox treatment: subtle vertical gradient (darker top → lighter
   bottom) plus an inner shadow gives a small inset/in-depth feel, avoiding
   the flat look. No focus glow. Per-checkbox `input_checked_style` inline
   props (e.g. checklist-map-data, checklist-include-unreported-year) still
   win the checked color via inline-style specificity. */
.form-check-input {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-app) 60%, transparent) 0%, color-mix(in srgb, var(--color-bg-app) 25%, transparent) 100%);
    background-color: color-mix(in srgb, var(--color-bg-app) 45%, transparent); /* fallback for :checked overrides */
    border-color: var(--color-border);
    box-shadow: inset 0 1px 2px var(--shadow-color);
}

.form-check-input:focus {
    outline: none;
    box-shadow: inset 0 1px 2px var(--shadow-color);
    border-color: var(--color-border);
}

/* When checked, the checkmark and accent color own the box — no gradient
   underlay, no inner shadow (they'd fight the flat accent fill).
   Bootstrap 5.3 draws the tick (and the switch knob) through these variables,
   so hand them back instead of `background-image: none`, which hid the tick. */
.form-check-input:checked {
    background-image: var(--bs-form-check-bg-image);
    box-shadow: none;
}

.form-switch .form-check-input:checked {
    background-image: var(--bs-form-switch-bg);
}

/* Map-data checklist and unreported-year switch: labels keep the field-text
   level (was inline 'lightgray'); checked map-data labels use the accent. */
.checklist-map-data .form-check-label,
.checklist-include-unreported-year .form-check-label {
    margin-bottom: 0;
    font-size: var(--text-base);
    color: var(--color-field-text);
}

/* "Found: <column> (in <tab>)" after a bottom-table column search (the
   column_search callback writes it). Styled by id because a callback manages
   its className.
   It sits on the right of the tab row, over empty space, and takes NO room
   in the layout. When it took room, the text appearing made the tabs and the
   table jump down a few px, and it kept an empty 18px strip the rest of the
   time.
   - position: absolute takes it out of the layout. #bottom-panel is
     position: relative, so `right` counts from the panel's right edge, and
     with no `top` it stays where it would have been: the top of the tab row.
   - height / line-height: the tab row's height, so the text lines up with
     the tab labels.
   - max-width keeps it off the tab labels (they take about 415px); on a
     panel too narrow for both, it shrinks with "…" and finally disappears. */
#column-search-result {
    position: absolute;
    right: 12px;
    height: var(--bottom-panel-tab-row-height);
    line-height: var(--bottom-panel-tab-row-height);
    max-width: calc(100% - 460px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.checklist-map-data .form-check-label.is-checked {
    color: var(--color-accent-text);
}

/* Reverse Colors checkbox — accent matches the Cluster button. */
.clustering-panel .clustering-reverse-colors .form-check-input:checked {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}

.clustering-panel .clustering-reverse-colors .form-check-input:checked:focus {
    border-color: var(--color-accent-strong);
}

/* Modal Tab */
.modal-tab {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    font-size: var(--text-base);
}

/* ============================================================================
   SECTION 7: CONTEXT MENU
   ============================================================================ */

.main-menu-nano {
    position: absolute;
    visibility: hidden;
    background-color: var(--color-surface-raised);   /* floating menu; the list items inside are transparent */
    color: var(--color-text);
    width: 8rem;
    border-radius: 5px !important;
    border: 1px solid var(--color-border-strong);
    box-shadow: 0px 12px 35px var(--shadow-color);
    z-index: 2;
}

.main-menu-nano .list-group-item {
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.main-menu-nano .list-group-item.disabled,
.list-group-item:disabled {
    color: var(--color-text-subtle);
}

.main-menu-nano .list-group-item:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
}

.main-menu-nano .menu-settings {
    border-top: 1px solid var(--color-border) !important;
}

.main-menu-nano .more {
    display: flex !important;
    justify-content: space-between !important;
}

.more .more-menu {
    position: absolute;
    background-color: var(--color-surface-raised);
    width: 8rem;
    right: -8.05rem;
    top: -5rem;
    box-shadow: 0 5px 10px var(--shadow-color);
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    border: 1px solid var(--color-border-strong);
}

.more:hover .more-menu {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================================
   SECTION 8: TABLES & DATA DISPLAY
   ============================================================================ */

/* Radar Graph */
.radar-graph {
    max-height: 22rem !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    margin-top: 10px !important;
    position: relative !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.radar-graph .js-plotly-plot {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Stats Graph */
.stats-graph {
    height: 20rem !important;
}

/* ── Wells Table Wrapper (removed - button now inline with Data Source) ── */

/* "Select filtered" button — compact, inline with Data Source selector */
.select-all-filtered-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: auto;
    min-height: 30px;

    background: var(--color-field);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--text-base);
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    letter-spacing: 0.02em;
}

.select-all-filtered-btn-inline:hover {
    background: var(--color-field-hover);
    border-color: var(--color-accent-strong);
    color: var(--color-text-strong);
}

.select-all-filtered-btn-inline:active {
    background: var(--color-bg-app);
    border-color: var(--color-accent-strong);
}

/* Bottom Panel Shared Controls (above tabs) */
.bottom-panel__controls {
    padding: 4px 8px;
    /* No bottom line: the only line between the controls and the table is the
       table's own top border (see the tab row below). */
    align-items: center;
    min-height: 38px;
}

/* The bottom panel's tab row (General, Production, Completion, ...).
   - As tall as the table's header row: 32px here, plus the table's top line
     right below it = 33px, the same as the header row with its own line.
     If the table's header height changes, change this variable with it.
   - No lines of its own: Bootstrap's .nav-tabs line under the row is
     removed, and the active tab's accent underline sits directly on the
     table's top border.
   Scoped to #bottom-panel-tabs: other .horizontal-tabs in the app keep
   their look. */
#bottom-panel {
    --bottom-panel-tab-row-height: 32px;
}

#bottom-panel-tabs {
    border-bottom: 0;
}

#bottom-panel-tabs .nav-link {
    display: flex;
    align-items: center;
    height: var(--bottom-panel-tab-row-height);
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;   /* Bootstrap pulls tabs 1px down onto its line; that line is gone */
}

/* Search input in bottom panel controls */
.bottom-panel__search-input {
    font-size: var(--text-base);
    max-width: 180px;
}

/* Bottom Panel Table — height set by JS syncTableHeight */
.bottom-panel__table {
    height: 250px;
}

/* The table runs edge to edge in the bottom panel (no padding: see
   .bottom-panel > .tab-content in 30_app-shell.css). On those three edges a
   neighbour already draws a line: the left panel on the left, the icon
   column on the right, the status bar below. So the grid draws no border
   there, and each edge shows a single line instead of two lines with a gap.
   The #bottom-panel id makes this win over AG Grid's own theme CSS. */
#bottom-panel .bottom-panel__table .ag-root-wrapper {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

/* ── Active Filter Chips Bar ─────────────────────────────────────────── */

.active-filters-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    flex-wrap: wrap;
    min-height: 0;
}

.active-filters-bar:empty {
    display: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    background: var(--color-field);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1px 4px 1px 10px;
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    max-width: 280px;
}

.filter-chip__col {
    font-weight: 600;
    color: var(--color-field-text);
    margin-right: 3px;
    flex-shrink: 0;
}

.filter-chip__val {
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-chip__remove {
    background: none;
    border: none;
    color: var(--color-text-subtle);
    cursor: pointer;
    font-size: 14px; /* icon size, not text - theme-allow */
    padding: 0 3px;
    margin-left: 4px;
    line-height: 1;
    flex-shrink: 0;
}

.filter-chip__remove:hover {
    color: var(--color-danger);
}

.filter-clear-all {
    background: none;
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: 1px 10px;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 2px;
}

.filter-clear-all:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Sort indicator — sits next to the filter badge, collapses when unsorted */
.sort-bar {
    display: flex;
    align-items: center;
}

.sort-bar:empty {
    display: none;
}

.sort-chip {
    display: inline-flex;
    align-items: center;
    background: var(--color-field);
    border: 1px solid var(--color-accent-strong);
    border-radius: 4px;
    padding: 2px 4px 2px 10px;
    font-size: var(--text-base);
    color: var(--color-accent-text);
    white-space: nowrap;
    min-height: 30px;
    max-width: 300px;
}

.sort-chip .filter-chip__col {
    color: var(--color-accent-text);
}

.sort-chip .filter-chip__val {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter badge toggle button */
.filter-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-field);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: var(--text-base);
    color: var(--color-text-subtle);
    white-space: nowrap;
    height: auto;
    min-height: 30px;
    cursor: default;
    pointer-events: none;
}

.filter-badge--active {
    color: var(--color-accent-text);
    border-color: var(--color-accent-strong);
    cursor: pointer;
    pointer-events: auto;
}

.filter-badge--active:hover {
    border-color: var(--color-accent-hover);
    color: var(--color-accent-hover);
}

/* Popover: dark theme + hide arrow */
.filter-popover .popover {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

.filter-popover .popover-body {
    padding: 6px;
}

.filter-popover .popover-arrow::before,
.filter-popover .popover-arrow::after {
    border-bottom-color: var(--color-surface-raised) !important;
    border-top-color: var(--color-surface-raised) !important;
}

.filter-popover .bs-popover-bottom > .popover-arrow::before {
    border-bottom-color: var(--color-border) !important;
}

.filter-popover .bs-popover-bottom > .popover-arrow::after {
    border-bottom-color: var(--color-surface-raised) !important;
}

.filter-popover .bs-popover-top > .popover-arrow::before {
    border-top-color: var(--color-border) !important;
}

.filter-popover .bs-popover-top > .popover-arrow::after {
    border-top-color: var(--color-surface-raised) !important;
}

/* Stats Table (base look: DataTable section of 21_bridge-dash.css) */
#stats-table .dash-spreadsheet-container .dash-spreadsheet-inner [data-dash-column="Gas"] {
    color: var(--fluid-gas);
}

#stats-table .dash-spreadsheet-container .dash-spreadsheet-inner [data-dash-column="Oil"] {
    color: var(--fluid-oil);
}

#stats-table .dash-spreadsheet-container {
    max-height: 300px !important;
    overflow-y: auto !important;
    margin-top: 0px !important;
}

/* Wells Table (base look: DataTable section of 21_bridge-dash.css) */
/* The row-delete "×": DataTable makes it 1.3rem; keep it at the text size, as before */
#table-wells .dash-delete-cell {
    font-size: var(--text-base);
}

#table-wells .dash-spreadsheet-container {
    max-height: 600px !important;
    overflow-y: auto !important;
    margin-top: 0px !important;
}

#table-wells .previous-next-container {
    font-size: var(--text-xs) !important;
}

#table-wells .previous-next-container .current-page {
    font-size: var(--text-xs) !important;
}

#table-wells .previous-next-container button {
    font-size: var(--text-xs) !important;
}

/* Spreadsheet Row Hover */
.dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:hover {
    background-color: var(--color-accent-subtle) !important;
}

/* General Table Container */
.general-table-container {
    width: 100%;
    padding: 0 !important;
    padding-right: 12px !important; 
    margin: 0 !important;
    height: auto !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Key-Value Table */
.kv-container {
    width: 100%;
}

.kv-row {
    padding: 2px 0;
    border-bottom: 1px solid var(--color-border-subtle);
    margin: 0 !important;
}

.kv-row:hover {
    background-color: var(--color-accent-subtle) !important;
}

.kv-key {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--text-base);
    text-align: left;
    padding-left: 0 !important;
}

.kv-value {
    color: var(--color-text);
    font-size: var(--text-base);
    text-align: right;
    padding-right: 0 !important;
}

.table-subtitle {
    color: tan;
    font-size: var(--text-base);
    font-weight: 800;
    padding: 5px 0;
    text-align: left;
    margin: 0;
}

/* ============================================================================
   SECTION 9: ALERTS & NOTIFICATIONS
   ============================================================================ */

.floating-alert {
    position: absolute;
    top: 0px;  
    left: 50%;  
    transform: translateX(-50%);
    z-index: 1000;  
    width: auto;
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.alert-text {
    margin-bottom: 10px;
}

.alert-buttons {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.alert-btn {
    width: 5rem;
    border: 1px solid var(--color-text);
}

.close-btn {
    margin-top: -2px;
    border: none;
    height: 90%;
}

.close-btn:hover {
    background-color: transparent !important;
    color: var(--color-danger); 
}

/* ============================================================================
   SECTION 10: UTILITY CLASSES
   ============================================================================ */

/* Width Helpers */
.w-20 {
    width: 20%;
}

.w-40 {
    width: 40%;
}

/* Action Button */
.act-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 8rem;
    height: 2rem;
    font-size: var(--text-base);
}

/* Accordion */
.accordion-item .accordion-body {
    padding-top: 0;
}

.accordion-item .accordion-header .accordion-button {
    height: 10px;
    font-size: var(--text-md);
}

/* Tooltip */
.tooltip-inner {
    opacity: 0.85;
    font-size: var(--text-sm);
}

.tooltip-arrow::before {
    opacity: 0.85 !important;
}

/* Button Focus */
.btn:focus {
    box-shadow: none;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .kv-key, .kv-value {
        text-align: left !important;
    }
}

/* ============================================================================
   GROUPED DROPDOWN (dpg-*) — categorized, collapsible, searchable
   ============================================================================ */

/* flex-basis 0: with an automatic basis the chips' full width pushed the
   whole field onto a line of its own under its label. */
.dpg-wrapper {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--text-base);
}

/* Hidden state holder — keep mounted for callback API + persistence */
.dpg-hidden-host {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    left: -9999px;
}

/* Trigger row (visible chips area + caret) */
.dpg-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 3px 8px 3px 6px;
    background-color: var(--color-field);
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius-sm, 0.2rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.dpg-trigger:hover { border-color: var(--color-border-strong); }
.dpg-wrapper.is-open .dpg-trigger {
    border-color: var(--color-focus-border);
    box-shadow: none;
}

.dpg-chips-area {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.dpg-chips {
    display: contents;
}

.dpg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--color-state-pressed);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: 3px;
    padding: 1px 4px 1px 6px;
    font-size: var(--text-sm);
    line-height: 1.4;
    max-width: 220px;
}
.dpg-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dpg-chip-x {
    cursor: pointer;
    color: var(--color-text);
    padding: 0 2px;
    font-weight: 600;
}
.dpg-chip-x:hover { color: var(--color-danger); }

/* Multi-select trigger: as many chips (each with its ×) as fit on the line;
   once they don't all fit, the ones that do and then "N selected", with
   every name in the tooltip. Same behavior as every other multi-select
   (21_bridge-dash.css); the measuring is multi_select_fit.js. The trigger
   never grows: picking and removing also happen in the panel. */
.dpg-wrapper[data-multi="true"] .dpg-trigger {
    counter-reset: dpg-selected;
    animation: dd-fit-mount 1ms;    /* lets multi_select_fit.js see it appear */
}

.dpg-wrapper[data-multi="true"] .dpg-chips-area {
    position: relative;             /* holds the chips taken out of the line */
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
}

.dpg-wrapper[data-multi="true"] .dpg-chip {
    flex-shrink: 0;
    counter-increment: dpg-selected;
}

/* A single chip, or the only one shown next to the badge, shrinks and ends
   in "…". */
.dpg-wrapper[data-multi="true"] .dpg-chip:only-child,
.dpg-wrapper[data-multi="true"] .dpg-trigger[data-collapsed] .dpg-chip:first-child {
    flex-shrink: 1;
    min-width: 0;
}

/* Chips that don't fit: out of the line, still laid out for measuring. */
.dpg-wrapper[data-multi="true"] .dpg-chip[data-dd-hidden] {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

.dpg-wrapper[data-multi="true"][data-has-value="true"] .dpg-trigger[data-collapsed] .dpg-chips-area::after {
    content: counter(dpg-selected) " selected";
    flex: none;
    padding: 0 6px;
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--color-accent-subtle);
    color: var(--color-field-text);
    font-size: var(--text-sm);
    line-height: 18px;
    white-space: nowrap;
}

/* Clear (×): empties the selection, multi or single. */
.dpg-clear {
    display: none;
    flex: none;
    padding: 0 2px;
    color: var(--color-field-text);
    font-size: 1.5em;   /* 18px, like the × of the other dropdowns */
    line-height: 1;
    cursor: pointer;
}
.dpg-wrapper[data-has-value="true"] .dpg-clear { display: inline-block; }
.dpg-clear:hover { color: var(--color-danger); }

.dpg-placeholder {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 22px;
    pointer-events: none;
}
.dpg-wrapper[data-has-value="true"] .dpg-placeholder { display: none; }

/* Drawn as a CSS triangle (the "▾" text is hidden) so it matches the arrow of
   every other dropdown and does not depend on the font having that glyph. */
.dpg-caret {
    display: inline-block;
    width: 0;
    height: 0;
    font-size: 0;
    border-style: solid;
    border-width: 5px 5px 2.5px;
    border-color: var(--color-text-muted) transparent transparent;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.dpg-wrapper.is-open .dpg-caret { transform: rotate(180deg); }

/* Panel — accordion of categories */
.dpg-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    display: none;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: var(--shadow-raised);
    max-height: 380px;
    overflow: hidden;
    flex-direction: column;
}
.dpg-wrapper.is-open .dpg-panel {
    display: flex;
}

.dpg-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    background-color: transparent;
    flex-shrink: 0;
}
/* .dpg-search-icon {
    color: #888;
    font-size: 0.75rem;
} */
.dpg-search {
    flex: 1;
    background-color: var(--color-field);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 4px 8px;
    font-size: var(--text-base);
    outline: none;
}
.dpg-search:focus {
    border-color: var(--color-focus-border);
    box-shadow: none;
}

.dpg-accordion {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    padding: 4px 0;
}

/* Group */
.dpg-group {
    border-bottom: 1px solid var(--color-border-subtle);
}
.dpg-group:last-child { border-bottom: none; }

.dpg-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    color: var(--color-accent-text);
    font-weight: 600;
    font-size: var(--text-base);
    transition: background-color 0.12s ease;
}
.dpg-group-header:hover {
    background-color: var(--color-state-hover);
}

.dpg-chevron {
    font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif;   /* glyph icon: keep the system font's triangle */
    display: inline-block;
    font-size: 0.6rem;
    color: var(--color-accent-text);
    transition: transform 0.2s ease;
    width: 10px;
}
.dpg-group[data-expanded="true"] > .dpg-group-header > .dpg-chevron {
    transform: rotate(90deg);
}

.dpg-group-name { flex: 1 1 auto; }
.dpg-group-count {
    color: var(--color-text-subtle);
    font-weight: 400;
    font-size: var(--text-sm);
}

.dpg-group-items {
    display: none;
    padding: 2px 0 6px;
}
.dpg-group[data-expanded="true"] > .dpg-group-items {
    display: block;
}

/* Item (and the same row in the "Selected" list) */
.dpg-item,
.dpg-sel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 26px;
    color: var(--color-field-text);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.dpg-item:hover,
.dpg-sel-item:hover {
    background-color: var(--color-state-hover);
    color: var(--color-text-strong);
}
.dpg-item[data-selected="true"],
.dpg-sel-item[data-selected="true"] {
    background-color: var(--color-accent-subtle);
    color: var(--color-text-strong);
}

.dpg-checkbox {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1px solid var(--color-border-strong);
    border-radius: 2px;
    background-color: var(--color-field);
    flex-shrink: 0;
    position: relative;
    transition: all 0.12s ease;
}
.dpg-item[data-selected="true"] .dpg-checkbox,
.dpg-sel-item[data-selected="true"] .dpg-checkbox {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}
.dpg-item[data-selected="true"] .dpg-checkbox::after,
.dpg-sel-item[data-selected="true"] .dpg-checkbox::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid var(--color-on-accent-strong);   /* same tick color as the Bootstrap checkboxes */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Single-select variant — render as radio */
.dpg-wrapper[data-multi="false"] .dpg-checkbox {
    border-radius: 50%;
}
.dpg-wrapper[data-multi="false"] .dpg-item[data-selected="true"] .dpg-checkbox::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 5px;
    height: 5px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-on-accent-strong);
    transform: none;
}

.dpg-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Selected" list at the top of a multi-select panel (scripts_benchmarking.js
   fills it when the panel opens). Scrolls on its own after ~5 rows so the
   groups stay reachable; hidden while searching and when nothing is selected. */
.dpg-selected {
    flex: none;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
}
.dpg-selected:empty,
.dpg-wrapper.is-searching .dpg-selected { display: none; }

.dpg-selected-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: var(--color-accent-text);
    font-weight: 600;
    font-size: var(--text-base);
}
.dpg-selected-count {
    flex: 1 1 auto;
    color: var(--color-text-subtle);
    font-weight: 400;
    font-size: var(--text-sm);
}
.dpg-clear-all {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: var(--text-sm);
    cursor: pointer;
}
.dpg-clear-all:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
}

/* Search filtering — JS toggles these classes */
.dpg-item.is-hidden { display: none; }
.dpg-group.is-hidden { display: none; }

/* When filtering, force-expand groups that contain matches */
.dpg-group.is-search-expanded > .dpg-group-items { display: block; }
.dpg-group.is-search-expanded > .dpg-group-header > .dpg-chevron {
    transform: rotate(90deg);
}

/* Empty state */
.dpg-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: var(--text-base);
    font-style: italic;
}

/* Scrollbar */
.dpg-accordion::-webkit-scrollbar { width: 8px; }
.dpg-accordion::-webkit-scrollbar-track { background: var(--color-surface-raised); }
.dpg-accordion::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}
.dpg-accordion::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }

/* Override input-group rounding when wrapper is the only sibling */
.edit-item:has(.dpg-wrapper) {
    min-height: 30px;
    height: auto;
}

/* ============================================================================
   Color Palette Picker — Study Chart edit modal
   ----------------------------------------------------------------------------
   Palettes are clustered into Sequential / Diverging / Categorical sections
   via non-selectable header rows inserted into the dropdown options. Each
   selectable option renders as: gradient swatch | palette name. The host
   wrapper makes the dcc.Dropdown sit flush inside the InputGroup the way
   dbc.Select does.
   ============================================================================ */

.dp-select-colorscale-host {
    flex: 1 1 auto;
    min-width: 0;
}

.dp-select-colorscale .Select-control,
.dp-select-colorscale .is-focused .Select-control {
    background-color: var(--color-field) !important;
    border-color: var(--color-border) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
}

/* Vertically center the selected value (swatch + name) inside the closed picker.
   react-select's default `Select-multi-value-wrapper` aligns content to the top;
   flexbox-centering it puts the swatch on the row's vertical midline. */
.dp-select-colorscale .Select-multi-value-wrapper {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    min-height: 28px;
    padding: 0 8px !important;
}

.dp-select-colorscale .Select-value {
    display: flex !important;
    align-items: center !important;
    position: static !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.dp-select-colorscale .Select-value-label {
    display: flex !important;
    align-items: center !important;
}

.dp-select-colorscale .Select-value-label,
.dp-select-colorscale .Select-menu-outer {
    color: var(--color-field-text) !important;
    background-color: var(--color-field) !important;
    font-size: var(--text-base) !important;
}

.dp-select-colorscale .Select-menu-outer {
    border-color: var(--color-border) !important;
    z-index: 1100 !important;
}

.dp-select-colorscale .VirtualizedSelectOption,
.dp-select-colorscale .Select-option {
    background-color: var(--color-field) !important;
    color: var(--color-field-text) !important;
    padding: 4px 8px !important;
}

.dp-select-colorscale .VirtualizedSelectOption:hover,
.dp-select-colorscale .Select-option.is-focused {
    background-color: var(--color-state-hover) !important;
}

/* Disabled options ARE the category headers — make them look like section
   titles, never highlight on hover, never look clickable. */
.dp-select-colorscale .VirtualizedSelectOption.VirtualizedSelectDisabledOption,
.dp-select-colorscale .Select-option.is-disabled {
    cursor: default !important;
    background-color: var(--color-surface-raised) !important;
    padding: 6px 8px 4px !important;
    border-top: 1px solid var(--color-border-subtle);
    opacity: 1 !important;
}

.dp-select-colorscale .VirtualizedSelectOption.VirtualizedSelectDisabledOption:hover,
.dp-select-colorscale .Select-option.is-disabled:hover {
    background-color: var(--color-surface-raised) !important;
}

/* Section header — small caps, accent stripe on the left edge */
.cs-header {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-strong);
    padding: 2px 4px 2px 8px;
    border-left: 3px solid var(--color-border-strong);
    line-height: 1.4;
}

.cs-header-sequential  { border-left-color: var(--data-sequential); }   /* green   — magnitude */
.cs-header-diverging   { border-left-color: var(--data-diverging); }   /* orange  — direction from midpoint */
.cs-header-qualitative { border-left-color: var(--data-qualitative); }   /* purple  — group identity */

/* Option layout: swatch | name */
.cs-option {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    width: 100%;
}

.cs-swatch {
    display: inline-block;
    width: 110px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.cs-name {
    flex: 1 1 auto;
    color: var(--color-field-text);
    font-size: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selected (collapsed) state — keep the picker compact, swatch slightly smaller */
.dp-select-colorscale .Select-value .cs-swatch {
    width: 110px;
    height: 12px;
}

/* dcc.Loading parent wrappers — must fill the host panel so the spinner centers */
.dash-loading-parent {
    position: relative;
    width: 100%;
    height: 100%;
}

.dash-loading-parent--table {
    min-height: 200px;
}

.dash-loading-parent--chart {
    min-height: 180px;
}

.dash-loading-parent--details {
    min-height: 80px;
}

.checklist-include-unreported-year {
    margin-left: 0;
}

/* Data-source checklist — no box; the separator above is delivered by
   the preceding filter-group-box's border-bottom, matching the rest
   of the panel's "single line, only when needed" rhythm. */
.checklist-map-data {
    padding: 0;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   FORM ROWS — one grid: uniform item height + uniform gap.
   ---------------------------------------------------------------------------
   The Filter Wells panel's rhythm, shared by every form of label + field
   rows that opts in with the class `form-rows`: a Study chart's settings
   form (layout.modal_content_nano) and the gear menus (a card's and the
   header's, layout.chart_look_menu_nano / study_all_tools_nano). One height
   and one gap everywhere, so the forms look like one app.

   Two things drive the visual rhythm:
     1. Every item is exactly the same height (`--form-row-h`).
        Without this, multi-selects (dcc.Dropdown) render taller than
        single-selects (dbc.Select) taller than sliders, so even a perfect
        gap looks uneven — the eye reads the item-height variance as
        spacing chaos.
     2. Every gap is exactly `--form-row-gap`, delivered via flex-gap on the
        panel and each `.filter-group-box` (on `.form-rows`). Bootstrap
        `mt-N` and `mb-N` utility classes on the helper InputGroups are
        zeroed with `!important`; the `.sidebar-accordion` prefix gives the
        specificity.
   Also zeroed in a form: the row's own padding (`.edit-item`, 0.3rem), which
   made multi-selects 40px tall and single selects 30px in the Study form.

   The `> *, > * > *` pair also strips the mt-2 on the InputGroup nested
   inside `wrap-surfactant-gpt` (the permission-gated wrapper). */

.sidebar-accordion .filter-panel,
.form-rows {
    --form-row-gap: 8px;
    --form-row-h: 32px;
    /* Resting height of multi-selects here (21_bridge-dash.css). */
    --dd-multi-h: var(--form-row-h);
}

.sidebar-accordion .filter-panel {
    /* Shortest useful slider. A row that can't spare this much moves its
       slider onto a line of its own (see "Resizable panel" below). */
    --filter-slider-min: 96px;
    /* The rows below read the panel's own width, not the screen's. */
    container: filter-panel / inline-size;
}

.sidebar-accordion .filter-panel,
.sidebar-accordion .filter-group-box,
.form-rows {
    display: flex;
    flex-direction: column;
    gap: var(--form-row-gap);
}

.sidebar-accordion .filter-panel > *,
.sidebar-accordion .filter-panel > * > *,
.sidebar-accordion .filter-group-box > *,
.sidebar-accordion .filter-group-box > * > *,
.form-rows .input-group.edit-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Uniform item height across the panel — normalizes single-select,
   multi-select, range-slider and input-group so they all read as the
   same visual row. Scoped to `.input-group.edit-item` so the padding
   reset only touches the outer InputGroup wrapper, not the inner
   dbc.Select which also carries .edit-item and needs its own text
   padding for the "All" label.
   A minimum, not a fixed height: a row grows when its content wraps
   (chips in a multi-select, a slider moved to its own line). A fixed
   height let that content spill over the rows below. */
.sidebar-accordion .filter-panel .input-group.edit-item,
.form-rows .input-group.edit-item {
    height: auto !important;
    min-height: var(--form-row-h) !important;
    padding: 0 !important;
}

/* Single-line items fill exactly one row. Without this, .dp-select /
   .input-number keep their own explicit `height: 30px` and win over
   InputGroup's flex stretch, leaving them shorter than the row. */
.sidebar-accordion .filter-panel .input-group.edit-item > .dp-select,
.sidebar-accordion .filter-panel .input-group.edit-item > .input-number,
.sidebar-accordion .filter-panel .input-group.edit-item > .input-unit,
.sidebar-accordion .filter-panel .input-group.edit-item > .input-range-slider,
.sidebar-accordion .filter-panel .input-group.edit-item > .input-slider-wrapper,
.form-rows .input-group.edit-item > .dp-select,
.form-rows .input-group.edit-item > .form-control {
    height: var(--form-row-h) !important;
    min-height: var(--form-row-h) !important;
}

/* Labels stretch with the row, so the label box always matches its field.
   Multi-selects stay one row high (21_bridge-dash.css). */
.sidebar-accordion .filter-panel .input-group.edit-item > .input-label,
.sidebar-accordion .filter-panel .input-group.edit-item > .input-label-120,
.sidebar-accordion .filter-panel .input-group.edit-item > .input-label-125,
.sidebar-accordion .filter-panel .input-group.edit-item > .dp-select-multi-wrapper,
.form-rows .input-group.edit-item > .input-label,
.form-rows .input-group.edit-item > .dp-select-multi-wrapper {
    height: auto !important;
    min-height: var(--form-row-h) !important;
}

.sidebar-accordion .filter-panel .Select-control,
.form-rows .Select-control {
    min-height: var(--form-row-h) !important;
    height: auto !important;
}

/* In a form, two fields with a height of their own: the color palette
   picker (30px) and the grouped dropdowns' trigger (Y-Metric, Classifier...). */
.form-rows .dp-select-colorscale .Select-control {
    height: var(--form-row-h) !important;
}
.form-rows .dpg-trigger {
    min-height: var(--form-row-h);
}

/* ---- Resizable panel ------------------------------------------------------
   The sidebar can be dragged narrower, and later the panel is the whole
   screen on a phone. Rows adapt to the panel's width:
     - a slider keeps at least --filter-slider-min. When the row can't
       spare that, Bootstrap's input-group wrapping moves it onto its own
       full-width line under the number boxes, and the row grows;
     - on a very narrow panel the label moves above its field (the usual
       phone form), so the field gets the full width. */
.sidebar-accordion .filter-panel .input-group.edit-item > .input-slider-wrapper,
.sidebar-accordion .filter-panel .input-group.edit-item > .input-range-slider {
    flex: 1 1 var(--filter-slider-min);
    min-width: var(--filter-slider-min);
}

/* Space between the max box and the first ring (the empty unit box used
   to provide it; it is only rendered now when there is a unit). */
.sidebar-accordion .filter-panel .input-group.edit-item > .input-range-slider {
    padding-left: 16px;
}

/* The number box next to a slider is the last box in its row, so it gets
   the row's rounded outer corners. Bootstrap squares them because the
   slider (which draws no box) comes after it in the group. */
.sidebar-accordion .filter-panel .input-group.edit-item > .input-number:has(+ .input-slider-wrapper),
.sidebar-accordion .filter-panel .input-group.edit-item > .input-number:has(+ .input-range-slider) {
    border-top-right-radius: var(--bs-border-radius-sm);
    border-bottom-right-radius: var(--bs-border-radius-sm);
}

/* Label above the field once a 150px label would leave the field less
   than about 140px (enough for a chip or a placeholder to read). The
   label becomes a caption (no box), and the field below it gets back the
   rounded left corners Bootstrap squares in a group (!important:
   Bootstrap's input-group selector is more specific). */
@container filter-panel (width < 290px) {
    .sidebar-accordion .filter-panel .input-group.edit-item > .input-label {
        flex: 0 0 100%;
        width: 100%;
        min-height: 0 !important;
        padding: 0 0 2px;
        background-color: transparent;
        border: none;
    }

    .sidebar-accordion .filter-panel .input-group.edit-item > .dp-select-multi-wrapper {
        flex-basis: 100%;
    }

    .sidebar-accordion .filter-panel .input-group.edit-item > .input-label + *,
    .sidebar-accordion .filter-panel .input-group.edit-item > .input-label + .dp-select-multi-wrapper .Select-control {
        margin-left: 0 !important;
        border-top-left-radius: var(--bs-border-radius-sm) !important;
        border-bottom-left-radius: var(--bs-border-radius-sm) !important;
    }
}

.sidebar-accordion .filter-panel .Select-multi-value-wrapper,
.form-rows .Select-multi-value-wrapper {
    min-height: calc(var(--form-row-h) - 2px) !important;
    padding: 0 4px !important;
}

/* Group divider: one thin rule under each group is enough. Constraining
   ourselves to a single side (border-bottom) prevents doubled lines
   where two groups touch and keeps every input at the same left/right
   edge as its siblings outside any group. */
.sidebar-accordion .filter-group-box {
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0 0 var(--form-row-gap) 0;
    margin: 0;
}