.app-title {
    font-weight: 600;
}
[data-mantine-color-scheme="dark"] body {
    --mantine-color-body: #09092b;
}
.sidebar-slot.bottom-slot {
    flex-direction: row-reverse !important;
    align-items: center;
    justify-content: space-between;
}
header.mantine-AppShell-header {
    background: #f5f5ff;
    padding: 0 2rem !important;
}
[data-mantine-color-scheme="dark"] header.mantine-AppShell-header {
    background: #262630;
}
div#header-logo {
    height: 24px;
    width: 24px;
    margin-right: 0.25rem;
}
div#_pages_content {
    padding: 1.5rem 2rem !important
}

.markdown-div {
    border-left: 4px solid var(--mantine-color-orbitPrimary-light-color);
    border-radius: 0 4px 4px 0;
    background-color: color-mix(in srgb, var(--mantine-color-default-border), transparent 80%);
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.5rem 0.5rem;
    max-width: 65ch;
    margin: 1.5rem auto 0;
    min-height: 150px;
    display: grid;
    place-items: center;
    /* A long unbroken token (a traceback line, a file path) inside could otherwise force this
       narrow, centered box wider than its container - reading as a large left margin with content
       overflowing off the right edge - rather than wrapping within it. */
    overflow-wrap: anywhere;
}
.markdown-div.green{
    border-left: 4px solid green;
}
.markdown-div.orange{
    border-left: 4px solid orange;
}
.markdown-div.red{
    border-left: 4px solid red;
}
/* Optimisation/aggregation status boxes (see `_status_box` in dispatch_optimisation.py) - same
   coloured-left-border language as .markdown-div above, but sized/aligned for a wide table of
   progress bars rather than centered banner text, so it doesn't reuse that class directly. */
.status-box {
    border-left: 4px solid var(--mantine-color-default-border);
    border-radius: 0 4px 4px 0;
    background-color: color-mix(in srgb, var(--mantine-color-default-border), transparent 80%);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}
.status-box {
    width: 100%;
}
/* Full width below ~700px (a narrower cut would leave too little room for the name column plus a
   readable bar, per-chunk segments included), 80% - centred - above it, so the box doesn't stretch
   uncomfortably wide on a full desktop window. */
@media (min-width: 700px) {
    .status-box {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Modifier names match `_PROGRESS_STATE_COLORS` in dispatch_optimisation.py exactly (gray/blue/teal/
   red), so the box border always reads as the same colour vocabulary as its own progress bars -
   see the legend rendered alongside them (`_progress_legend`). */
.status-box.gray {
    border-left: 4px solid gray;
}
.status-box.blue {
    border-left: 4px solid blue;
}
.status-box.teal {
    border-left: 4px solid teal;
}
.status-box.red {
    border-left: 4px solid red;
}
.status-box.pending {
    opacity: 0.5;
}
/* Re-tint Mantine's blue/teal for everything inside a status box - the progress bars' segments and
   fills (`var(--mantine-color-*-filled)`, incl. the filled/remaining gradients) and the legend swatches
   alike - so in-progress vs succeeded has enough contrast to tell apart (stock blue/teal are only
   ~1.4:1 apart). Scoped to `.status-box` on purpose: overriding these variables at `:root` would
   re-colour every blue/teal button and badge in the app too. */
.status-box {
    --mantine-color-blue-filled: #79a8d8;
    --mantine-color-teal-filled: #1d7c5f;
}
.hidden {
    display: none;
}
/* Vertically centres the "Starting optimisation" spinner against its text - kept as a class (not an
   inline `style`) so the settle callback can hide it with a plain `.hidden` className swap: an
   inline style always wins over a stylesheet rule regardless of specificity, so `.hidden` alone
   could never have overridden a `display: inline-flex` set directly on the element. */
.starting-spinner {
    display: inline-flex;
    align-items: center;
}
/* Hover tooltip for progress-bar segments (see `_tooltipped_section` in dispatch_optimisation.py)
   - a plain `::after` popup driven by a `data-tooltip` attribute, not `dmc.Tooltip`: wrapping each
   segment broke its percentage-based sizing (only correct as a direct child of `ProgressRoot`),
   and `ProgressSection`'s own `attributes` prop never reaches its rendered DOM node, so neither a
   Mantine Tooltip nor a native `title` attribute was actually achievable here.
   Both Mantine's own `ProgressSection` *and* `ProgressRoot` classes set `overflow: hidden` (to clip
   backgrounds to the bar's own and its sections' rounded corners) - the `::after` popup pokes out
   above the section, so it needs `overflow: visible` on *both* ancestors to actually escape, not
   just the section itself (`.progress-tooltip-root` below is `_progress_bar`/`_aggregate_progress_
   bar`'s own `ProgressRoot`). `!important` is needed since both rules are plain classes (no inline
   style involved this time to win on specificity alone); overflow only affects clipping of content
   that pokes outside a box - a box's own rounded background isn't affected, since border-radius
   clips a box's own paint regardless of its overflow value. */
.progress-tooltip,
.progress-tooltip-root {
    overflow: visible !important;
}
.progress-tooltip {
    position: relative;
}
.progress-tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--mantine-color-body);
    color: var(--mantine-color-text);
    border: 1px solid var(--mantine-color-default-border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
}
/* Give the Tariff import/save-to-library tab switcher a button-like look even when a tab isn't
   selected - the pills variant leaves inactive tabs unstyled by default, which reads as non-clickable.
   Scoped to :not([data-active="true"]) so the active tab keeps its normal pills-variant highlight. */
.tariff-library-tabs .mantine-Tabs-tab:not([data-active="true"]) {
    background-color: color-mix(in srgb, var(--mantine-color-text), #0000 95%);
}
#main-header {
    z-index: 2 !important; /* So that Library menu appears on top of the page contents */
}
#content-scroll {
    z-index: 1;
}

/* Plotly light/dark mode styling */
body {
    --graph-text-color: #333;
    --graph-legend-bg: rgba(255, 255, 255, 0.9);
}
[data-mantine-color-scheme="dark"] body {
    --graph-text-color: #eee;
    --graph-legend-bg: rgba(16, 16, 16, 0.9);
}
div.plotly svg.main-svg text {
    fill: var(--graph-text-color) !important;
}
div.plotly g.legend rect.bg,
div.plotly g.annotation-text-g rect.bg,
div.plotly g.button rect.selector-rect {
    fill: var(--graph-legend-bg) !important;
    fill-opacity: 1 !important;
}

.tooltip-wrapper {
    margin-top: -2px;
}
.tooltip-wrapper > div {
    display: flex;
    align-items: center;
}

#__avatar > div {
    display: flex;
}
.markdown-assumption h2 {
    font-size: 1.17rem;
}
.markdown-assumption h3 {
    font-size: 1rem;
}
.markdown-update p {
    margin: 0.5rem 0 0;
    max-width: 80ch;
}
img {
    max-width: 100%;
}
.markdown-update img {
    display: block;
    margin: 0.5rem 0 0;
}
.mantine-Notifications-root[data-position="top-right"],
.mantine-Notifications-root[data-position="top-left"] {
    transform: translateY(var(--app-shell-header-height));
}
.hover-visible {
    opacity: 0;
    transition: opacity 150ms;

    *:hover > & {
        opacity: 0.5;
    }
    &:hover {
        opacity: 1;
    }
}

#breakpoints-layout-wrapper:has(#_pages_content:empty) {
    opacity: 0;
}

div.overlay-loader {
    display: none;
}
/* Create a fancy pages loader */
*[data-dash-is-loading=true] + div.overlay-loader {
    position: absolute;
    z-index: 10;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--mantine-color-default-border), transparent 75%);
    animation: fadein 500ms forwards;
    animation-delay: 750ms;
    opacity: 0;
    display: grid;
    place-content: center;
}
@keyframes fadein {
    0% { opacity: 0; backdrop-filter: blur(0px);}
    100% { opacity: 1; backdrop-filter: blur(2px);}
}