/* @import url("https://fonts.googleapis.com/css?family=Roboto|Varela+Round"); */
@import url("https://fonts.googleapis.com/css?family=Poppins:wght@400,;500;600;700&display=swap");

body {
    /* font-family: 'Varela Round', sans-serif; */
    font-family: 'Poppins', sans-serif;
}

.tooltip-inner{
    opacity: 0.85;
    font-size: smaller;
}
.tooltip-arrow::before {
    opacity: 0.85 !important;
}

.dark-mode-span {
    /* position: absolute; */
    position: fixed;
    z-index: 3;
    top: 5px;
    right: 10px;

}
.dark-mode-span .form-check-input {
    cursor: pointer;
}

.dark-mode-span .form-check-input:checked {
    background-color: gray;
    border-color: gray;
}
/* remove box shadow when focus on button */
.btn:focus {
    box-shadow: none;
    /* background-color: none; */
    /* opacity: 0.9; */
}

/* the tabs of the charts page [nav-tabs in bootstrap] */
.charts-tabs {
    /* position: fixed; */
    position: sticky;
    top: 0px;
    height: 30px;
    z-index: 2;
    background-color: #F8F8F8;
    /* margin-bottom: 5px;  */
    padding-top: 5px;
}

/* style of the charts tab [nav-link in the bootstrap.css]*/
.charts-tab {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: small;
}

.charts-header {
    /* position: relative; */
    position: sticky;
    top: 30px;
    z-index: 2;
    display: flex;
    background-color: white;
    padding-top: 0px;
    padding-left: 15px;
    padding-bottom: 0px;
    justify-content: flex-start;
    align-items: center !important;
    border-bottom: 1px solid rgb(222, 226, 230);
}

.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;
    /* background-image: url("/assets/icons/grid-plus-light.svg"); */
    border-radius: 3px;
    /* background-color: var(--bs-info); */

}

#sync-shapes {
    font-size: small;
    margin-left: 20px;
    margin-top: 5px;
}

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

#chart-container {
    margin: 0 !important;
    padding-top: 5px;
    padding-bottom: 12px;
    background-color: #F8F8F8;
    /* Body has overflow:hidden (ilayout.css), so the page never scrolls
       on its own — this container must be the scroll viewport. Cap its
       height so overflow:auto actually triggers, and reserve room at the
       bottom for the fixed status-bar so the last chart's x-axis label
       isn't hidden underneath it.
       Subtracted offsets: navbar (30) + html.Br spacing (~16)
       + dbc.Tabs nav (~30) + .charts-header (~32) = 108px,
       plus --statusbar-height for the bottom bar. */
    height: calc(100vh - 108px - var(--statusbar-height));
    overflow-y: auto !important;
}

/* chart-card listner is treated as a div */
/* 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. */
.chart-card-listner {
    /* display: inline-block !important;  */
    width: 100% !important;
    /* background-color: #F8F8F8; */
}

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

    .chart-card-listner {
        /* display: inline-block !important;  */
        width: 50% !important;

    }
}

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


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

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

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

}

.input_title::selection {
    background-color: #86b6fe77;
    color: lightgray !important;
}



.card-body {
    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. */
.full_screen {
    width: 100vw !important;
    position: fixed;
    height: 100vh !important;
    top: 0;
    left: 0;
    z-index: 1300;
}

/* to control the dynamic dash-graph */
.dynamic-graph {
    box-sizing: content-box;
    width: 100%;
    height: 39.9vh !important;
    color: aqua !important;
}

.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. */
.dynamic-graph .modebar,
.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;
}

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

.dynamic-graph .modebar-container,
.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. */
.chart-card-listner .modal-div {
    z-index: 1100 !important;
}

/* delete confirmation must sit above the edit modal within the same card */
.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. */
.chart-card-listner .dash-loading-parent > div:has(.dash-spinner) {
    z-index: 1250;
    pointer-events: none;
}

.modal-div {
    position: absolute !important;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;

}

/* style of modal content shown in the chart card */
.modal-content {
    padding: 5px !important;
    border-radius: 0px 0px 0.25rem 0.25rem !important;
    background-color: white;
    opacity: 0.9;
}


.modal-content .edit-item {
    background-color: inherit;
    color: inherit;
    height: 2rem;
    font-size: small;
    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 .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: small;
}

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

.modal-content p {
    text-align: center;
    margin: 1px 0;
    font-size: 0.8rem;
}

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


.w-20 {
    width: 20%;
}

.w-40 {
    width: 40%;
}

.charts-tab {
     padding-top: 0.1rem;
     padding-bottom: 0.1rem;
     font-size: small;
    color: inherit !important;
}

.charts-tab.active {
    color: var(--color-endata-orange) !important;
    /* font-weight: 600 !important; */
}


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

/* ==================== Styles of the context menu ============== */
.main-menu {
    position: absolute;
    visibility: hidden;
    width: 8rem;
    border-radius: 5px !important;
    border: 1px solid rgba(176, 176, 176, 0.473);
    box-shadow: 0px 12px 35px rgba(0, 0, 0, 0.1);
    /* padding-bottom: 50px; */
    /* background-color: red; */
    z-index: 2;
}



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

.main-menu .list-group-item.disabled,
.list-group-item:disabled {
    /* color: #6c757d; */
    color: #949494b6;
}

.main-menu .list-group-item:hover {
    background-color: rgba(var(--bs-info-rgb), 1) !important;
    /* border-radius: 5px; */
}

.main-menu .menu-settings {
    border-top: 1px solid #ccc !important;
}

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

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

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

/* Style of trajectory module */
.select-item {
    background-color: inherit;
    color: inherit;
    /* text-transform: uppercase; */
    height: 2rem;
    font-size: small;
    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. */
.modal-content .dd-wid-col,
.modal-content .dd-yaxis-col {
    width: 20%;
    max-width: 20%;
    /* border: 1px solid red; */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.modal-content .dd-xcol-col,
.modal-content .dd-ycol-col {
    width: 40%;
    max-width: 40%;
}

/* 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. */
.modal-content .dd-wid-col > .dd-wid,
.modal-content .dd-xcol-col > .edit-item,
.modal-content .dd-yaxis-col > .edit-item,
.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. */
.modal-content .dd-wid {
    height: 2rem;
    font-size: small;
    background-color: inherit;
    color: inherit;
    margin-left:4px;
    margin-right: -3px;
    
    /* border: 1px solid red; */
    /* width: 50px !important; */
}

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

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

.modal-content .dd-wid .Select-placeholder,
.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; */
}

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

.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 */
#parameter-dd-1 .Select div, #formation-dd .Select div , #completion-dd .Select div , #well-dd .Select div { 
    background: black !important;  /*to change the background color of the options*/
    color: rgba(239, 239, 239, 0.698) !important;  /*to change the color of the options */
    font-size: small !important;
    }

/* HD Tab Style */
.table-hd-fit {
    width: 100%;
    font-size: 0.9rem;
}


.table-hd-fit tbody tr {
    /* background-color: red !important;  */
    border-bottom: 1px solid gray;
}
.table-hd-fit tbody tr td {
    /* background-color: yellow !important; */
    padding-Top: 2px;
    padding-Bottom: 2px;
}

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

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