/* =============================================================================
   DIAGNOSTICS MODULE - every rule is scoped under .module-diagnostics (the root
   Div of modules/diagnostics/layout.py), so nothing here can restyle another
   module. Colors and sizes come from the theme tokens (docs/THEMING.md).
   ============================================================================= */
/* @import url("https://fonts.googleapis.com/css?family=Roboto|Varela+Round"); */


.module-diagnostics .tooltip-inner {
    opacity: 0.85;
    font-size: var(--text-sm);
}
.module-diagnostics .tooltip-arrow::before {
    opacity: 0.85 !important;
}

/* remove box shadow when focus on button */
.module-diagnostics .btn:focus {
    box-shadow: none;
    /* background-color: none; */
    /* opacity: 0.9; */
}

/* the tabs of the charts page [nav-tabs in bootstrap] */
.module-diagnostics .charts-tabs {
    /* position: fixed; */
    position: sticky;
    top: 0px;
    height: 30px;
    z-index: 2;
    background-color: var(--color-bg-app);
    /* margin-bottom: 5px;  */
    padding-top: 5px;
}

/* style of the charts tab [nav-link in the bootstrap.css]*/
.module-diagnostics .charts-tab {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: var(--text-base);
}

.module-diagnostics .charts-header {
    /* position: relative; */
    position: sticky;
    top: 30px;
    z-index: 2;
    display: flex;
    background-color: var(--color-bg-app);
    padding-top: 0px;
    padding-left: 15px;
    padding-bottom: 0px;
    justify-content: flex-start;
    align-items: center !important;
    border-bottom: 1px solid var(--color-border);
}

.module-diagnostics .btn-add-chart {
    border: none;
    /* padding: 5px; */
    padding: 0px 4px 0px 4px !important;
    /* width:50px; */
    /* height: 50px; */
    /* background-color:var(--bs-secondary); */
    font-size: large; /* icon size, not text - theme-allow */
    /* background-image: url("/assets/icons/grid-plus-light.svg"); */
    border-radius: 3px;
    /* background-color: var(--bs-info); */

}

.module-diagnostics #sync-shapes {
    font-size: var(--text-base);
    margin-left: 20px;
    margin-top: 5px;
}

/* .chart-tabs > .tab-content{
    min-height: 93vh !important;
    overflow-y: auto !important;
    border: 1px solid red !important
} */

/* The module fills the space a module gets (--app-main-height, ends at the
   status bar); the chart area takes whatever the header leaves. */
.module-diagnostics {
    display: flex;
    flex-direction: column;
    height: var(--app-main-height);
}

.module-diagnostics #chart-container {
    margin: 0 !important;
    padding-top: 5px;
    padding-bottom: 12px;
    background-color: var(--color-surface);
    /* Body has overflow:hidden (30_app-shell.css), so the page never scrolls
       on its own — this container must be the scroll viewport. Its height
       comes from the flex column above, so overflow:auto triggers and the
       last chart ends above the status bar. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto !important;
    /* Keeps the cards' layers (edit 1100, delete 1200, spinner 1250, below)
       inside the chart area, so the app's popovers (user menu, About), the
       navbar and the status bar always sit above the charts. */
    isolation: isolate;
}

/* While a card is maximized (.full_screen, 1300) it must cover the whole
   window, navbar included, so the chart area gives up its own layer. */
.module-diagnostics #chart-container:has(.full_screen) {
    isolation: auto;
}

/* Each card sits in a slot (utilities/chart_slots.py). The slot is the row's
   item, so the slot carries the width (one card per row, two from 1200px)
   and the card (chart-card listner, treated as a div) fills its slot.
   Widths are percentages, not vw: `vw` includes the scrollbar, so on
   platforms with classic (non-overlay) scrollbars two 50vw cards exceed
   #chart-container's content box by the scrollbar width and wrap to one
   card per row. A percentage resolves against that content box. */
.module-diagnostics #chart-container > .chart-slot {
    width: 100%;
}

.module-diagnostics .chart-card-listner {
    width: 100% !important;
}

.module-diagnostics .card {
    margin: 0 0.25rem 0.5rem 0 !important;
}

/* To change the card size if screen width >= 1200px */
@media only screen and (min-width : 1200px) {

    .module-diagnostics #chart-container > .chart-slot {
        width: 50%;
    }
}

.module-diagnostics .chart-card-listner .card-header {
    position: relative;
    display: flex !important;
    padding: 0 !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;
}


.module-diagnostics .chart-tite-listener {
    width: 80%;
}

.module-diagnostics .chart-card-listner .card-header .btn {
    border: none;
}

.module-diagnostics .input_title {
    background-color: transparent !important;
    border: none !important;
    font-weight: bold !important;
    margin-bottom: 0 !important;
    padding: 0.1rem;

}

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



.module-diagnostics .card-body-diagnostic {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    position: relative !important;
}

/* full screen style (when maximize button is clicked) */
/* z-index must clear the modal layers below (1100 edit / 1200 delete).
   .chart-card-listner is unpositioned, so a non-maximized card's open
   modal competes directly with this card in the root stacking context
   and would otherwise paint over the maximized chart.
   Cards are transparent (they inherit their panel), so the maximized card
   paints its own surface; otherwise the charts behind it show through. */
.module-diagnostics .full_screen {
    width: 100vw !important;
    position: fixed;
    height: var(--app-vh) !important;
    top: 0;
    left: 0;
    z-index: 1300;
    background-color: var(--color-surface);
}

/* to control the dynamic dash-graph. border-box: the toolbar row on top
   (chart-toolbar-row, 23_bridge-plotly.css) comes out of this height
   instead of making the chart taller. */
.module-diagnostics .dynamic-graph {
    box-sizing: border-box;
    width: 100%;
    height: 39.9vh !important;
    color: aqua !important;
}

.module-diagnostics .dynamic-graph-full-screen {
    height: 95vh !important;
}

/* Plotly modebar — diagnostic charts only. Keep buttons in a single
   horizontal row at the top, transparent background. Scoped to
   .dynamic-graph so other modebars in the app are untouched. */
.module-diagnostics .dynamic-graph .modebar,
.module-diagnostics .dynamic-graph-full-screen .modebar {
    left: 50px !important;
    margin-top: 0 !important;
    display: block !important;
    position: absolute !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.module-diagnostics .dynamic-graph .modebar-group,
.module-diagnostics .dynamic-graph-full-screen .modebar-group {
    display: flex !important;
    flex-direction: row !important;
    background-color: transparent !important;
}

.module-diagnostics .dynamic-graph .modebar-container,
.module-diagnostics .dynamic-graph-full-screen .modebar-container {
    background-color: transparent !important;
}

/* Diagnostics-only: when the edit/delete modal is open inside a chart
   card, lift it above Plotly's modebar (default z-index ~1001) so the
   modebar icons don't bleed through. Scoped via .chart-card-listner so
   benchmarking's .modal-div is unaffected. */
.module-diagnostics .chart-card-listner .modal-div {
    z-index: 1100 !important;
}

/* delete confirmation must sit above the edit modal within the same card */
.module-diagnostics .chart-card-listner .modal-div-delete {
    z-index: 1200 !important;
}

/* Some edit-panel controls (Show Notes, grids, decline fit) redraw the chart
   without closing the modal, so the chart's dcc.Loading spinner would be
   buried under it (1100). Lift the spinner holder — dcc.Loading's second
   child, the one wrapping .dash-spinner — above both modal layers. The
   :has() only matches while a spinner is mounted, and never matches the
   sibling that holds the graph, so the chart stays behind the modal.
   The holder spans the whole card while visible, so it must not intercept
   clicks or it would trap the user behind an invisible overlay. */
.module-diagnostics .chart-card-listner .dash-loading-parent > div:has(.dash-spinner) {
    z-index: 1250;
    pointer-events: none;
}

.module-diagnostics .modal-div {
    position: absolute !important;
    z-index: 3;
    /* half-strength backdrop: the chart stays readable behind the edit panel */
    background-color: color-mix(in srgb, var(--color-backdrop) 60%, transparent);
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;

}

/* style of modal content shown in the chart card */
.module-diagnostics .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;
}


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

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

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

.module-diagnostics .modal-content .log {
    display: flex;                 /* no text line around the option, so it centres on the fields */
    align-items: center;
    width: auto;                   /* its own width; the rest goes to X / Y Data */
    font-size: var(--text-base);   /* box and label at the panel's text size, like X Grids */
}

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

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

/* Bottom row: the three groups take only the width they need (the row spreads
   them, justify='between' in layout.py), so they stay on one line on narrow cards. */
.module-diagnostics .modal-content .diag-options-row > .check-grids,
.module-diagnostics .modal-content .diag-options-row > .show-notes {
    width: auto;
}

/* Bottom row: X / Y Grids, Show Notes and FB / PRD / INJ share one centre
   line. The switch is taller than a checkbox, and the groups aligned their
   content to the top, so Show Notes sat 3px low. */
.module-diagnostics .modal-content .check-grids,
.module-diagnostics .modal-content .show-notes {
    display: flex;
    align-items: center;
}

.module-diagnostics .modal-content .check-grids .form-check-inline,
.module-diagnostics .modal-content .log .form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;          /* box to label, as Bootstrap spaces it */
    min-height: 0;
}

.module-diagnostics .modal-content .check-grids .form-check-inline,
.module-diagnostics .modal-content .show-notes .form-check,
.module-diagnostics .modal-content .log .form-check {
    margin-bottom: 0;
}

/* no space after the last option, so INJ ends at the form's right edge */
.module-diagnostics .modal-content .check-grids .form-check-inline:last-child {
    margin-right: 0;
}

.module-diagnostics .modal-content .check-grids .form-check-input,
.module-diagnostics .modal-content .log .form-check-input {
    margin-top: 0;
}

.module-diagnostics .modal-content .act-btn {
    /* height: 2rem !important; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* display: table-cell;
    vertical-align: middle; */
    padding: 0;
    width: 5rem;
    height: 2rem;
    font-size: var(--text-base);
}

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

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

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


.module-diagnostics .w-20 {
    width: 20%;
}

.module-diagnostics .w-40 {
    width: 40%;
}

.module-diagnostics .charts-tab {
     padding-top: 0.1rem;
     padding-bottom: 0.1rem;
     font-size: var(--text-base);
    color: inherit !important;
}

.module-diagnostics .charts-tab.active {
    color: var(--color-accent-text) !important;
    /* font-weight: 600 !important; */
}


/* style of the chart modal tab [nav-link in the bootstrap.css]*/
.module-diagnostics .modal-tab {
    /* color: red !important; */
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    font-size: var(--text-base);
}

/* ==================== Styles of the context menu ============== */
.module-diagnostics .main-menu {
    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);
    /* padding-bottom: 50px; */
    /* background-color: red; */
    z-index: 2;
}



.module-diagnostics .main-menu .list-group-item {
    /* list-style: none; */
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    /* font-size: x-small; */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    /* color: rgb(33, 37, 41); */
}

.module-diagnostics .main-menu .list-group-item.disabled,
.module-diagnostics .list-group-item:disabled {
    /* color: #6c757d; */
    color: var(--color-text-subtle);
}

.module-diagnostics .main-menu .list-group-item:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    /* border-radius: 5px; */
}

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

.module-diagnostics .main-menu .more {
    display: flex !important;
    justify-content: space-between !important;
    /* position: relative !important; */
    /* background-color: blueviolet; */
}

.module-diagnostics .more .more-menu {
    position: absolute;
    width: 8rem;
    right: -8.05rem;
    /* This value depends on the width */
    top: -5rem;
    box-shadow: 0 5px 10px var(--shadow-color);
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    /* transition: 1s ease; */
    border: 1px solid var(--color-border-strong);
}

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

/* Style of trajectory module */
.module-diagnostics .select-item {
    background-color: inherit;
    color: inherit;
    /* text-transform: uppercase; */
    height: 2rem;
    font-size: var(--text-base);
    padding: 0.3rem;
}

/* ===== X-axis / Y-axis edit row column widths =====
   The X-axis row (Well ID | X Data | log | color) and Y-axis row
   (New Y | Y Data | log | Style) are now built with dbc.Col wrappers
   in layout.py so Bootstrap's grid governs the layout. We size each
   column here so the rows look the same and never wrap. */
.module-diagnostics .modal-content .dd-wid-col,
.module-diagnostics .modal-content .dd-yaxis-col {
    flex: 0 0 11rem;                  /* wide enough for a full UWI with its clear and arrow buttons */
    width: 11rem;
    max-width: 11rem;
    padding-left: 0;
    padding-right: calc(var(--bs-gutter-x) * 0.5);   /* same gap to X / Y Data as between the other fields */
    padding-bottom: 0;
}

/* One right edge for the whole form: the Data Source row's, which
   .data-source-select__table (40_module-benchmarking.css) caps at 600px. On a
   narrow card every row simply fills the card. */
.module-diagnostics .modal-content {
    --diag-form-width: 600px;
}

.module-diagnostics .modal-content .diag-options-row {
    max-width: var(--diag-form-width);
}

.module-diagnostics .modal-content .diag-axis-row {
    max-width: calc(var(--diag-form-width) - 0.3rem);   /* it starts 0.3rem further in, see below */
}

/* The two axis rows use tighter gutters (g-1), which started them 10px right
   of the rows above and below. Pull them left so Well ID and New Y line up
   with the Data Source label and the X Grids checkbox: the container padding
   (0.75rem) less the .edit-item padding those rows show (0.3rem). */
.module-diagnostics .modal-content .diag-axis-row {
    margin-left: calc(0.3rem - 0.75rem);
    margin-right: -0.75rem;   /* and end where the other rows do (Bootstrap's default gutter) */
}

/* The same small gap between the two rows as between the fields, so the
   borders of Well ID / New Y and X / Y Data don't touch. */
.module-diagnostics .modal-content .diag-axis-row + .diag-axis-row {
    margin-top: 0;
}
.module-diagnostics .modal-content .dd-xcol-col,
.module-diagnostics .modal-content .dd-ycol-col {
    flex: 1 1 0;                      /* X / Y Data take whatever the row has left */
    width: auto;
    max-width: none;
    min-width: 0;
}

/* Make the inner items fill their column. The dbc.Select items already
   use `edit-item w-*`; reset their width to 100% now that the column
   does the sizing. */
.module-diagnostics .modal-content .dd-wid-col > .dd-wid,
.module-diagnostics .modal-content .dd-xcol-col > .edit-item,
.module-diagnostics .modal-content .dd-yaxis-col > .edit-item,
.module-diagnostics .modal-content .dd-ycol-col > .edit-item {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    
}

/* Well ID dropdown (dcc.Dropdown) — match the look/height of the
   sibling dbc.Select items. */
.module-diagnostics .modal-content .dd-wid {
    height: 2rem;
    font-size: var(--text-base);
    background-color: inherit;
    color: inherit;
}

.module-diagnostics .modal-content .dd-wid .Select-control {
    height: 30px !important;
    min-height: 2rem;
    background-color: inherit;
    border-color: var(--color-border) !important;
    /* border: 1px solid yellow !important; */
}

.module-diagnostics .modal-content .dd-wid .Select-multi-value-wrapper {
    /* border: 3px solid pink !important; */
    height: 30px !important;
}

.module-diagnostics .modal-content .dd-wid .Select-placeholder,
.module-diagnostics .modal-content .dd-wid .Select-value,
.module-diagnostics .modal-content .dd-wid .Select-input {
    padding-left: 0.3rem !important;   /* text starts where New Y's and X Data's do */
}

.module-diagnostics .modal-content .dd-wid .Select-placeholder,
.module-diagnostics .modal-content .dd-wid .Select-value {
    line-height: 2rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* border: 2px solid green !important; 
    height: 10px !important; */
}

.module-diagnostics .modal-content .dd-wid .Select-input {
    height: 2rem;
}

.module-diagnostics .modal-content .dd-wid .Select-input > input {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 2rem;
}


/* #parameter-dd-1 .Select, .Select div, .Select input,.Select span {  */
/* !!!!!!class name doesn't work here. check why */
.module-diagnostics #parameter-dd-1 .Select div,
.module-diagnostics #formation-dd .Select div,
.module-diagnostics #completion-dd .Select div,
.module-diagnostics #well-dd .Select div { 
    background: var(--color-field) !important;  /*to change the background color of the options*/
    color: var(--color-field-text) !important;  /*to change the color of the options */
    font-size: var(--text-base) !important;
    }

/* HD Tab Style: the Decline Analysis results table (a dash DataTable).
   DataTable injects light defaults at runtime (white cells, monospace font)
   and writes each cell's border inline, so the rules below carry the
   .dash-spreadsheet-container step for specificity and !important on the
   border color only. Row hover comes from the shared rule in
   40_module-benchmarking.css ("Spreadsheet Row Hover"). */
.module-diagnostics .table-hd-fit .dash-spreadsheet-container .dash-spreadsheet-inner table {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    --selected-background: var(--color-accent-subtle);   /* clicked cell */
}

.module-diagnostics .table-hd-fit .dash-spreadsheet-container .dash-spreadsheet-inner th,
.module-diagnostics .table-hd-fit .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border) !important;
}

.module-diagnostics .table-hd-fit .dash-spreadsheet-container .dash-spreadsheet-inner td[data-dash-column="Lower Limit"] {
    color: var(--color-danger);
}

.module-diagnostics .table-hd-fit .dash-spreadsheet-container .dash-spreadsheet-inner td[data-dash-column="Upper Limit"] {
    color: var(--color-success);
}

.module-diagnostics .switch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.module-diagnostics .switch-label {
    margin-top: 5px;  /* Adjust as needed */
}