@font-face {
    font-family: "LindeDax";
    font-weight: 300;
    src: url("../fonts/LindeDaxLigWeb.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "LindeDax";
    font-weight: 350;
    src: url("../fonts/LindeDaxSemiLigWeb.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "LindeDax";
    font-weight: 400;
    src: url("../fonts/LindeDaxRegWeb.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "LindeDax";
    font-weight: 500 700;
    src: url("../fonts/LindeDaxMedWeb.woff") format("woff");
    font-display: swap;
}

/* Colours the MudBlazor palette doesn't cover, light and dark (Theme/ThemeService.cs puts the choice on <html>; js/theme.js
   before the app starts). Dark only on screen: prints stay light, as the palette does (ITankTheme.PrintInLightColours). */
:root {
    --itank-page-background: #F1F5F7;
    --itank-page-text: #005591;
    --itank-row-selected: aliceblue;
    --itank-row-changed: #e9f1f5;
    --itank-recommended: #1f77b4;
}

@media screen {
    :root[data-itank-theme="dark"] {
        color-scheme: dark;
        --itank-page-background: #12191F;
        --itank-page-text: #E3EBF0;
        --itank-row-selected: #1E3A4F;
        --itank-row-changed: #22343F;
        --itank-recommended: #6CB4EE;
    }
}

html, body {
    font-family: "LindeDax", "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: var(--mud-palette-background, var(--itank-page-background));
    color: var(--mud-palette-text-primary, var(--itank-page-text));
}

h1:focus {
    outline: none;
}

/* App bar */
.itank-app-title {
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* The environment's label (TST, LOCAL) on the app bar that ITankTheme colours for it: in the bar's text colour, which an
   outlined MudChip doesn't take by itself. */
.itank-environment {
    color: var(--mud-palette-appbar-text) !important;
    border-color: var(--mud-palette-appbar-text) !important;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.itank-wordmark {
    height: 28px;
    margin: 0 1rem;
}

/* Spoof bar: always visible while acting as someone else (spec 01 §4.3). */
.itank-spoof-bar {
    position: sticky;
    top: var(--mud-appbar-height);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    background-color: #C8102E;
    color: #FFFFFF;
    font-weight: 500;
}

/* Master data form: a plain fieldset that can disable every field at once for view-only records. */
.itank-md-fields {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.itank-md-child-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)) auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Wrapper components */
.itank-page-title {
    font-weight: 400;
}

/* Forms sit on white, never on the page's blue-grey (2026-10-29: the fields' blues were hard to see on it). A tab's content
   is a white card under its tab bar; the other forms are in ITankCard, a dialog, or a white panel of their own. */
.mud-tabs > .mud-tabs-panels {
    background-color: var(--mud-palette-surface);
}

.mud-tabs.mud-tabs-rounded > .mud-tabs-panels {
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
}

/* The build the browser runs (Services/AppVersion), small and fixed at the bottom left, where the menu leaves room. Above
   the menu, and clicks go through it. Left out of prints (itank-screen-only). */
.itank-version {
    position: fixed;
    left: 8px;
    bottom: 4px;
    z-index: calc(var(--mud-zindex-drawer) + 1);
    font-size: 10px;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    pointer-events: none;
}

/* Messages (snackbars) keep clear of the "Report a problem" tab, which hangs off the right edge from 76 px down: 34 px wide,
   56 px on hover (Apac.IssueReporting's .ir-fab, measured in Edge). MudBlazor puts them 24 px from the edge, under it. */
.mud-snackbar-location-top-right {
    right: 72px;
}

.itank-field {
    margin-bottom: 0.75rem;
}

.itank-field-label {
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.itank-busy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 0;
}

/* Loading screen (index.html) */
.itank-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.itank-loading-title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
}

.loading-progress circle {
    fill: none;
    stroke: var(--mud-palette-lines-default, #D7E1E6);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--mud-palette-primary, var(--itank-page-text));
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    margin-top: 0.5rem;
    font-weight: 500;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #222;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* Workflow administration */
.itank-wf-nobody td { background: var(--mud-palette-warning-lighten); }
.itank-wf-stage-no { min-width: 1.5rem; font-weight: 600; }
/* A stage is a white card, each role a bordered panel in it (marked by its left edge), each action a bordered card in its
   role; all white, so the fields in them stand out (2026-10-29). Logic groups nest as outlined white boxes. */
.itank-wf-role { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-tertiary); margin-top: 0.75rem; padding: 0.5rem 0.75rem; }
.itank-wf-action { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); margin-top: 0.5rem; padding: 0.375rem 0.5rem; }
.itank-wf-logic-group { background: var(--mud-palette-surface); }

/* New customer tank sizing */
.itank-clickable-rows tbody tr { cursor: pointer; }
.itank-ncts-output th, .itank-ncts-output td { white-space: nowrap; text-align: right; }
/* The row headings stay in view when the table scrolls sideways, above the cells scrolled under them: a button there is
   positioned (MudButton) and would otherwise paint over the heading and take its clicks (parity 035 I05). */
.itank-ncts-output th:first-child, .itank-ncts-output td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); }
.itank-ncts-optimal { font-weight: 700; }
.itank-ncts-selected { background: var(--itank-row-selected); }
.itank-ncts-pct { color: var(--mud-palette-text-secondary); font-size: 0.8em; margin-left: 0.25rem; }
.itank-ncts-reason { color: var(--mud-palette-error); }
/* Existing Customer simulation: the Reserve Volume tab's recommended reserve (the old blue) and the Status tab's pending stage. */
.itank-ec-recommended { color: var(--itank-recommended); }
.itank-ec-pending td { font-style: italic; color: var(--mud-palette-text-secondary); }
/* The label over a published record's options calculated when it opens (spec 07 §4.9). */
.itank-ncts-output th.itank-ec-calculated { text-align: center; font-style: italic; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray); }
/* The Output table scrolls sideways on screen; the User Simulated pickers keep a readable width. */
.itank-ec-output-scroll { overflow-x: auto; }
.itank-ec-output .itank-line-field { min-width: 11rem; }
/* Filter bars of the Existing Customer screens: the fields on one row, the box and Load Data on the next, as the old
   filters were (parity 035 I09: a field a twelfth of the row wide cut its label, and the button text wrapped). */
.itank-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.5rem; }
.itank-filter-actions .mud-button-root { white-space: nowrap; margin-left: auto; }
/* A box with a caption under it: the box at the caption's start (a block let the box drift to the right of a long caption). */
.itank-filter-actions > div { display: flex; flex-direction: column; align-items: flex-start; }
/* The reserve volume report's 8 shown columns fit a laptop screen too (parity 035 I08): narrower cell padding. */
.itank-ec-reserve-grid.mud-table-dense .mud-table-row .mud-table-cell { padding-inline: 12px; }

/* Capex estimation */
/* Line editors (Components/Lines): native inputs in the MudBlazor dense outlined look, cheap enough for tables of many lines. */
.itank-line-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.itank-line-input {
    font: inherit; font-size: 0.875rem; line-height: 1.25rem; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: var(--mud-default-borderradius); padding: 0.4rem 0.6rem;
    width: 100%; min-height: 2.25rem; box-sizing: border-box;
}
.itank-line-input:hover:not(:disabled) { border-color: var(--mud-palette-action-default); }
.itank-line-input:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.itank-line-input:disabled { color: var(--mud-palette-text-disabled); background: var(--mud-palette-action-disabled-background); cursor: default; }
.itank-line-input[aria-invalid="true"] { border-color: var(--mud-palette-error); }
.itank-line-input[type="number"] { -moz-appearance: textfield; }
.itank-line-input[type="number"]::-webkit-inner-spin-button, .itank-line-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.itank-line-helper { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.itank-line-error { font-size: 0.75rem; color: var(--mud-palette-error); }
.itank-line-check { width: 1.1rem; height: 1.1rem; margin: 0.55rem 0 0 0.5rem; accent-color: var(--mud-palette-primary); }

.itank-capex-lines td { vertical-align: top; }
.itank-capex-number { text-align: right; white-space: nowrap; padding-top: 0.9rem !important; }
.itank-capex-changed { background: var(--itank-row-changed); }
.itank-capex-drop { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px dashed var(--mud-palette-lines-default); border-radius: 4px; cursor: pointer; max-width: 32rem; }
.itank-print-only { display: none; }
.itank-capex-print { font-size: 0.8rem; }
.itank-capex-print h4 { margin: 0.75rem 0 0.25rem 0; }
.itank-capex-print-grid { width: 100%; border-collapse: collapse; }
.itank-capex-print-grid td { width: 33%; padding: 0.15rem 0.5rem 0.15rem 0; vertical-align: top; }
.itank-capex-print-label { color: #555; font-size: 0.7rem; }
.itank-capex-print-table { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; }
.itank-capex-print-table th, .itank-capex-print-table td { border: 1px solid #ccc; padding: 0.15rem 0.35rem; text-align: left; }
.itank-capex-print-table th { background: #e9f1f5; }

@media print {
    .mud-appbar, .mud-drawer, .itank-screen-only, .mud-snackbar-provider { display: none !important; }
    .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .itank-print-only { display: block; }
    @page { size: A4 portrait; margin: 12mm; }

    /* The Existing Customer record prints as its tab shows, landscape (ExistingCustomerSimulationDetail), without the
       navigation, and its Output table fits the page: every column in a share of the width, the row headings a fifth,
       the texts wrapping (parity 035 I04: the screen's table was cut after a few columns). */
    .itank-ec-record .mud-breadcrumbs, .itank-ec-record .mud-tabs-tabbar { display: none !important; }
    .itank-ec-output-scroll { overflow: visible !important; }
    .itank-ec-output table { table-layout: fixed; width: 100%; }
    .itank-ec-output col.itank-ec-heading-col { width: 20%; }
    .itank-ec-output th, .itank-ec-output td {
        white-space: normal !important; overflow-wrap: anywhere; position: static !important;
        font-size: 7.5pt !important; line-height: 1.25 !important; padding: 2px 4px !important;
    }
    .itank-ec-output tr, .itank-ec-charts { break-inside: avoid; }
    .itank-ec-charts > .mud-grid-item:first-child { flex-basis: 25% !important; max-width: 25% !important; }
    .itank-ec-charts > .mud-grid-item:last-child { flex-basis: 75% !important; max-width: 75% !important; }
    .itank-ec-output .itank-line-field { min-width: 0; }
    .itank-ec-output .itank-line-input { font-size: 7.5pt; min-height: 0; padding: 1px 2px; }
}

/* Blocking spinner (ITankBusyOverlay): blocks clicks at once, shows after 300 ms; the rotation runs off the main thread. */
.itank-busy { position: fixed; inset: 0; z-index: 1450; display: flex; align-items: center; justify-content: center; cursor: progress;
    background: rgba(0, 0, 0, 0); animation: itank-busy-show 0.2s ease-out 0.3s forwards; }
.itank-busy-spinner { width: 3rem; height: 3rem; border-radius: 50%; border: 0.3rem solid var(--mud-palette-primary-lighten);
    border-top-color: var(--mud-palette-primary); opacity: 0; animation: itank-busy-show 0.2s ease-out 0.3s forwards, itank-busy-spin 0.8s linear infinite; }
@keyframes itank-busy-show { to { background: rgba(0, 0, 0, 0.18); opacity: 1; } }
@keyframes itank-busy-spin { to { transform: rotate(360deg); } }

/* The app bar's background work list (Layout/BackgroundWorkMenu.razor). */
.itank-jobs { width: 22rem; max-width: calc(100vw - 2rem); max-height: 60vh; overflow-y: auto; padding-bottom: 0.25rem; }
.itank-jobs-heading { padding: 0.5rem 0.75rem; font-weight: 600; }
.itank-job { padding: 0.5rem 0.75rem; border-top: 1px solid var(--mud-palette-lines-default); }
.itank-job-title { font-weight: 500; overflow-wrap: anywhere; }
.itank-job-detail { font-size: 0.8rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.itank-jobs-running .mud-icon-root { animation: itank-busy-spin 1.2s linear infinite; }