/* Zone Web — Global Styles */

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    height: 100%;
    overflow: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ---- Nav Menu ---- */
.zone-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    height: 36px;
    overflow: visible;
}

.zone-nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.zone-brand {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    color: white;
}

.zone-menu-bar {
    display: flex;
}

.zone-menu-item {
    position: relative;
    padding: 6px 12px;
    cursor: pointer;
    color: white;
    font-size: 13px;
    user-select: none;
    z-index: 1001;
}

.zone-menu-item:hover {
    background: rgba(255,255,255,0.15);
}

.zone-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    min-width: 180px;
    z-index: 1000;
    padding: 4px 0;
}

.zone-dropdown a {
    display: block;
    padding: 6px 20px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.zone-dropdown a:hover {
    background: #29588c;
    color: white;
}

.zone-dropdown-item {
    display: block;
    padding: 6px 20px;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.zone-dropdown-item:hover:not(.disabled) {
    background: #29588c;
    color: white;
}

.zone-dropdown-item.disabled {
    color: #aaa;
    cursor: default;
}

.zone-menu-sep {
    height: 1px;
    background: #d0d0d0;
    margin: 4px 8px;
}

/* File > Recent Files: a nested flyout, the way the desktop's cmRecentFiles opens to the side.
   The parent row is the positioning context, so the panel hangs off its right edge. */
.zone-has-submenu {
    position: relative;
}

.zone-submenu {
    position: absolute;
    top: -4px;
    left: 100%;
    background: white;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    min-width: 240px;
    max-width: 420px;
    z-index: 1001;
    padding: 4px 0;
}

/* Long well names must not force the flyout wider than its max — clip rather than reflow, since a
   two-line menu row reads as two entries. */
.zone-submenu .zone-dropdown-item {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Invisible overlay to close menus when clicking outside */
.zone-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.zone-menu-disabled {
    color: #aaa !important;
    cursor: default !important;
    pointer-events: none;
}

.zone-menu-sub {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.zone-menu-arrow {
    font-size: 10px;
    color: #999;
}

.zone-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.zone-project-name {
    color: #ffdd66;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.zone-nav-sep {
    color: rgba(255,255,255,0.3);
    font-size: 12px;
}

.zone-license-info {
    color: #88cc88;
    font-size: 12px;
}

.zone-version {
    color: #7ed957;
    font-size: 12px;
    font-weight: 600;
}

/* ---- Toolbar ---- */
.zone-toolbar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
}

.zone-toolbar-row {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 28px;
}

.zone-toolbar-btn {
    background: white;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.zone-toolbar-btn:hover {
    background: #e0e0e0;
    border-color: #808080;
}

/* Icon-only toolbar buttons matching WPF */
.zone-toolbar-icon {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
}

.zone-toolbar-icon:hover {
    background: #e0e8f0;
    border-color: #90b0d0;
}

.zone-toolbar-icon img {
    height: 22px;
    width: auto;
}

.zone-toolbar-label {
    font-size: 12px;
    padding: 0 4px;
    color: #333;
}

.zone-toolbar-sep {
    width: 1px;
    height: 20px;
    background: #c0c0c0;
    margin: 0 4px;
}

.zone-case-dropdown {
    width: 300px;
    height: 24px;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
}

/* ---- ESP Layout ---- */
.esp-design-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.esp-left-panel {
    width: 160px;
    min-width: 160px;
    background: #29588c;
    border-right: 1px solid #1a3a5c;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 4px;
}

.esp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Action Panel ---- */
.esp-action-header {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 8px 4px;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    margin-bottom: 4px;
}

.esp-action-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.esp-action-spacer {
    flex: 1;
}

.esp-action-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.esp-action-btn {
    display: block;
    width: 100%;
    padding: 5px 8px;
    background: #e8e6e0;
    border: 1px outset #e8e6e0;
    border-radius: 0;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 25px;
    color: black;
}

.esp-action-btn:hover {
    background: #cce8ff;
    border-color: #99d1ff;
}

.esp-action-btn.active {
    background: #0078D4;
    color: white;
    border-color: #0078D4;
}

/* Button with embedded checkbox (Quick Design / Water Well Design) */
.esp-action-btn-checkbox {
    display: flex;
    align-items: center;
    height: 25px;
    background: #e8e6e0;
    border: 1px outset #e8e6e0;
}

.esp-action-btn-checkbox input[type="checkbox"] {
    margin: 0 0 0 4px;
    flex-shrink: 0;
}

.esp-action-btn-inner {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 0 8px;
    cursor: pointer;
    color: black;
}

.esp-action-btn-inner:hover {
    background: #cce8ff;
}

.esp-action-sep {
    height: 6px;
    background: rgba(255,255,255,0.2);
    margin: 4px 0;
}

.esp-action-label {
    font-size: 11px;
    font-weight: bold;
    color: #666;
    padding: 4px 4px 2px 4px;
    text-transform: uppercase;
}

/* ---- Tab Control ---- */
.zone-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.zone-tab-header {
    display: flex;
    background: #f0f0f0;
    border-bottom: 2px solid #29588c;
    flex-shrink: 0;
}

.zone-tab {
    padding: 6px 16px;
    cursor: pointer;
    font-size: 12px;
    border: 1px solid transparent;
    border-bottom: none;
    margin-right: 2px;
    background: transparent;
    color: #555;
}

.zone-tab:hover {
    background: #e0e0e0;
}

.zone-tab.active {
    background: white;
    border-color: #29588c #c0c0c0 transparent #c0c0c0;
    color: #333;
    font-weight: 600;
    margin-bottom: -2px;
    padding-bottom: 8px;
}

.zone-tab-content {
    flex: 1;
    overflow: auto;
    padding: 8px;
}

/* Full-bleed variant for a tab whose content IS the chart (Pressure Gradient). No padding, no
   scrollbar, and a flex column so the canvas can take the remaining height. */
.zone-tab-content-flush {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---- Results Summary ---- */
.results-summary {
    display: flex;
    gap: 0;
    height: 100%;
}

.results-container {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    border: 1px solid #c0c0c0;
    overflow: hidden;
}

.results-header {
    font-weight: bold;
    font-size: 13px;
    color: #29588c;
    padding: 4px 8px;
    border-bottom: 1px solid #c0c0c0;
    text-align: center;
    flex-shrink: 0;
}

.results-text {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: white;
}

.results-pre {
    margin: 0;
    padding: 4px 6px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.35;
    white-space: pre;
    color: black;
}

.results-diagram {
    flex: 1;
    overflow: auto;
    border: 1px solid #c0c0c0;
    border-left: none;
}

/* ---- Equipment Diagram ---- */
.equip-diagram-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.equip-diagram-header {
    font-weight: bold;
    font-size: 13px;
    color: #29588c;
    padding: 4px 8px;
    border-bottom: 1px solid #c0c0c0;
    text-align: center;
    flex-shrink: 0;
}

.equip-diagram-body {
    flex: 1;
    overflow: auto;
    padding: 4px;
}

.equip-diagram-stack {
    display: grid;
    grid-template-columns: 96px 1fr;
    border-top: 1px solid #999;
}

/* Full schematic (Equipment tab): the desktop's three columns are 210 / 96 / 3* — a left information
   column, the artwork, then the descriptions. The Design tab keeps the two-column form above. */
.equip-diagram-stack.equip-with-side {
    grid-template-columns: 210px 96px 1fr;
}

.equip-side {
    font-size: 11px;
    padding: 4px 8px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    overflow: hidden;
}

/* The electrical block and surface block sit in a taller header row (desktop row 0 is 110px). */
.equip-side-head {
    min-height: 104px;
}

/* Tab-separated label/value pairs in the desktop's electrical block. */
.equip-side-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* The desktop pads these cells apart with blank lines (Environment.NewLine runs). */
.equip-side-gap {
    height: 10px;
}

/* ---- Equipment tab panes ---- */
.equip-schematic-pane,
.equip-list-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.equip-schematic-scroll,
.equip-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Desktop CopyEquipment_Schematic_Image / CopyEquip_List buttons, same corner. */
.equip-copy-btn {
    align-self: flex-start;
    margin: 5px;
    font-size: 11px;
    background: #e8e6e0;
    border: 1px outset #e8e6e0;
    padding: 4px 10px;
    cursor: pointer;
}

.equip-copy-btn:hover:not(:disabled) {
    background: #cce8ff;
}

.equip-copy-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.equip-list-note {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 11px;
    color: #666;
    border-top: 1px solid #ddd;
}

/* Right-align the numeric columns of the equipment list. */
.equip-table th.num,
.equip-table td.num {
    text-align: right;
    white-space: nowrap;
}

/* Left column: images stacked flush with no gaps */
.equip-img-column,
.equip-info-column {
    display: contents;
}

/* Equipment image with MLE cable overlay */
.equip-img-wrap {
    position: relative;
    font-size: 0;
    line-height: 0;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.equip-img-wrap img.equip-base {
    width: 92px;
    display: block;
    /* MAKE A MISSING IMAGE VISIBLE.
       The wrap sets font-size:0 / line-height:0 to kill inline-image whitespace, which also suppresses
       a broken image's alt text — so an equipment image that fails to load renders as absolutely
       nothing: no icon, no text, no clue. That silence is why a blanked motor took several passes to
       track down. Restoring a text size HERE costs nothing while the image loads (alt is not painted)
       and turns a failure into a readable red filename, because every equip-base alt carries its own
       file name in brackets. */
    font-size: 9px;
    line-height: 1.15;
    color: #a00;
    min-height: 12px;
}

/* Solid blue cylinder block for upper separator (no intake screen) */
.equip-solid-blue {
    width: 92px;
    background: linear-gradient(to right, #14305a, #1a3d6e 15%, #1e4578 50%, #1a3d6e 85%, #14305a);
    border-left: 2px solid #0d1f3d;
    border-right: 2px solid #0d1f3d;
}

.equip-img-wrap img.equip-mle {
    position: absolute;
    top: 0;
    left: 0;
    width: 92px;
    display: block;
    pointer-events: none;
}

/* Right column: text labels aligned to components */
.equip-info-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #333;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
}

.equip-info-title {
    font-weight: bold;
    color: #000;
}

.equip-info-spacer {
    /* empty row to align with image that has no text */
}

.equip-total-spacer {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}

.equip-total-row {
    padding: 4px 8px 0 8px;
    font-weight: bold;
}

/* ---- Errors/Warnings ---- */
.errors-warnings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.ew-section {
    flex: 1;
    overflow: auto;
}

.ew-section-header {
    font-weight: bold;
    font-size: 13px;
    padding: 4px 8px;
    border-bottom: 1px solid #c0c0c0;
}

.ew-section-header.errors {
    color: #c62828;
    background: #ffebee;
}

.ew-section-header.warnings {
    color: #e65100;
    background: #fff3e0;
}

.ew-item {
    padding: 4px 16px;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.ew-empty {
    padding: 8px 16px;
    color: #999;
    font-style: italic;
}

/* Errors/Warnings tab color states */
.zone-tab.ew-tab-red {
    background: #c62828;
    color: white;
    font-weight: bold;
}

.zone-tab.ew-tab-red.active {
    background: #c62828;
    color: white;
    border-color: #c62828 #c62828 transparent #c62828;
}

.zone-tab.ew-tab-yellow {
    background: #f9a825;
    color: black;
    font-weight: bold;
}

.zone-tab.ew-tab-yellow.active {
    background: #f9a825;
    color: black;
    border-color: #f9a825 #f9a825 transparent #f9a825;
}

.zone-tab.ew-tab-green {
    background: #2e7d32;
    color: white;
    font-weight: bold;
}

.zone-tab.ew-tab-green.active {
    background: #2e7d32;
    color: white;
    border-color: #2e7d32 #2e7d32 transparent #2e7d32;
}

/* ---- Landing Page ---- */
.zone-landing {
    position: relative;   /* anchors the Sign Out button in its corner (2026-10-09) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #29588c 0%, #1a3a5c 100%);
    color: white;
}

.zone-landing-title {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 8px;
    margin-bottom: 8px;
}

.zone-landing-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 48px;
}

.zone-mode-selector {
    display: flex;
    gap: 32px;
}

/* A user whose licence carries no design module (ModuleAccess, 2026-09-14) gets this instead of an
   empty row of tiles. */
.zone-no-modules {
    max-width: 520px;
    padding: 18px 22px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 10px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.zone-mode-card {
    width: 364px;
    padding: 32px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: white;
    display: block;
}

.zone-mode-card:hover {
    background: rgba(255,255,255,0.2);
    border-color: white;
    transform: translateY(-4px);
}

.zone-mode-card h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
}

.zone-mode-card p {
    margin: 0;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.zone-mode-icon {
    margin-bottom: 16px;
    min-height: 156px;            /* the SVG icon's height, so an image tile stays level with an icon tile */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ESP tile artwork (Paul, 2026-09-18): fills the card's content width, height follows its 3:1 shape. */
.zone-mode-image {
    width: 100%;
    height: auto;
    display: block;
}

.zone-mode-detail-light {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

/* ---- Authentication: login, download, sign-out ---- */
.zone-auth-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh / var(--zz, 1));
    color: #fff;
    background: linear-gradient(135deg, #29588c 0%, #1a3a5c 100%);
    font-size: 18px;
}

.zone-login-page,
.zone-download-page {
    position: relative;
    height: calc(100vh / var(--zz, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #29588c 0%, #1a3a5c 100%);
    overflow: auto;
}

/* Desktop Download button, upper-right corner of the login page */
.zone-desktop-download {
    position: absolute;
    top: 22px;
    right: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 22px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.zone-desktop-download:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.6);
}
/* Sign Out on the tile page: the same pill, same corner, as a <button> inside a POST form (2026-10-09). */
.zone-landing-signout-form { margin: 0; }
.zone-landing-signout {
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.zone-login-card,
.zone-download-card {
    width: 100%;
    max-width: 420px;
    margin: 24px;
    padding: 40px 36px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.zone-download-card { max-width: 540px; }

.zone-login-brand {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #14305a;
    text-align: center;
}
.zone-login-brand sup { font-size: 18px; }

/* "Beta Version" pill under the subtitle while the web app is in testing (Site:BetaLabel). */
.zone-login-beta {
    display: table; margin: -14px auto 18px; padding: 3px 12px; border-radius: 999px;
    background: #fff6e0; border: 1px solid #e2c88a; color: #7a5a00;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.zone-login-subtitle {
    text-align: center;
    color: #6b7785;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.zone-login-error {
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #b02a37;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 18px;
}

.zone-login-form { display: flex; flex-direction: column; gap: 16px; }

.zone-login-field { display: flex; flex-direction: column; gap: 6px; }
.zone-login-field span { font-size: 13px; font-weight: 600; color: #44505d; }
.zone-login-field input {
    padding: 11px 12px;
    border: 1px solid #c7ced6;
    border-radius: 6px;
    font-size: 15px;
}
.zone-login-field input:focus {
    outline: none;
    border-color: #29588c;
    box-shadow: 0 0 0 3px rgba(41,88,140,0.15);
}

/* Forgot-password link under the login form, and the reset-info page */
/* The company mark under the landing cards (LandingLayout). Fixed to the bottom of the viewport so
   it sits on the blue ground below the centred card; hidden on very short viewports. */
.zone-landing-company { position: fixed; left: 0; right: 0; bottom: 22px; text-align: center; pointer-events: none; }
.zone-landing-company img { width: 170px; height: auto; opacity: 0.92; }
@media (max-height: 640px) { .zone-landing-company { display: none; } }
/* Phones (Paul, 2026-09-14: "the login section covers up a small section of the Valiant by Flowco logo
   at the bottom"): the card centred itself in the FULL viewport while the mark sat fixed in the bottom
   22px, so a tall card (brand + Beta pill + two fields + button + Forgot link) ran into it. Reserve the
   bottom strip for a slightly smaller mark and centre the card in what is left; `margin: auto` on the
   card (not the flex centring) keeps the top of a card taller than the space scrollable rather than
   clipped. */
@media (max-width: 600px) {
    .zone-login-page, .zone-download-page { box-sizing: border-box; padding-bottom: 104px; align-items: stretch; }
    .zone-login-card, .zone-download-card { margin: auto 16px; }
    .zone-landing-company { bottom: 18px; }
    .zone-landing-company img { width: 136px; }
}
/* ── The well card (concept #16): a 420×400 card whose background is LoginWellCard's drawing and
   whose form is laid over it, inset to clear the vertical on the left and the lateral along the
   bottom. Below 480px the drawing is hidden and the card is the plain one again. Paul, 2026-09-11. */
.zone-login-card.zone-well { position: relative; width: 420px; max-width: 420px; height: 400px; padding: 0; overflow: hidden; }
.zone-well .zone-well-scene { position: absolute; inset: 0; pointer-events: none; }
.zone-well .zone-well-scene svg { display: block; width: 420px; height: 400px; }
.zone-well .zone-well-fallback { display: none; }
.zone-well .zone-well-form { position: absolute; left: 48px; top: 126px; width: 330px; }
.zone-well .zone-login-form { gap: 14px; }
.zone-well .zone-login-field span { font-size: 12px; }
.zone-well .zone-login-field input { padding: 8px 10px; font-size: 14px; }
.zone-well .zone-login-button { margin-top: 6px; padding: 10px; }
.zone-well .zone-login-help { margin-top: 14px; }
.zone-well .zone-soon-note { margin-bottom: 10px; padding: 6px 10px; font-size: 12.5px; }
@media (max-width: 479px), (max-height: 520px) {
    .zone-login-card.zone-well { width: 100%; height: auto; padding: 40px 36px; }
    .zone-well .zone-well-scene { display: none; }
    .zone-well .zone-well-fallback { display: block; }
    .zone-well .zone-well-form { position: static; width: auto; }
}
.zone-login-help { margin-top: 16px; text-align: center; }
.zone-login-help a { color: #29588c; font-size: 13px; text-decoration: none; }
.zone-login-help a:hover { text-decoration: underline; }
.zone-forgot-title { margin: 4px 0 12px; color: #14305a; font-size: 20px; text-align: center; }
.zone-forgot-text { color: #44505d; font-size: 14px; line-height: 1.5; margin-bottom: 22px; }
.zone-forgot-back { display: block; text-align: center; text-decoration: none; }

/* ---- Password show/hide eyeball ---- */
.zone-pwd-wrap { position: relative; display: block; }
.zone-pwd-toggle {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: none; border: none; padding: 2px; margin: 0; cursor: pointer;
    color: #8a96a3; display: inline-flex; align-items: center;
}
.zone-pwd-toggle:hover { color: #44505d; }
.zone-pwd-toggle.zone-pwd-shown { color: #29588c; }
/* Input must fill the wrapper (it's no longer a direct flex child), so the eyeball sits INSIDE it. */
.zone-pwd-wrap input { width: 100%; box-sizing: border-box; }
.zone-login-field .zone-pwd-wrap input { padding-right: 40px; }

.zone-login-button {
    margin-top: 8px;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: #29588c;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.zone-login-button:hover { background: #1e4578; }
.zone-login-button:disabled { background: #9fb0c4; cursor: not-allowed; }
.zone-login-button:disabled:hover { background: #9fb0c4; }

/* "Web coming soon" state — shown while Site:ComingSoon is on (web UI held closed during the
   desktop-API test window). Ported from the interim static landing page so the message matches. */
.zone-soon-note {
    background: #eef4fb; border: 1px solid #cfe0f2; color: #29588c;
    padding: 10px 14px; border-radius: 6px; font-size: 13.5px; margin-bottom: 18px; text-align: center;
}

/* Download page */
.zone-download-back {
    position: absolute;
    top: 22px;
    left: 26px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 14px;
}
.zone-download-back:hover { color: #fff; text-decoration: underline; }

.zone-download-title { text-align: center; color: #14305a; font-size: 24px; margin: 6px 0 0; }
.zone-download-tagline { text-align: center; color: #6b7785; font-size: 15px; margin: 8px 0 22px; }

.zone-download-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f4f6f9;
    border: 1px solid #e2e7ee;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    color: #2f3a45;
    margin-bottom: 20px;
}
.zone-download-meta span {
    display: inline-block;
    width: 110px;
    font-weight: 700;
    color: #14305a;
}

.zone-download-eula { font-size: 14px; color: #44505d; margin-bottom: 22px; }
.zone-download-accept {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    cursor: pointer;
    font-weight: 600;
    color: #2f3a45;
}
.zone-download-accept input { margin-top: 3px; }

.zone-download-button {
    display: block;
    text-align: center;
    padding: 13px;
    border-radius: 26px;
    background: #E9C226;
    color: #14305a;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.zone-download-button:hover { background: #d8b31d; }
.zone-download-button.is-disabled {
    background: #d7dbe0;
    color: #9aa3ad;
    pointer-events: none;
    cursor: not-allowed;
}
/* Test-channel download pages - /download/test (4.8.5) and /download/zone5 (Zone 5.0), reached by address only (Paul, 2026-10-21):
   a small badge over the title and an amber note above the details box. The production page (/download) shows neither. */
.zone-download-channel { display: block; width: max-content; margin: 10px auto 0; padding: 3px 12px; border-radius: 12px; background: #eef2f7; color: #14305a; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.zone-download-test { background: #fff7e6; border: 1px solid #f0dca8; color: #7a5b12; padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.zone-download-test b { color: #5c440a; }

/* Sign-out area in the authenticated app header */
.zone-user-area {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-right: 14px;
}
.zone-user-name { color: #fff; font-size: 13px; font-weight: 600; opacity: 0.9; }
.zone-user-link { color: #cfe0f2; font-size: 12px; text-decoration: none; }
.zone-user-link:hover { color: #fff; text-decoration: underline; }
.zone-logout-form { margin: 0; }

/* Profile dropdown anchored on the username in the top bar */
.zone-user-menu { display: flex; align-items: center; gap: 5px; }
.zone-user-caret { color: #cfe0f2; font-size: 10px; }
.zone-dropdown-right { left: auto; right: 0; }
.zone-user-head { padding: 8px 20px 6px; }
.zone-user-head-name { color: #1e3f5f; font-weight: 700; font-size: 13px; }
.zone-user-head-email { color: #6a7682; font-size: 12px; }
.zone-logout-item { width: 100%; box-sizing: border-box; text-align: left; background: none; border: none; font: inherit; cursor: pointer; }
.zone-logout-button {
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 16px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.zone-logout-button:hover { background: rgba(255,255,255,0.15); }

/* ---- Well Architecture Form ---- */
.well-tab-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
    height: 100%;
}

.well-gradient-header {
    background: PaleTurquoise;
    border: 2px solid #000;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.well-gradient-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.well-gradient-row label {
    font-weight: bold;
    font-size: 12px;
    min-width: 160px;
}

.well-label-inline {
    min-width: auto !important;
    margin-left: 16px;
}

.well-select {
    font-size: 11px;
    padding: 3px 6px;
    min-width: 200px;
}

.well-input-sm {
    width: 80px;
    font-size: 11px;
    padding: 3px 6px;
}

/* The eight Add buttons, laid out as the desktop lays them out: a symmetric 4 x 2 block.
   Well_Architecture.xaml's button Grid gives columns 0-3 an identical Width="150" and each row
   Height="30", with every button Margin="5,2,5,2" and stretched to fill its cell — so all eight come
   out the same size and the two rows line up column for column.

   Flex with natural widths did NOT do that: "Add TPI" and "Add Shroud/Tail Pipe" sized to their text,
   so the two rows staggered. Four equal fr columns reproduce the desktop's uniform grid, and the
   max-width keeps them near the desktop's 150px each instead of stretching across a wide monitor
   (4 x 150 plus the 5px side margins ≈ 620). */
.well-add-buttons {
    display: flex;
    flex-direction: column;
}

.well-add-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 620px;
}

/* Fills its cell, minus the desktop's 5px side / 2px top-bottom margins. min-width:0 overrides the
   120px floor on .well-btn, which would otherwise stop the cells from sizing evenly. */
.well-add-row .well-btn {
    min-width: 0;
    margin: 2px 5px;
    padding: 4px 6px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.well-btn {
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    background: LightGray;
    border: 1px solid #999;
    cursor: pointer;
    min-width: 120px;
}

.well-btn:hover {
    background: #ddd;
}

.well-btn-sm {
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    background: LightGray;
    border: 1px solid #999;
    cursor: pointer;
}

.well-btn-sm:hover {
    background: #ddd;
}

.well-btn-delete {
    background: transparent;
    border: none;
    color: #c00;
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
}

.well-btn-delete:hover {
    color: #f00;
}

.well-grid-container {
    max-height: 300px;
    overflow: auto;
    border: 1px solid #999;
}

.well-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.well-grid th {
    background: #29588c;
    color: white;
    padding: 4px 6px;
    text-align: left;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.well-grid td {
    padding: 2px 4px;
    border-bottom: 1px solid #ddd;
}

.well-grid tr:hover td {
    background: #f0f8ff;
}

.well-grid tr.selected td {
    background: #d4e8f7;
}

.well-cell-type {
    color: blue;
    background: WhiteSmoke;
    font-weight: bold;
    white-space: nowrap;
}

.well-cell-input {
    width: 80px;
    font-size: 11px;
    padding: 1px 4px;
    border: 1px solid #ccc;
}

.well-error-bar {
    background: #fff3f3;
    border: 1px solid #c00;
    padding: 6px 10px;
    font-size: 12px;
    white-space: pre-line;
}

.well-error-text {
    color: #c00;
    font-weight: bold;
}

.well-validation-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Well Data tab */
.well-data-section {
    border: 2px solid #000;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.well-data-gold {
    background: PaleGoldenrod;
}

.well-data-cyan {
    background: PaleTurquoise;
}

.well-data-divider {
    height: 3px;
    background: #000;
    margin: 4px 0;
}

.well-data-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.well-data-section-title {
    font-weight: bold;
    font-size: 13px;
}

.well-data-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.well-data-row label {
    font-weight: bold;
    font-size: 12px;
    min-width: 200px;
}

.well-input {
    width: 120px;
    font-size: 11px;
    padding: 3px 6px;
    border: 1px solid #999;
}

.well-unit {
    font-size: 11px;
    color: #666;
}

/* ---- Equipment Table ---- */
.equip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.equip-table th {
    background: #29588c;
    color: white;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
}

.equip-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #e0e0e0;
}

.equip-table tr:hover td {
    background: #f0f8ff;
}

/* ---- HPS Layout ---- */
.hps-design-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Left panel + content sit side by side and grow to fill, pushing the footer to the bottom. */
.hps-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.hps-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.hps-panel-content {
    flex: 1;
    overflow: auto;
    /* ⚠ min-height:0 is what lets a flex:1 child be SHORTER than its content, and so what makes its
       height definite enough for the chart pane's height:100% to resolve (the ESP tab body has the
       same line). Without it the pane fell back to auto and the AutoSize canvas sized itself from
       its dpr-scaled backing store instead. */
    min-height: 0;
    padding: 12px;
}

.hps-button-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    padding: 0 12px;
    background: #f0f0f0;
    border-top: 1px solid #c0c0c0;
    flex-shrink: 0;
    width: 100%;
}

.esp-action-btn.active {
    background: #29588c;
    color: white;
    border-color: #29588c;
}

.hps-btn-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.hps-btn {
    background: white;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    padding: 4px 16px;
    font-size: 12px;
    cursor: pointer;
    height: 32px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #333;
}

.hps-btn:hover:not(:disabled) {
    background: #e0e0e0;
    border-color: #808080;
}

.hps-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.hps-btn.primary {
    background: #29588c;
    color: white;
    border-color: #1a3a5c;
}

.hps-btn.primary:hover:not(:disabled) {
    background: #1a3a5c;
}

.hps-save-status {
    margin-left: 12px;
    font-size: 12px;
    color: #1a3a5c;
    align-self: center;
}

/* ---- HPS Open/Save dialogs ---- */
.hps-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.hps-modal {
    background: white;
    border: 1px solid #1a3a5c;
    border-radius: 4px;
    min-width: 460px;
    max-width: calc(90vw / var(--zz, 1));
    max-height: calc(80vh / var(--zz, 1));
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.hps-modal-header {
    background: #29588c;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 4px 4px 0 0;
}

.hps-modal-body {
    padding: 16px;
    overflow: auto;
}

.hps-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.hps-open-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.hps-open-table th,
.hps-open-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #e0e0e0;
}

.hps-open-table th {
    background: #f0f4f8;
    color: #1a3a5c;
}

.hps-saveas-input {
    width: 100%;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    margin-top: 4px;
}

/* ---- HPS Order Input (four-section layout, mirrors desktop v4.8.2) ---- */
.hps-oi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 12px;
    align-items: start;
}

.hps-oi-section {
    border: 1px solid #b0b0b0;
    background: #fafafa;
    border-radius: 3px;
    padding-bottom: 8px;
}

/* Pump Configuration tab: the two panels share one bottom edge (Paul, 2026-09-16), and the
   Selected Pump panel's Find Pump P/N button rides that edge rather than floating mid-panel. */
.hps-oi-grid.hps-oi-grid-even { align-items: stretch; }
.hps-oi-grid-even > .hps-oi-section { display: flex; flex-direction: column; }
.hps-oi-grid-even > .hps-oi-section > .hps-btn-group { margin-top: auto; }

.hps-oi-section-header {
    background: #e8eef4;
    color: #1a3a5c;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding: 6px;
    border-bottom: 1px solid #d0d8e0;
    margin-bottom: 8px;
}

.hps-oi-row {
    display: grid;
    grid-template-columns: 175px 1fr;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
}

.hps-oi-row label {
    font-size: 12px;
    color: #333;
}

.hps-oi-row select,
.hps-oi-row input {
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    width: 100%;
}

/* Order Input: the Notes box stretches to the height of the System box beside it, so the two
   share one bottom edge (Paul, 2026-09-18). The textarea fills whatever is left under the header;
   a small min-height keeps it usable if System ever gets shorter, and the drag handle is off so
   the user cannot pull the edges back out of line. */
.hps-oi-notes {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.hps-oi-textarea {
    flex: 1;
    min-height: 80px;
    margin: 0 12px 8px;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #b0b0b0;
    border-radius: 2px;
    resize: none;
}

/* Blank space between the HPS nav buttons and the project/action buttons (mirrors desktop spacer). */
.hps-action-gap {
    height: 70px;
    flex-shrink: 0;
}

.esp-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Quick Design (water well) mode indicator — the desktop's lbMessage. Sits above the tab strip so the
   pinned Hazen-Williams gradient is visible on every tab, not just inside the Quick Design window. */
.esp-quickdesign-banner {
    flex: 0 0 auto;
    background: Cornsilk;
    border-bottom: 1px solid #b8a970;
    color: #5a4a10;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
}

/* ---- HPS Form Grid ---- */
.hps-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    max-width: 800px;
    padding: 8px 0;
}

.hps-form-group {
    display: flex;
    flex-direction: column;
}

.hps-form-group label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 2px;
}

.hps-form-group input,
.hps-form-group select {
    width: 100%;
    height: 28px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 12px;
    font-family: inherit;
}

.hps-form-group input:focus,
.hps-form-group select:focus {
    outline: none;
    border-color: #29588c;
    box-shadow: 0 0 0 1px rgba(41,88,140,0.25);
}

.hps-form-group input[readonly] {
    background: #f5f5f5;
    color: #666;
}

.hps-section-header {
    font-weight: bold;
    font-size: 13px;
    color: #29588c;
    padding: 8px 0 4px 0;
    border-bottom: 1px solid #c0c0c0;
    margin-bottom: 8px;
}

/* ---- HPS Pump Sizing (2026-09-15) ---- */
/* Main Pump on the left; Units and VSD Freq Limits beside it on ONE line (Paul, 2026-09-15 — the
   desktop has no "Pump Performance" box on this tab and no correction entry boxes). The side panels
   drop under the form on a narrow window rather than squeezing it. */
.hps-sizing-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.hps-sizing-main { flex: 1 1 520px; min-width: 0; }

.hps-sizing-side {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.hps-sizing-side .hps-oi-section { min-width: 210px; }

/* The candidate grid is wide — 17 of the desktop's columns — so it scrolls sideways on its own
   rather than pushing the page out. */
.hps-grid-scroll {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
}

/* ⚑ The desktop SHADES the two horsepower cells red when the pump is over its shaft limit and keeps
   the row (2026-05-07), rather than dropping the candidate. */
.equip-table td.hps-over-limit { color: #b02a37; font-weight: 600; }

/* ---- HPS Pricing Summary ---- */
.hps-pricing-summary {
    max-width: 500px;
    font-size: 12px;
}

.hps-pricing-header {
    display: grid;
    grid-template-columns: 140px 120px 120px;
    font-weight: 600;
    color: #29588c;
    padding: 4px 8px;
    border-bottom: 1px solid #c0c0c0;
}

.hps-pricing-row {
    display: grid;
    grid-template-columns: 140px 120px 120px;
    padding: 3px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.hps-pricing-row:nth-child(even) {
    background: #fafafa;
}

.hps-pricing-total {
    display: grid;
    grid-template-columns: 140px 120px 120px;
    padding: 6px 8px;
    font-weight: bold;
    font-size: 13px;
    border-top: 2px solid #29588c;
    background: #f0f5fa;
}

.hps-pricing-lead {
    padding: 8px 8px 0 8px;
    color: #666;
    font-style: italic;
}

/* ---- HPS Final Quote, Pump Only pricing (desktop pnlPumpOnlyPricing, HPS.xaml:3397-3447) ----
   Columns: label | Margin | Cost | Price | gap | buttons. Rows: header + Pump, Unit Total, Number Of
   Units, and a spare so Generate Quote can span two rows like the desktop. Editable cells are peach with
   purple text; computed cells grey with bold red text. Paul, 2026-09-18. */
.hps-po-pricing {
    display: grid;
    grid-template-columns: 170px 110px 120px 120px 24px 150px;
    grid-template-rows: 26px repeat(4, 26px);
    column-gap: 6px;
    row-gap: 2px;
    align-items: center;
    padding: 6px 8px 8px;
    font-size: 12px;
}

.hps-po-head {
    grid-row: 1;
    font-weight: bold;
    text-align: center;
    color: #1a3a5c;
}

.hps-po-label {
    grid-column: 1;
    font-weight: bold;
    padding-left: 8px;
    white-space: nowrap;
}

.hps-po-input,
.hps-po-calc {
    height: 24px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #a9a9a9;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    font-family: inherit;
    padding: 0 4px;
}

.hps-po-input {
    background: #ffcc99;
    color: purple;
    -moz-appearance: textfield;
}
.hps-po-input::-webkit-outer-spin-button,
.hps-po-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hps-po-calc {
    background: lightgray;
    color: red;
    font-weight: bold;
    cursor: default;
}
.hps-po-calc:focus { outline: none; }

/* The two buttons fill their two-row span rather than the fixed 32px of .hps-btn. */
.hps-po-btn {
    height: auto;
    align-self: stretch;
    justify-content: center;
    font-weight: bold;
    width: 100%;
}

/* ---- Table row selection ---- */
.equip-table tr.selected td {
    background: #d4e8f7;
}

.equip-table tbody tr {
    cursor: pointer;
}

/* ---- ESP Form Shared Styles (matching WPF) ---- */

.esp-form-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: white;
}

.esp-form-title {
    font-size: 14px;
    font-weight: bold;
    color: white;
    background: #29588c;
    padding: 6px 12px;
    flex-shrink: 0;
}

.esp-form-content {
    flex: 1;
    /* Without min-height:0 a flex child refuses to shrink below its content, so tall tab content
       pushes the PAGE into a scrollbar instead of scrolling here. The desktop windows never scroll
       at the page level — panes scroll internally. */
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background: white;
}

/* ---- Tabbed ESP form (opt-in) ----
   Makes a form's content area a flex column so its tab bodies get the leftover height and scroll
   INTERNALLY, instead of growing the page. The form still fills its region, so the bottom button bar
   stays at the bottom with no dead space beneath it.

   Two things this deliberately does NOT do, both learned the hard way on the Pumps window:
     · It does not pin the form WIDTH. The desktop's window floats free at 930px, but the web form is a
       region beside the ESP Action sidebar — a fixed width strands it top-left with a dead expanse to
       its right. Every other ESP window fills the available width and this should match.
     · It does not pin the form HEIGHT either. Doing that shrink-wrapped the container and left a gap
       between the button bar and the bottom of the page. The vertical fix belongs on the individual
       TAB whose panes stretch (see the Single Pump grid), not on the whole form.

   Opt in per form as each window is parity-swept — deliberately NOT on .esp-form-container itself,
   which every ESP form shares, including the ones already click-verified. */
.esp-form-tabbed > .esp-form-content {
    display: flex;
    flex-direction: column;
    /* Children scroll; the page must not. */
    overflow: hidden;
}

.esp-form-tabbed .esp-form-tabbody {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Pump Select Pump(s) tab rows */
.esp-pump-select-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #e0e0e0;
}
.esp-pump-select-label {
    font-size: 11px;
    font-weight: bold;
    width: 30px;
    flex-shrink: 0;
}
.esp-pump-select-key {
    font-size: 11px;
    flex: 1;
    min-width: 150px;
}
.esp-pump-select-limits {
    flex: 1;
    min-width: 100px;
}

.esp-form-button-bar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    height: 35px;
    padding: 3px 10px;
    border-top: 1px solid #c0c0c0;
    background: #f0f0f0;
    flex-shrink: 0;
    align-items: center;
}

.esp-form-btn {
    background: LightGray;
    font-weight: bold;
    font-size: 11px;
    border: 1px solid #999;
    padding: 3px 12px;
    min-width: 80px;
    height: 26px;
    cursor: pointer;
    text-align: center;
}

.esp-form-btn:hover:not(:disabled) {
    background: #d0d0d0;
    border-color: #666;
}

.esp-form-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* GroupBox equivalent */
.esp-groupbox {
    border: 2px solid black;
    padding: 12px 8px 8px 8px;
    margin: 4px 0;
    position: relative;
}

.esp-groupbox-header {
    font-weight: bold;
    font-size: 12px;
    position: absolute;
    top: -10px;
    left: 10px;
    background: white;
    padding: 0 6px;
    color: #333;
}

/* Colored form sections matching WPF Borders */
.esp-form-section-gold {
    background: PaleGoldenrod;
    border: 2px solid black;
    padding: 8px;
    margin: 4px 0;
}

.esp-form-section-blue {
    background: PaleTurquoise;
    border: 2px solid black;
    padding: 8px;
    margin: 4px 0;
}

.esp-form-section-green {
    background: Honeydew;
    border: 2px solid black;
    padding: 8px;
    margin: 4px 0;
}

.esp-form-section-alice {
    background: AliceBlue;
    border: 2px solid black;
    padding: 8px;
    margin: 4px 0;
}

/* Form field rows (label + input, matching WPF 25px rows) */
.esp-form-row {
    display: flex;
    align-items: center;
    height: 25px;
    margin-bottom: 1px;
}

.esp-form-label {
    width: 170px;
    min-width: 170px;
    font-size: 11px;
    padding: 0 5px;
    color: #333;
}

.esp-form-input {
    width: 100px;
    height: 20px;
    font-size: 11px;
    border: 1px solid #c0c0c0;
    padding: 1px 4px;
    font-family: inherit;
}

.esp-form-input:focus {
    outline: none;
    border-color: #29588c;
}

.esp-form-input:disabled,
.esp-form-input[readonly] {
    background: #f0f0f0;
    color: #666;
}

/* Desktop convention: user-entered values render black, CALCULATED values blue.
   Applied while a field still holds its derived value (= while Save skips it);
   typing over it turns the entry black, exactly like the WPF UserEntered flag. */
.esp-form-input.esp-input-calc,
.esp-form-input.esp-input-calc:disabled {
    color: #0000cd;
}

.esp-form-select {
    width: 220px;
    height: 22px;
    font-size: 11px;
    border: 1px solid #c0c0c0;
    padding: 1px 4px;
    font-family: inherit;
}

.esp-form-select:focus {
    outline: none;
    border-color: #29588c;
}

.esp-form-unit {
    font-size: 10px;
    color: #666;
    margin-left: 4px;
}

.esp-form-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 25px;
    font-size: 11px;
}

.esp-form-checkbox input[type="checkbox"] {
    margin: 0;
}

/* ── Checkboxes: black tick on white, like the WPF desktop ──────────────────────────────────────
   The browser default is a filled accent-coloured box (blue on Chrome/Edge), which reads as a very
   different control beside the desktop. WPF draws a 13px white box with a thin grey border and a
   black tick, so that is what these become.

   Scoped to the ESP forms — which includes their dialogs, since those render inside the same
   container — rather than applied globally, so admin and login pages keep the platform control.
   `appearance: none` is what allows the box to be drawn at all; without it the ::after tick lands
   on top of the native glyph. */
.esp-form-container input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    min-width: 13px;
    border: 1px solid #767676;
    background: #fff;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    flex: 0 0 auto;
}

.esp-form-container input[type="checkbox"]:checked::after {
    /* A tick, not a glyph: two borders of a rotated box. Scales cleanly and needs no font.
       Sized to fill the 11px interior — 4x8 with a 2px stroke gives a rotated bounding box of
       about 8.5px, which reads at this size; the first attempt (3x7) left a thin mark floating in
       the middle of the box.
       Centred by transform rather than by hand-tuned left/top offsets, so the tick stays put if the
       box size is ever changed. 45% rather than 50% on the vertical: a tick's visual centre sits
       above its geometric one, because the short arm hangs below. */
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 4px;
    height: 8px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.esp-form-container input[type="checkbox"]:focus-visible {
    outline: 1px dotted #333;
    outline-offset: 1px;
}

/* Disabled reads greyed rather than absent — several of these boxes are deliberately locked
   (VSD on a PMM series, CT Motors Only once a motor is selected) and must still show their state. */
.esp-form-container input[type="checkbox"]:disabled {
    background: #f0f0f0;
    border-color: #b5b5b5;
    cursor: default;
}

.esp-form-container input[type="checkbox"]:disabled:checked::after {
    border-color: #6d6d6d;
}

.esp-form-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 25px;
    font-size: 11px;
}

.esp-form-radio input[type="radio"] {
    margin: 0;
}

/* Results panel (read-only text box) */
.esp-form-results {
    border: 2px solid black;
    padding: 8px;
    margin: 4px 0;
    position: relative;
    min-height: 200px;
    overflow: auto;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    background: white;
}

/* Two-column form layout */
.esp-form-2col {
    display: flex;
    gap: 12px;
}

.esp-form-2col > .esp-form-left {
    flex: 1;
    min-width: 0;
}

.esp-form-2col > .esp-form-right {
    flex: 1;
    min-width: 0;
}

/* Three-column form layout */
.esp-form-3col {
    display: flex;
    gap: 12px;
}

.esp-form-3col > * {
    flex: 1;
    min-width: 0;
}

/* Inner tabs (nested within forms) */
.esp-inner-tabs {
    display: flex;
    background: #f0f0f0;
    border-bottom: 2px solid #29588c;
    margin-bottom: 8px;
}

.esp-inner-tab {
    padding: 4px 12px;
    cursor: pointer;
    font-size: 11px;
    border: 1px solid transparent;
    border-bottom: none;
    margin-right: 2px;
    background: transparent;
    color: #555;
}

.esp-inner-tab:hover {
    background: #e0e0e0;
}

.esp-inner-tab.active {
    background: white;
    border-color: #29588c #c0c0c0 transparent #c0c0c0;
    color: #333;
    font-weight: 600;
    margin-bottom: -2px;
    padding-bottom: 6px;
}

/* DataGrid equivalent */
.esp-datagrid {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.esp-datagrid th {
    background: #29588c;
    color: white;
    padding: 4px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 10px;
}

.esp-datagrid td {
    padding: 3px 6px;
    border-bottom: 1px solid #e0e0e0;
}

.esp-datagrid tr:hover td {
    background: #f0f8ff;
}

/* Required field indicator */
.esp-required {
    color: red;
    font-weight: bold;
    margin-left: 2px;
}

/* KVA-style highlight banner */
.esp-highlight-bar {
    background: #5B9BD5;
    border: 2px solid #1F4E79;
    padding: 6px 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* ListBox equivalent */
.esp-listbox {
    border: 1px solid #c0c0c0;
    height: 100%;
    overflow-y: auto;
    font-size: 12px;
}

.esp-listbox-header {
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    background: #f0f0f0;
    border-bottom: 1px solid #c0c0c0;
}

.esp-listbox-item {
    padding: 4px 8px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.esp-listbox-item:hover {
    background: #e8f0fe;
}

.esp-listbox-item.selected {
    background: #29588c;
    color: white;
}

/* Blue divider (Shafts form) */
.esp-divider-blue {
    width: 5px;
    background: LightBlue;
    border: 2px solid black;
    margin: 0 8px;
}

/* ---- Blazor infrastructure ---- */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── Pumps → Single Pump tab (desktop Pumps.xaml:44-171) ────────────────────────────────── */

/* A Performance Data row: label, value box, unit suffix — the desktop's 2fr/3fr/1fr columns. */
.esp-perf-row {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    align-items: center;
    gap: 4px;
    padding: 2px;
    font-weight: normal;
}

.esp-perf-unit {
    font-weight: normal;
    font-size: 11px;
}

/* Performance Data bands (Pump window tab 0). Classic colours = the desktop's; Light/Dark retint them
   in appearance.css. They used to be inline, which Dark mode could not override. */
.esp-perf-band { padding: 2px; }
.esp-perf-band-green { background: Honeydew; }
.esp-perf-band-alice { background: AliceBlue; }
.esp-perf-sep { background: #000; height: 10px; }

/* Select Pump window (Pump window ▸ Select Pump(s) ▸ slot editor): the desktop's #29588c frame with a
   white client area inset 5px, and the bordered stages readout. Classes so Light/Dark can retint. */
.esp-selpump-window { background: #29588c; }
.esp-selpump-client { background: #fff; }
.esp-selpump-stages { border: 1px solid #000; }
/* Pump + housing list rows: hover like the other pick lists, LightCyan when selected (the desktop's). */
.esp-selpump-row { cursor: pointer; }
.esp-selpump-row:hover { background: #d7e3f4; }
.esp-selpump-row.sel { background: lightcyan; }

/* Expanded VSD Chart window (EspVsdChartWindow): Classic = the desktop's navy frame, white client
   area, navy title strip, grey status text. Classes so Light/Dark can retint (appearance.css). */
.vsd-overlay  { background: rgba(0, 0, 0, 0.6); }
.vsd-window   { background: #29588c; }
.vsd-client   { background: #fff; color: #000; }
.vsd-titlebar { background: #29588c; color: #fff; }
.vsd-muted    { color: #555; }
.vsd-error    { color: #a00; }
.vsd-copybtn  { background: lightgray; }

/* The two read-only summary panes under the group boxes. The desktop uses read-only TextBoxes
   with auto scrollbars, so these scroll rather than clip. */
.esp-pump-textpane {
    border: 1px solid #828790;
    background: #fff;
    margin: 2px;
    padding: 4px;
    font-family: Consolas, monospace;
    font-size: 11px;
    white-space: pre-wrap;
    overflow: auto;
    min-height: 0;
}

/* ---------------------------------------------------------------------------------------------
   View Results (desktop Windows/Detail.xaml)

   Every one of its user controls is the same two-row grid: a 25px row holding one "Copy to
   clipboard" button, then a stretched text box or DataGrid beneath it. .esp-results-tab is that
   grid — the button keeps its natural height and the pane below takes what is left and scrolls
   INSIDE itself, so the tab body never grows the page.
   --------------------------------------------------------------------------------------------- */
.esp-results-tab {
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 4px;
}

/* The text pane inside .esp-results-tab: fills the leftover height instead of the fixed 200px
   min-height .esp-form-results carries for the side panels' Results boxes. */
.esp-results-tab .esp-results-pane {
    flex: 1;
    min-height: 0;
    margin: 0;
}

/* ── PVT Lab Data ───────────────────────────────────────────────────────────────────────────────
   The nine lab grids and the Lab Data buttons that open them. The button and the tab share their
   status colours with the desktop, which binds a Background brush per property: nothing with no
   data, LightGreen with data, Tomato when a row is outside its band. */

.esp-lab-btn {
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
}

.esp-lab-note {
    background: #eef4fb;
    border-left: 3px solid #29588c;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.4;
}

.esp-lab-warn {
    background: #fff3cd;
    border-left: 3px solid #d9822b;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.4;
}

.esp-lab-units {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.esp-lab-grid {
    border-collapse: collapse;
    margin-bottom: 8px;
    min-width: 520px;
}

.esp-lab-grid th {
    background: #29588c;
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    padding: 3px 6px;
    white-space: nowrap;
}

.esp-lab-grid td {
    border: 1px solid #d0d7de;
    padding: 1px 3px;
}

/* The desktop turns the CELL TEXT red and keeps the value — it does not reject the entry. */
.esp-lab-grid td.bad input { color: #d00; font-weight: bold; }

.esp-lab-grid td.esp-lab-empty {
    padding: 8px;
    color: #666;
    font-style: italic;
    font-size: 12px;
}

.esp-lab-del {
    padding: 0 6px;
    line-height: 18px;
}

.esp-lab-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.esp-lab-hint { font-size: 11px; color: #555; }

.esp-lab-paste {
    display: block;
    width: 520px;
    font-family: Consolas, monospace;
    font-size: 12px;
    margin-bottom: 6px;
}

.esp-lab-pastebox {
    border: 1px solid #d0d7de;
    background: #fafbfc;
    padding: 6px;
    margin-bottom: 8px;
    width: 532px;
}

/* ── Auto Adjust Tool ───────────────────────────────────────────────────────────────────────────
   The desktop bands its grid by what each group of columns is for: yellow = flow, blue = the
   discharge pressure the solve actually converges, green = the RPM pair. Kept, because that banding
   is how a user reads twenty-two columns at a glance. */

.esp-aa-buttons { display: flex; gap: 10px; margin-bottom: 8px; }
.esp-aa-col { display: flex; flex-direction: column; gap: 4px; }
.esp-aa-col .esp-form-btn { min-width: 150px; }

.esp-aa-primary { border: 2px solid #29588c; font-weight: 600; }
.esp-aa-accept { background: #90ee90; }

.esp-aa-message {
    min-height: 22px;
    padding: 3px 8px;
    margin-bottom: 8px;
    font-size: 12px;
    border: 1px solid transparent;
}
.esp-aa-message.good { background: #90ee90; border-color: #6cc06c; }
.esp-aa-message.bad  { background: #f08080; border-color: #d06060; }

.esp-aa-gridwrap { overflow: auto; max-height: calc(60vh / var(--zz, 1)); border: 1px solid #d0d7de; }

.esp-aa-grid {
    border-collapse: collapse;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.esp-aa-grid th {
    position: sticky;
    top: 0;
    background: #29588c;
    color: #fff;
    font-weight: normal;
    text-align: right;
    padding: 2px 5px;
    border-right: 1px solid #4a7bb5;
}
.esp-aa-grid td {
    text-align: right;
    padding: 1px 5px;
    border-bottom: 1px solid #eaeff3;
    border-right: 1px solid #eaeff3;
}
.esp-aa-grid td.idx { text-align: center; color: #666; background: #f4f6f8; }

/* The desktop's three bands. Applied to the header too so the grouping survives scrolling. */
.esp-aa-grid th.y { background: #7a7320; }
.esp-aa-grid th.b { background: #1f4e79; }
.esp-aa-grid th.g { background: #2f6b46; }
.esp-aa-grid td.y { background: #ffffe0; }
.esp-aa-grid td.b { background: #add8e6; }
.esp-aa-grid td.g { background: #90ee90; }

.esp-aa-grid tbody tr:hover td { filter: brightness(0.95); }

/* ── Well Deviation ─────────────────────────────────────────────────────────────────────────────
   MD / Inc / Azm are typed; TVD, dogleg, north, east and offset are computed and shown on a tinted
   ground so it is obvious which columns you can edit and which the Calculate button fills in. */

.esp-wd-buttons { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.esp-wd-hint { font-size: 11px; color: #555; }

/* The desktop's two rows of three (WellDeviation.xaml rows 0-1), on its own column widths:
   200 / 100 / 100 px. Fixed, and deliberately NOT wrapping — the buttons keep their places at every
   window width, which is the whole reason an engineer can hit them without looking. */
.esp-wd-btnblock {
    display: grid;
    grid-template-columns: 200px 100px 100px;
    gap: 6px;
    margin-bottom: 8px;
    width: max-content;
}
.esp-wd-btnblock .esp-form-btn { width: 100%; }

/* Paste Options — the desktop window is 700x225, so the dialog is 700 wide and sized to content.
   Chrome, backdrop and title bar come from the shared .esp-modal shell. */
.esp-wd-pastebox {
    width: 700px;
}
.esp-wd-pastebox:focus { outline: none; }   /* focused on open for Ctrl+V, but not ringed */
/* The desktop's Paste Options window: a bold italic instruction over four stacked radios. */
.esp-wd-pastehdr {
    font-size: 11px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 4px;
}
.esp-wd-pasteopts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.esp-wd-pasteopt {
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.esp-wd-paste { display: block; width: 100%; font-family: Consolas, monospace; font-size: 12px; margin-bottom: 6px; }

.esp-wd-status { font-size: 12px; color: #333; margin-bottom: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.esp-wd-warn { color: #96650b; font-weight: 600; }
.esp-wd-note { color: #2e6b2e; font-weight: 600; }   /* what the last paste did, beside the grid */

/* ErrorBoundary fallback — the exception an engineer would otherwise never see. */
.esp-boundary-error { background: #fff3f3; border: 1px solid #d9534f; padding: 10px 12px; font-size: 12px; }
.esp-boundary-exc { margin-top: 6px; font-family: Consolas, monospace; color: #a12622; }
.esp-boundary-stack { margin-top: 6px; max-height: calc(40vh / var(--zz, 1)); overflow: auto; font-size: 11px; white-space: pre-wrap; }

.esp-wd-gridwrap { overflow: auto; max-height: calc(58vh / var(--zz, 1)); border: 1px solid #d0d7de; max-width: 900px; }

/* ⚑ table-layout: fixed is what makes the columns exist WITHOUT DATA. An auto-laid table measures
   its cells, so an empty survey collapses every column onto its header text and the grid looks
   broken before anything has been typed. The desktop's DataGrid gives each column Width="1*" — a
   fixed equal share of the window, rows or no rows — and the colgroup below is that. */
.esp-wd-grid {
    border-collapse: collapse;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    table-layout: fixed;
    width: 100%;
    min-width: 880px;   /* nine readable columns; the wrap scrolls below this, as it already did */
}
.esp-wd-col { width: 11.11%; }
.esp-wd-grid td.esp-wd-empty { padding: 8px; color: #666; font-style: italic; text-align: left; }
/* The editable columns' inputs are 100px by default, which under a fixed layout would sit in the
   cell rather than fill it — and the column would then look narrower than the header above it. */
.esp-wd-grid td .esp-form-input { width: 100%; }
/* A number too long for its share is clipped rather than allowed to blow the column out. */
.esp-wd-grid td.calc { overflow: hidden; text-overflow: ellipsis; }
.esp-wd-grid th {
    position: sticky;
    top: 0;
    background: #29588c;
    color: #fff;
    font-weight: normal;
    text-align: right;
    padding: 3px 6px;
    border-right: 1px solid #4a7bb5;
}
.esp-wd-grid th.calc { background: #1f4e79; }
.esp-wd-grid td { text-align: right; padding: 1px 4px; border-bottom: 1px solid #eaeff3; border-right: 1px solid #eaeff3; }
.esp-wd-grid td.calc { background: #eef4fb; color: #333; padding-right: 8px; }
.esp-wd-grid td.idx { text-align: center; color: #666; background: #f4f6f8; }

/* ── Set Units ──────────────────────────────────────────────────────────────────────────────── */
.esp-su-presets { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.esp-su-note { font-size: 11px; color: #2e6b2e; font-weight: 600; }
.esp-su-note-alt { color: #8a5a00; }
.esp-su-warn {
    margin-top: 10px; padding: 6px 8px; font-size: 11px; line-height: 1.45;
    background: #fff6e0; border: 1px solid #e2c88a; color: #6b4d00;
}

/* === Viscosity / Emulsion Detail (ports Emulsion_Detail.xaml) ========================= */

/* The desktop puts every input in ONE "Viscosity" group, two columns wide: override + viscosity
   + WFI + the adjust checkbox on the left, emulsion + emulsion factor on the right. */
.esp-visc-inputs {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.esp-visc-inputs .esp-form-label {
    width: 200px;
    min-width: 200px;
}

.esp-label-right {
    text-align: right;
}

/* The three average panels sit side by side under the inputs, as three equal columns. */
.esp-visc-panels {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.esp-visc-panel {
    flex: 1 1 210px;
    min-width: 210px;
}

.esp-visc-name {
    width: 120px;
    min-width: 120px;
}

/* Values are right-aligned so the decimal points line up down the column, as they do in the
   WPF grid where every value sits in its own fixed-width column. */
.esp-visc-value {
    flex: 1;
    text-align: right;
    font-size: 11px;
    color: #333;
    font-variant-numeric: tabular-nums;
}

/* Pip / Pd footer, separated by the black rule the desktop draws across row 6. */
.esp-visc-foot {
    display: flex;
    align-items: center;
    height: 25px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 2px solid black;
}

.esp-visc-foot .esp-form-label {
    width: 40px;
    min-width: 40px;
}

/* === Set Units — two columns matching SetUnits.xaml's grid ============================ */

.esp-su-grid {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.esp-su-col {
    flex: 1 1 320px;
    min-width: 320px;
}

/* The desktop leaves whole grid rows empty to group related units (rows 5 and 9 on the left,
   4-5 and 9 on the right). Reproduced so the groupings read the same way. */
.esp-su-gap {
    height: 14px;
}

/* Keeps the right column's first dropdown level with the left column's, which sits under the
   US Standard / Metric buttons. */
.esp-su-presets-spacer {
    height: 34px;
}

.esp-su-devhead {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin: 2px 0 8px 5px;
}

.esp-su-devnote {
    font-size: 11px;
    color: #555;
    margin: 0 0 8px 5px;
    max-width: 320px;
}

/* === Pump Catalog Curve Tool (ports Tools/Pump_Catalog_Curve_Tool.xaml) ============== */

/* The empty-list case is expected, not an error — every filter starts off. Styled as guidance
   rather than a warning so it does not read as a failure. */
.esp-pcc-empty {
    margin: 8px 5px 0;
    padding: 8px 10px;
    font-size: 11px;
    color: #5a4a00;
    background: #fff8e1;
    border: 1px solid #e8d9a0;
    max-width: 640px;
}

.esp-pcc-conditions { display: flex; gap: 24px; flex-wrap: wrap; }

.esp-pcc-derived {
    width: 100px;
    font-size: 11px;
    color: #0000cd;
    font-variant-numeric: tabular-nums;
}

.esp-pcc-facts {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 11px;
    color: #333;
    margin: 2px 5px 10px;
}

.esp-pcc-obs {
    color: #a33;
    font-weight: bold;
    border: 1px solid #a33;
    padding: 0 5px;
}

.esp-pcc-disclaimer {
    margin: 10px 5px 0;
    font-size: 10px;
    color: #666;
    max-width: 760px;
    line-height: 1.4;
}

/* PCCT tab shell — mirrors the desktop's TabControl (four LIVE tabs; three are Collapsed there). */
.esp-pcc-tabs, .esp-pcc-subtabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
}
.esp-pcc-subtabs { margin-top: 4px; }

.esp-pcc-tab {
    padding: 5px 12px;
    font-size: 11px;
    border: 1px solid #999;
    border-bottom: none;
    background: #ececec;
    cursor: pointer;
    user-select: none;
}
.esp-pcc-tab:hover { background: #e0e6f0; }
.esp-pcc-tab.active { background: #fff; font-weight: bold; position: relative; top: 1px; }

.esp-pcc-settings { display: flex; gap: 16px; flex-wrap: wrap; }
.esp-pcc-slotsettings { flex: 1 1 320px; min-width: 320px; }
.esp-pcc-corr { margin-top: 6px; border-top: 1px solid #ddd; padding-top: 6px; }

/* PCCT header strip — desktop Grid.Row 1, above the TabControl. */
.esp-pcc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 6px 4px 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 8px;
}
.esp-pcc-hps { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: bold; }
.esp-pcc-hdrfield { display: flex; align-items: center; gap: 4px; }
.esp-pcc-hdrfield .esp-form-label { width: auto; min-width: 0; }
.esp-pcc-well { width: 130px; }
.esp-pcc-fp {
    border: 1px solid #b39ddb;
    background: #f3eefc;
    color: #4a2f7a;
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
}

/* Design Flow Point(s) dialog — ports AdditionalFlowPoints.xaml (420x420). */
.esp-pcc-fpdlg { width: 420px; }
.esp-pcc-fphint { font-size: 11px; margin-bottom: 6px; color: #333; }
/* Design Flow Point(s): the design flow is its own entry above the dated points (2026-10-06). */
.esp-pcc-fpdesign { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--zw-line, #c8cdd3); }
.esp-pcc-fpdesign .esp-form-input { width: 110px; }
/* "Copied to Clipboard" after a click on the Pump Performance Curve (4.7.1 MessageBox). */
.esp-pcc-copied { width: 300px; }
.esp-pcc-copied-body { padding: 10px 14px; font-size: 13px; line-height: 1.6; }
.esp-pcc-fpgrid { width: 100%; border-collapse: collapse; font-size: 11px; }
.esp-pcc-fpgrid th {
    text-align: left;
    background: #ececec;
    border: 1px solid #ccc;
    padding: 3px 5px;
    font-weight: bold;
}
.esp-pcc-fpgrid td { border: 1px solid #ddd; padding: 2px 4px; }
.esp-pcc-fpgrid td.idx { text-align: center; color: #666; background: #fafafa; }
.esp-pcc-fpbuttons { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.esp-pcc-fpleft { flex: 1; }

/* Generic ESP dialog shell — same geometry as the HPS modal, named for reuse outside HPS.
   The desktop's dialogs are #29588c-chromed windows; this matches that. */
.esp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.esp-modal {
    background: white;
    border: 1px solid #1a3a5c;
    border-radius: 4px;
    max-width: calc(90vw / var(--zz, 1));
    max-height: calc(85vh / var(--zz, 1));
    overflow: auto;
    padding: 12px 14px 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.esp-modal-title {
    background: #29588c;
    color: white;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 12px;
    margin: -12px -14px 10px;
    border-radius: 4px 4px 0 0;
}

/* Saved Flow Point Sets picker + name prompt. */
.esp-pcc-setdlg { width: 640px; }
.esp-pcc-namedlg { width: 360px; }
.esp-pcc-namebox { width: 100%; }
.esp-pcc-fpgrid tbody tr { cursor: pointer; }
.esp-pcc-fpgrid tbody tr:hover { background: #f0f4fa; }
.esp-pcc-fpgrid tbody tr.sel { background: #d7e3f4; }

/* PCCT chart pane. AutoSize measures the PARENT, so the parent needs a definite height — a
   percentage height against an auto-height ancestor resolves to auto and the chart collapses.
   vh keeps the plot filling the window on a large monitor without overflowing a laptop. */
.esp-pcc-chartpane {
    width: 100%;
    /* Fills whatever height the tab body has left, so the plot grows into the space the removed
       footer strips used to occupy. The pane is the element AutoSize measures, so it needs a
       DEFINITE height: it gets one from .esp-form-tabbody being a flex:1 child with min-height:0. */
    height: 100%;
    min-height: 320px;
}

/* PCCT pump picker — the desktop's read-only DataGrid (Series / Model / Stage Type), not a combo. */
.esp-pcc-pumpgrid-wrap {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #ccc;
    margin: 6px 5px 0;
    max-width: 460px;
}
.esp-pcc-pumpgrid { width: 100%; }
.esp-pcc-pumpgrid thead th { position: sticky; top: 0; }

/* PCCT select-pump header: manufacturer + the five type filters on ONE line, as the desktop's
   Grid.Row="0" puts them. Wraps on a narrow window rather than pushing the grid off-screen. */
.esp-pcc-selectrow {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 2px 5px 6px;
    font-size: 11px;
    color: #333;
}
.esp-pcc-selectrow .esp-form-label { width: auto; min-width: 0; padding-right: 0; }
.esp-pcc-selectrow label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ── Well Architecture tubular picker (Add Casing / Add Liner / Add Tubing) ──────────────────────
   The web stand-in for the desktop's cmCasing / cmLiner / cmTubing popups. Those are WPF
   ContextMenus with Height="200" that scroll; this is the same idea in the app's modal shell.
   Width is fixed so the four numeric columns line up between casing and tubing variants. */
.wtp-modal { width: 520px; }

.wtp-listwrap {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid #ccc;
}

.wtp-list { width: 100%; }
.wtp-list tbody tr { cursor: pointer; }
.wtp-list tbody tr:hover { background: #d7e3f4; }
.wtp-list td { text-align: right; }
.wtp-list td:last-child { text-align: left; }
.wtp-list th { position: sticky; top: 0; background: #eef2f7; z-index: 1; }

.wtp-empty { padding: 16px 8px; color: #a33; }

.wtp-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Add Auxillary Tube dialog — the desktop's two combos + checkbox, same order. */
.aux-modal { width: 420px; }
.aux-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}
.aux-row > label { width: 130px; flex: none; }
.aux-row .well-select { flex: 1; }
.aux-check > label { width: auto; display: flex; align-items: center; gap: 6px; }

/* Well node grid + its side actions. "Check For Errors" moved out of the Add-buttons row and sits
   to the RIGHT of the grid it validates, so the Add row reads as nothing but Add actions.
   align-items:flex-start keeps the button at the top of the column instead of centring it against a
   tall grid; min-width:0 lets the grid container shrink so its own horizontal scroll still works. */
.well-grid-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.well-grid-row > .well-grid-container {
    flex: 1;
    min-width: 0;
}

.well-grid-side {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

/* EUE / NON-EUE. Left-aligned like the desktop's text column, and nowrap so "NON-EUE" cannot wrap
   into two lines and change the row height. */
.well-cell-eue {
    text-align: left;
    white-space: nowrap;
}

/* A grid cell the node type does not use — the desktop greys these rather than hiding them, so the
   row keeps its shape and a placeholder zero cannot be mistaken for an entered value.
   Most visible on RPP's Stop MD: a Reservoir Pressure Point is a single depth, not an interval. */
.well-cell-disabled {
    color: #aaa;
}

/* Casing-vs-equipment clearance warning — the desktop's lbCasingID_Issue (red, bold, WhiteSmoke). */
.well-casing-issue {
    color: #c00;
    font-weight: bold;
    font-size: 14px;
    background: #f5f5f5;
    padding: 6px 8px;
    margin: 6px 0;
}

/* The paired Clear Equipment button — destructive, so it does not look like the Add buttons. */
.well-btn-warn {
    background: #f3d6d6;
    border-color: #c00;
}
.well-btn-warn:hover { background: #eec2c2; }

/* Why a derived field is empty. Shown only when the value is missing, so it never nags. */

/* Well Deviation ▸ Graphs — the desktop's WellDeviation_Graphs window (940×650, two 1* rows × two
   1* columns), as a modal of the same shape. ⚠ A GRID, not a wrapping flex row: the wrap put the
   builder's 760px charts one under the next on any screen under 1520px wide, so only the first was
   in view. The cells size to their FIXED charts (the razor's GraphW × GraphH — one desktop cell),
   so the block is always the desktop's 2×2 and never depends on the viewport; the modal scrolls
   (esp-modal has max-width/height + overflow auto) instead of squeezing the charts. */
.esp-wd-graphsbox { width: 960px; }

/* Well Deviation ▸ 3D View (rough draft, 2026-10-01). Classic colours here; Light/Dark in appearance.css. */
.esp-s3d-box { width: 1100px; max-width: calc(96vw / var(--zz, 1)); }
/* Full screen (Paul 2026-10-01): the window fills the screen and the scene takes every spare pixel of height. */
.esp-s3d-box:fullscreen { width: calc(100vw / var(--zz, 1)); max-width: none; height: calc(100vh / var(--zz, 1)); max-height: none; margin: 0; border-radius: 0;
    display: flex; flex-direction: column; box-sizing: border-box; padding: 8px 12px; background: var(--zw-panel-bg, #fff); }
.esp-s3d-box:fullscreen .esp-s3d-body { flex: 1 1 auto; height: auto; min-height: 0; }
.esp-s3d-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 2px; flex-wrap: wrap; }
.esp-s3d-label { font-size: 12px; font-weight: 600; margin-right: 2px; }
.esp-s3d-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-left: 10px; cursor: pointer; white-space: nowrap; }
.esp-s3d-body { display: flex; gap: 10px; height: calc(70vh / var(--zz, 1)); min-height: 380px; }
.esp-s3d-canvas { flex: 1 1 auto; min-width: 0; border: 1px solid #999; background: #fff; position: relative; overflow: hidden; }
.esp-s3d-side { flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.esp-s3d-legend { border: 1px solid #c8cdd3; padding: 8px; }
.esp-s3d-legend-title { font-weight: 700; margin-bottom: 6px; }
.esp-s3d-legend-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.esp-s3d-swatch { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }
.esp-s3d-readout { border: 1px solid #c8cdd3; padding: 8px; min-height: 44px; line-height: 1.5; }
/* Station tooltip beside the pointer on the 3D canvas (10-13); the side readout keeps showing the same values. */
.esp-s3d-tip { display: none; position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; white-space: nowrap;
    background: var(--zw-panel-bg, #fff); color: var(--zw-ink, #000); border: 1px solid #828790; border-radius: 3px;
    padding: 4px 7px; font-size: 11px; line-height: 1.45; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.esp-s3d-muted { color: #555; font-size: 11px; }
.esp-s3d-note { color: #a00; font-weight: 600; }
.esp-wd-graphs {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 12px;
    padding: 12px 12px 0;
    justify-content: center;
}
.esp-wd-graph {
    border: 1px solid #ccc;
    line-height: 0;
}

/* Well Deviation ▸ Set Units — the desktop's Well_Dev_Select_Units dialog (400×300). */
.esp-wd-unitsbox { width: 400px; }
.esp-wd-unitspresets {
    display: flex;
    gap: 8px;
    padding: 8px 12px 4px;
}


/* Well Architecture ▸ Temperature Gradient. The desktop window is a plain WHITE grid with two
   black separator rules — no coloured panels — and two label/field columns. */
.esp-tg-page {
    background: #fff;
    padding: 8px 10px;
}
.esp-tg-radios {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 2px 24px;
    margin-bottom: 6px;
}
.esp-tg-radio {
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}
.esp-tg-radio input {
    margin-right: 5px;
}
/* A correlation held behind the bench gate: shown where the desktop shows it, but greyed and
   labelled, so its absence is visible rather than mysterious. */
.esp-tg-radio-gated {
    color: #888;
    cursor: not-allowed;
}
.esp-tg-gated-tag {
    font-size: 10px;
    font-style: italic;
    margin-left: 5px;
}
/* Grid.Row height 10 with a Background="Black" Border — the window's two rules. */
.esp-tg-rule {
    height: 1px;
    background: #000;
    margin: 8px 0;
}
.esp-tg-heading {
    font-size: 14px;
    font-weight: bold;
}
.esp-tg-headrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.esp-tg-optnote {
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
}
/* Two label/field/unit columns, as Grid.Column 0 and 3 are on the desktop. */
.esp-tg-grid {
    display: grid;
    grid-template-columns: repeat(2, auto minmax(90px, 130px) auto);
    gap: 3px 10px;
    align-items: center;
    margin-top: 6px;
}
.esp-tg-label {
    font-size: 11px;
}
.esp-tg-unit {
    font-size: 10px;
    color: #555;
    padding-right: 14px;
}
.esp-tg-note {
    font-size: 11px;
    color: #8a6d00;
    background: #fffbe6;
    border-left: 3px solid #e0c000;
    padding: 5px 7px;
    margin: 4px 0;
}
.esp-tg-empty {
    font-size: 11px;
    color: #666;
    padding: 14px;
}
/* The desktop's DataGrid fills the tab and scrolls inside it. A fixed 460 px cap showed ~20 of the
   156 rows with an inner scrollbar that was easy to miss inside a page that also scrolls — Paul
   read it as the table "stopping at 19" (2026-09-02). Viewport-relative instead, header pinned. */
.esp-tg-tablewrap {
    max-height: calc(calc(100vh / var(--zz, 1)) - 230px);
    overflow: auto;
}
/* ⚠ OPAQUE. A sticky th with no background is transparent, so the rows scrolled up UNDER the header
   text and read through it (Paul, 2026-09-02 evening). White is what the table sits on; the shadow
   is the bottom rule, because a border on a sticky cell does not stay put in every browser. */
.esp-tg-tablewrap th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 0 1px 0 #999;
}
@media (max-width: 900px) {
    .esp-tg-grid { grid-template-columns: auto minmax(90px, 130px) auto; }
    .esp-tg-radios { grid-template-columns: 1fr; }
}

/* ── .esp-wpfgrid — a WPF DataGrid look-alike (Expanded VSD Chart → Inflow Table, 2026-09-09) ──
   The desktop grid is an auto-generated DataGrid with GridLinesVisibility=All: light-gray cell
   lines both ways, a flat light-gray header row with a darker bottom rule, right-aligned numbers.
   Sticky header carries its own background so rows do not read through it when the pane scrolls
   (the Temp Gradient table needed the same fix, 2026-09-02). */
.esp-wpfgrid {
    border-collapse: collapse;
    border: 1px solid #a0a0a0;
    background: #fff;
}
.esp-wpfgrid th {
    position: sticky;
    top: 0;
    background: #f0f0f0;
    color: #000;   /* a broader th rule paints header text white; the WPF header is black */
    border: 1px solid #c9caca;
    border-bottom: 2px solid #a0a0a0;
    padding: 2px 6px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.esp-wpfgrid td {
    border: 1px solid #c9caca;
    padding: 1px 6px;
    color: #000;
}
.esp-wpfgrid tbody tr:hover td {
    background: #eef5ff;
}

/* ── .zone-busy-* — the toolbar's Auto Adjust wait modal (2026-09-09) ────────────────────────
   The desktop shows a WaitCursor for the seconds a solve takes; the web shows a small centred box
   with an INDETERMINATE bar (the solver reports no step count). Backdrop blocks the page meanwhile. */
.zone-busy-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center;
    z-index: 3000;
    cursor: progress;
}
.zone-busy-box {
    background: #fff;
    border: 1px solid #29588c;
    border-top: 6px solid #29588c;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    min-width: 320px;
    padding: 14px 18px 16px 18px;
    font-family: Arial, sans-serif;
    color: #222;
}
.zone-busy-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.zone-busy-text  { font-size: 12px; color: #444; margin-bottom: 10px; }
.zone-busy-bar {
    position: relative; height: 10px;
    background: #e6ecf3; border: 1px solid #b7c7da; border-radius: 5px;
    overflow: hidden;
}
.zone-busy-fill {
    position: absolute; top: 0; bottom: 0; width: 35%;
    background: linear-gradient(90deg, #4a7fbf, #29588c);
    border-radius: 5px;
    animation: zone-busy-slide 1.2s ease-in-out infinite;
}
@keyframes zone-busy-slide {
    0%   { left: -35%; }
    100% { left: 100%; }
}

/* ---- HPS housing selection (2026-09-15) ---- */
/* Available housings on the left, Selected Housing(s) beside them — the desktop's arrangement. */
.hps-housing-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;      /* Selected Housing(s) ends level with Available Housings (Paul, 2026-09-17) */
    margin-top: 12px;
}

/* The side column is a wrapping flex row whose own align-items is flex-start (the sizing layout
   above needs that); here its one panel must fill the stretched height. */
.hps-housing-layout > .hps-sizing-side { align-items: stretch; }
.hps-selected-housings { min-width: 340px; display: flex; flex-direction: column; }

/* Required / Selected / Diff, the three counts the desktop puts above the selected grid, with
   Clear Pump(s) following Diff on the same line. */
.hps-stage-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 0 12px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #243240;
}

/* Diff must reach zero before the design is complete, so it is coloured rather than just printed. */
.hps-diff-ok { color: #1e7a34; }
.hps-diff-off { color: #b02a37; }

/* A recommended housing row, the desktop's "Yes" column made visible at a glance. */
.equip-table tr.hps-recommended td { background: #eef7ee; }

/* The Limits strip: the desktop draws a 100x10 bitmap per row (Pump_Group.cs:1521) — off-range at each
   end, min→BEP then BEP→max in range, and a red mark at the design flow. Same information, drawn in CSS. */
.hps-limits {
    --hps-lim-out: LemonChiffon;
    --hps-lim-low: LawnGreen;
    --hps-lim-high: Green;
    position: relative;
    display: inline-block;
    width: 95px;
    height: 10px;
    border: 1px solid #000;
    vertical-align: middle;
}

.hps-limits i {
    position: absolute;
    top: 2px;
    width: 2px;
    height: 6px;
    background: red;
    transform: translateX(-1px);
}

/* The Main Pump form inside its panel needs the panel's own padding. */
.hps-main-pump-grid { padding: 0 0 8px; max-width: none; }

/* Main Pump: labels BESIDE their boxes in two columns, the desktop's arrangement (Paul, 2026-09-17:
   the stacked label-over-box groups made the panel tall enough to need a scrollbar). Each column is a
   run of .hps-oi-row; the label track is wide enough for "Requested Differential Pressure (psi)". */
.hps-main-pump-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
    align-items: start;
}
.hps-main-pump-inline .hps-oi-row { grid-template-columns: 200px 1fr; padding: 3px 12px; }
.hps-main-pump-inline .hps-oi-row input,
.hps-main-pump-inline .hps-oi-row select { height: 28px; box-sizing: border-box; }
.hps-main-pump-inline .hps-oi-row input:focus,
.hps-main-pump-inline .hps-oi-row select:focus {
    outline: none;
    border-color: #29588c;
    box-shadow: 0 0 0 1px rgba(41,88,140,0.25);
}
.hps-main-pump-inline .hps-oi-row input[readonly] { background: #f5f5f5; color: #666; }

/* The Find Pumps / Clear row spans both tracks of the left column (desktop HPS.xaml:552 puts
   btnFindPumps under the labels in row 6). The status text wraps under the buttons if it is long. */
.hps-main-pump-inline .hps-oi-row-span { grid-template-columns: 1fr; }
.hps-main-pump-inline .hps-oi-row-span .hps-btn-group { flex-wrap: wrap; }

/* ---- Pump Sizing panel heights (Paul, 2026-09-15; reworked 2026-09-17) ----
   Main Pump, Units and VSD Freq Limits end at the same bottom line — the desktop gives its three boxes
   one common height. Since the inline rows (2026-09-17) every field fits without scrolling, so the
   panels are no longer given a fixed height: the flex rows STRETCH the two side panels to the height
   of Main Pump, and nothing scrolls (Paul: "Is the scroll bar in that box still needed?" — no). */
/* ⚠ Scoped to the SIZING layout. The housing selection below reuses .hps-sizing-main /
   .hps-sizing-side, and those panels must keep growing with their grids. */
.hps-sizing-layout { align-items: stretch; }
.hps-sizing-layout > .hps-sizing-side { align-items: stretch; }

.hps-sizing-layout > .hps-sizing-main > .hps-oi-section,
.hps-sizing-layout > .hps-sizing-side > .hps-oi-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.hps-main-pump-grid { flex: 1; min-height: 0; }

/* HPS chart tabs: the pane AutoSize measures. It needs a DEFINITE height — .hps-panel-content is a
   flex:1 child, so 100% of it is real — with a floor so a short window still shows a usable plot. */
.hps-chartpane {
    width: 100%;
    height: 100%;
    min-height: 420px;
}

/* HPS Customers / View All Quotes windows */
.hps-modal-wide { width: min(1100px, calc(96vw / var(--zz, 1))); }
.hps-cust-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hps-cust-toolbar input { width: 280px; }
.hps-cust-count { font-size: 11px; opacity: 0.75; }
.hps-cust-gridwrap { max-height: calc(55vh / var(--zz, 1)); overflow: auto; }
.hps-cust-gridwrap tbody tr { cursor: pointer; }
.hps-cust-selected td { background: #29588c !important; color: white; }
.hps-cust-form { display: flex; gap: 24px; }
.hps-cust-col { display: grid; grid-template-columns: 140px 1fr; gap: 6px 10px; align-items: center; flex: 1; }
.hps-cust-bad { border-color: #c62828 !important; }
.hps-quotes-title { font-size: 11px; opacity: 0.8; margin-bottom: 6px; }

/* The bottom group of the HPS action column: pushed to the foot of the (flex:1) list, same 2px rhythm. */
.hps-action-bottom {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* View All Quotes: fourteen columns need the width. Near full-screen, a taller grid, compact text, and
   the Open column pinned at the right edge so it is reachable without scrolling sideways. */
.hps-quotes-modal { width: calc(98vw / var(--zz, 1)); max-width: calc(98vw / var(--zz, 1)); max-height: calc(94vh / var(--zz, 1)); }
.hps-quotes-modal .hps-cust-gridwrap { max-height: calc(74vh / var(--zz, 1)); }
.hps-quotes-modal .hps-open-table { font-size: 11px; white-space: nowrap; }
.hps-quotes-modal .hps-open-table th { position: sticky; top: 0; z-index: 2; }
.hps-quotes-modal .hps-col-open { position: sticky; right: 0; background: inherit; z-index: 1; }
.hps-quotes-modal .hps-open-table td.hps-col-open { background: var(--zw-panel-bg, white); box-shadow: -4px 0 6px -4px rgba(0,0,0,0.25); }
.hps-quotes-modal .hps-open-table th.hps-col-open { z-index: 3; }

/* === Tools > NPSHr (HPS) - the NPSHr Curves workbook as a tool (2026-09-17) ==================== */
/* Header-strip number boxes; the rest of the tool reuses the Pump Catalog Curve Tool classes. */
.hps-npshr-num { width: 90px; }

/* ESP action panel: the six equipment buttons while the case is incomplete (desktop Incomplete_Data_Test).
   Still clickable — the click is what shows the reason — but visibly not ready. Paul, 2026-09-18. */
.esp-action-btn.gated { opacity: 0.6; }
.esp-action-note {
    margin: 6px 8px 2px;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.3;
    color: #b00020;
    background: #fff3f3;
    border: 1px solid #f0c0c0;
    border-radius: 2px;
}

/* ── Analysis Tool (ESP ▸ Tools) — desktop Analysis_Mode_MainWindow: tabs left, bar pairs right ── */
.esp-ana-body { display: flex; gap: 10px; align-items: flex-start; }
.esp-ana-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.esp-ana-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 6px; }
.esp-ana-box { margin: 3px 0; font-size: 11px; }
.esp-ana-off { opacity: 0.6; }
.esp-ana-sep { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
.esp-ana-sep-label { font-size: 11px; }
.esp-ana-stack { display: flex; flex-direction: column; gap: 3px; }
.esp-ana-pair { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.esp-ana-label { font-size: 11px; font-weight: normal; }
.esp-ana-strong { font-weight: 900; }
.esp-ana-wide { width: 100%; max-width: 100%; }
.esp-ana-num { width: 80px; }
.esp-ana-check { display: flex; align-items: center; gap: 5px; padding: 2px; font-weight: normal; }
.esp-ana-fluid { display: flex; flex-direction: column; gap: 4px; }
.esp-ana-emul { display: flex; justify-content: flex-end; margin-top: 6px; }
.esp-ana-right { flex: 0 0 auto; display: grid; grid-template-columns: 170px 170px; align-items: start; }
.esp-ana-chart { margin: 3px; }
.esp-ana-legend { display: flex; flex-direction: column; align-items: center; margin: 2px 0; font-size: 11px; font-weight: bold; }
.esp-ana-design { color: darkblue; }
.esp-ana-other { color: darkred; }
.esp-ana-sync { display: flex; justify-content: center; margin: 5px 3px; }
.esp-ana-sync .esp-form-btn { width: 154px; height: 29px; }
@media (max-width: 1100px) { .esp-ana-body { flex-wrap: wrap; } }

/* ── Tools ▸ Sensitivities Tool (desktop Tools/SensitivitiesMode/SensitivitiesWindow.xaml) ──
   Toolbar, four tabs, Save/Exit + Exit along the bottom. The grid's cell colours are the desktop's:
   the leading columns and the read-only base row LightGray, result cells LightBlue, Errors
   LightGreen/Tomato and Warnings LightGreen/Yellow. */
.esp-sens .esp-inner-tabs { margin: 0 8px 0; }
.esp-sens-toolbar { display: flex; align-items: center; gap: 2px; padding: 3px 8px; background: #ababab; flex-shrink: 0; }
.esp-sens-tbtext { font-size: 12px; padding: 2px 6px; border: 1px solid transparent; background: transparent; cursor: pointer; color: #000; }
.esp-sens-tbtext:hover:not(:disabled), .esp-sens-tbicon:hover:not(:disabled) { border-color: #3c7fb1; background: #dcecfc; }
.esp-sens-tbicon { padding: 0; border: 1px solid transparent; background: transparent; cursor: pointer; line-height: 0; }
.esp-sens-tbicon img { height: 25px; }
.esp-sens-tbtext:disabled, .esp-sens-tbicon:disabled { opacity: 0.5; cursor: default; }
.esp-sens-sep { width: 1px; height: 22px; background: #777; margin: 0 10px; }
.esp-sens-sep.wide { margin: 0 15px; }
.esp-sens-body { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 4px; display: flex; flex-direction: column; background: white; }
.esp-sens-gridwrap { flex: 1 1 auto; min-height: calc(20vh / var(--zz, 1)); overflow: auto; border: 1px solid #c0c0c0; }
.esp-sens-grid { border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.esp-sens-grid th { position: sticky; top: 0; z-index: 1; background: #f0f0f0; color: #000; font-weight: normal; text-align: center;
    padding: 2px 4px; border: 1px solid #c9caca; vertical-align: bottom; }
.esp-sens-grid td { padding: 1px 4px; border: 1px solid #e0e0e0; text-align: right; height: 20px; }
.esp-sens-grid td.lead { background: lightgray; text-align: center; }
.esp-sens-grid td.lead.text { text-align: left; }
.esp-sens-grid td.base { background: lightgray; }
.esp-sens-grid td.result { background: lightblue; }
.esp-sens-grid td.ok { background: lightgreen; text-align: center; }
.esp-sens-grid td.err { background: tomato; text-align: center; }
.esp-sens-grid td.wrn { background: yellow; text-align: center; }
.esp-sens-grid td.edit { padding: 0; }
.esp-sens-grid tr.current td.lead { box-shadow: inset 0 0 0 1px #3c7fb1; }
.esp-sens-cell { width: 100%; box-sizing: border-box; border: none; background: transparent; text-align: right; font: inherit; padding: 1px 4px; color: #000; }
.esp-sens-cell:focus { outline: 1px solid #3c7fb1; background: #fff; }
.esp-sens-dots { font-size: 9px; padding: 0 4px; line-height: 14px; cursor: pointer; }
.esp-sens-warn { color: red; font-size: 20px; font-weight: bold; padding: 18px 20px; flex-shrink: 0; }
.esp-sens-warn.hidden { visibility: hidden; }
.esp-sens-tabfoot, .esp-sens-chartfoot { display: flex; align-items: center; gap: 12px; padding: 4px 0; flex-shrink: 0; }
.esp-sens-chartfoot { justify-content: space-between; padding: 4px 30px; }
.esp-sens-status { font-size: 11px; color: #555; }
.esp-sens-btn100 { width: 100px; }
.esp-sens-btn150 { width: 150px; }
.esp-sens-btn200 { width: 200px; }
.esp-sens-chartlayout { flex: 1 1 auto; min-height: 0; display: flex; gap: 6px; padding-top: 4px; }
.esp-sens-radios { flex: 0 0 155px; font-size: 12px; }
.esp-sens-radiohead, .esp-sens-radiorow { display: grid; grid-template-columns: 75px 40px 40px; align-items: center; height: 25px; text-align: center; }
.esp-sens-radiohead { font-size: 14px; font-weight: bold; }
.esp-sens-radiorow .lbl { font-weight: bold; }
.esp-sens-chartcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* AutoSize measures the PARENT, so the chart pane needs a definite height. */
.esp-sens-chart { flex: 1 1 auto; height: calc(60vh / var(--zz, 1)); min-height: 300px; position: relative; }
.esp-sens-barside { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; }
.esp-sens-barnote { font-size: 11px; }
.esp-sens-varlist { flex: 1 1 auto; overflow: auto; border: 1px solid #c0c0c0; padding: 2px; }
.esp-sens-varitem { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 2px; font-weight: normal; }
.esp-sens-bottom { justify-content: center; gap: 20px; }
.esp-sens-build { width: 700px; }
.esp-sens-buildgrid { display: grid; grid-template-columns: 240px 290px 1fr; gap: 10px; }
.esp-sens-buildcol { display: flex; flex-direction: column; }
.esp-sens-buildcol.right { align-items: flex-end; }
.esp-sens-buildhead { font-size: 14px; font-weight: bold; height: 25px; text-align: center; }
.esp-sens-buildrow { display: grid; grid-template-columns: 100px 120px; align-items: center; height: 25px; font-size: 11px; }
.esp-sens-buildrow .lbl.wide { white-space: nowrap; }
.esp-sens-buildcol:nth-child(2) .esp-sens-buildrow { grid-template-columns: 150px 120px; }
.esp-sens-buildspacer { height: 260px; }
.esp-sens-detail { width: 760px; }
.esp-sens-detailgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.esp-sens-detailcol { display: flex; flex-direction: column; }
.esp-sens-detailrow { display: grid; grid-template-columns: 150px 120px auto; align-items: center; gap: 4px; min-height: 25px; font-size: 11px; }
.esp-sens-detailrow .unit { color: #555; }
.esp-sens-pumpgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 12px; margin-top: 14px; }
.esp-sens-pumpgrid .head { font-weight: bold; text-align: center; font-size: 12px; }
.esp-sens-pumpgrid .esp-sens-detailrow { grid-template-columns: 50px 110px; }
.esp-sens-detailfoot { display: flex; justify-content: flex-end; margin-top: 12px; }
.esp-sens-msg { width: 520px; }
.esp-sens-msgline { font-size: 12px; padding: 3px 0; }

/* Pick-list tables - Pump > Available Housings, Add/Delete Motors > Select Motor: Part | On Hand | Available (2026-10-13). Rows keep .esp-selpump-row behaviour. */
.esp-hsg-table { width: 100%; border-collapse: collapse; }
.esp-hsg-table th { font-size: 11px; text-align: left; padding: 1px 3px; }
.esp-hsg-table td { padding: 1px 3px; white-space: nowrap; }   /* one line per housing: the pane scrolls sideways rather than wrapping the P/N (Paul, 2026-10-13) */
.esp-hsg-table th.num, .esp-hsg-table td.num { text-align: center; width: 1%; padding: 1px 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* 1% + nowrap = shrink to the number; the Housing column takes the rest. Counts centred under their headers (Paul, 2026-10-13) */

/* Pick-list panes (Seals, and the lists that follow): the scrolling table of candidates, in the Pump page's housing
   shape, with the Selected grid above it (2026-10-13). */
.esp-pick-pane { max-height: 260px; overflow: auto; border: 1px solid #828790; margin: 5px 0 6px; }
.esp-pick-empty { color: #999; }
.esp-sel-table { margin-bottom: 4px; }
.esp-picker-modal { width: 760px; }   /* the Seals / Intake-Separator picker modals (2026-10-13); .esp-modal caps it to the viewport */