/* ============================================================================
 * The boiler wizard shell: breadcrumb, stages and design form.
 *
 * Split out of app.css on 19-08-2026 (was lines 1419-1577). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* ======================================================== BOILER WIZARD */

/* Header strip: site · number · period · boiler selector */
.wizhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    border-radius: var(--radius-card, 10px);
    box-shadow: var(--shadow-card);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}
.wizhead__facts { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.wizhead__fact-label {
    font-size: 0.62rem; font-weight: 700; color: var(--slate, #55648A);
    text-transform: uppercase; letter-spacing: 0.6px;
}
.wizhead__fact-value { font-size: 0.9rem; font-weight: 700; color: var(--text-dark, #0F1E45); }

/* The way out, beside the name of the thing you are in. Centred against the
   two-line site block rather than the label alone, so it reads as belonging to
   the pair. */
.wizhead__site { display: flex; align-items: center; gap: 0.6rem; }

.wizhead__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--border-grey, #E3E4E9);
    border-radius: 50%;
    background: #fff;
    color: var(--slate, #55648A);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.wizhead__back:hover {
    border-color: var(--cyan-ink, #0A7A97);
    color: var(--cyan-ink, #0A7A97);
    transform: translateX(-2px);
}
.wizhead__period { width: 80px; margin-top: 2px; padding: 0.25rem 0.4rem; font-weight: 700; text-align: center; }
/* Shown instead of "Add boiler" when the proposal is read-only for this user. */
.readonly-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: 6px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: #8a5a00; background: #fff4dc; border: 1px solid #f2d492;
}
.wizhead__boiler { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wizhead__boiler select { width: auto; min-width: 140px; }
.wizhead__boiler input { width: 150px; }

/* Breadcrumb of stages */
.wizcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    /*
     * A faint rule separating the stage row from the stage under it.
     *
     * The gap either side of it adds back up to the 2rem this row was given —
     * 1rem of padding above the line and 1rem of margin below — so the rule
     * lands in the middle of the space rather than adding to it and pushing
     * every stage further down the page.
     */
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    margin-bottom: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/*
 * SOLID PILLS, not outlines. The stage row is the one piece of navigation on
 * this screen that says where you are in the whole job, and as pale outlined
 * chips it sat at the same visual weight as every card beneath it.
 *
 * Only the STAGE row is dark. The sub-tabs inside a stage — System Design vs
 * Water Analysis, Cover & Document vs Data Sheets — stay light on purpose, so
 * the two levels of navigation still read as two levels.
 */
.wizcrumb__stage {
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-btn, 8px);
    border: 1px solid transparent;
    /*
     * A mid slate-navy, NOT --text-dark. #0F1E45 is very nearly black and the
     * unselected stages read as a row of holes in the page; this is still
     * clearly "dark pill" but sits back rather than punching forward.
     * Label contrast on it is 6.7:1.
     */
    background: #33415F;
    color: #C3D3EC;
    /*
     * Set HERE, not left to .wizcrumb. text-transform is an inherited property,
     * but the UA stylesheet resets it on form controls — so the row asked for
     * uppercase and the <button> stages quietly rendered in sentence case the
     * whole time. Same reason letter-spacing is restated.
     */
    text-transform: uppercase;
    letter-spacing: 1.2px;          /* wider than the row's 0.5px */
    cursor: pointer;
    transition: all 0.2s ease;
}
.wizcrumb__stage:hover { background: #1B2E5E; color: #fff; }
/*
 * The active fill is --cyan-ink, NOT the lighter --primary-blue. White on
 * #0F9FC4 measures 3.1:1, which fails AA for text this size; on #0A7A97 it is
 * 4.5:1 and passes. It still reads as the brand cyan against the navy.
 */
.wizcrumb__stage.active {
    background: var(--cyan-ink, #0A7A97);
    color: #fff;
    border-color: var(--primary-blue, #0F9FC4);
    box-shadow: 0 2px 10px rgba(15,159,196,0.35);
}
.wizcrumb__stage.disabled { opacity: 0.45; cursor: not-allowed; }
/*
 * Darkened from --light-silver when the stages became solid pills. At #E3E4E9
 * against the page it was invisible, so "keep the separators" would have been
 * a decision with no effect on screen.
 */
.wizcrumb__sep { color: var(--slate, #55648A); }

/*
 * Outcome is pushed to the far end of the crumb row. It is not a step in
 * preparing a quotation — it is what happened to it afterwards — and the gap
 * says so without needing a label to explain it.
 */
.wizcrumb__outcome { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; }

/*
 * Shown in place of Add/Delete boiler once a proposal is Won, Lost or
 * Cancelled. Those buttons disappear on a closed proposal, and since the
 * Outcome card became a stage of its own there was nothing left on the design
 * or pricing stages saying why the screen had gone quiet.
 */
.locked-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: 6px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: #96261f; background: #fdecea; border: 1px solid #f3b7b2;
}

/* Stage-1 layout: left column + WA right */
.wiz-design { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(430px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .wiz-design { grid-template-columns: 1fr; } }

/* Compact field rows inside wizard cards */
.wrow { display: grid; grid-template-columns: 190px 1fr auto; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.wrow label { font-size: 0.7rem; font-weight: 600; color: var(--slate, #55648A); text-transform: uppercase; letter-spacing: 0.5px; }
.wrow .u { font-size: 0.72rem; color: var(--slate, #55648A); }
.wrow--computed input { background: #eef4f6; color: var(--cyan-ink, #0A7A97); font-weight: 700; }
/* Two labelled controls on one wrow line (Boiler Pressure + Maximum Pressure). */
.wrow__dual { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.wrow__dual input { width: 90px; }
.wrow__dual-label { margin-left: 0.6rem; white-space: nowrap; }
/* Formula-code chips (Products Design only) sit inline in the row labels, so
   they have to stay tight or the paired pressure/DO rows wrap. */
.wrow label .code-chip { margin-left: 0.3rem; padding: 0 0.25rem; font-size: 0.6rem; }
.wrow__dual-label .code-chip { margin-left: 0.25rem; }
.mini-table .rowlabel .code-chip { margin-left: 0.3rem; padding: 0 0.25rem; font-size: 0.6rem; }
/* Read-only computed companion field (e.g. temp-based DO). */
.wrow__dual-ro { background: #eef4f6; color: var(--cyan-ink, #0A7A97); font-weight: 700; }
/* Amber warning pill when entered DO diverges from the temp-based value. */
.do-warn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-left: 0.5rem; padding: 2px 8px; border-radius: 6px;
    font-size: 0.68rem; font-weight: 700; white-space: nowrap;
    color: #8a5a00; background: #fff4dc; border: 1px solid #f2d492;
}
.do-warn .fa { font-size: 0.72rem; }

/* Mini grids (COC calc, flow grid, WA) */
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.mini-table th {
    background: var(--off-white, #F7F7F8);
    border: 1px solid var(--light-silver, #E3E4E9);
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-dark, #0F1E45);
    padding: 0.45rem 0.6rem; text-align: center;
}
.mini-table td { border: 1px solid var(--light-silver, #E3E4E9); padding: 0.3rem 0.45rem; text-align: center; }
.mini-table td.rowlabel { text-align: left; font-weight: 600; color: var(--text-dark, #0F1E45); white-space: nowrap; }
/* The heading over the row labels follows them left. Everything else in a mini
   table is centred, including the heading, which left "Parameter" floating in
   the middle of a column of left-aligned names. */
.mini-table th.rowlabel { text-align: left; }
.mini-table input { border: none; background: transparent; text-align: center; padding: 0.25rem 0.2rem; border-radius: 4px; }
.mini-table input:focus { background: #fff; box-shadow: var(--focus-ring); }
.mini-table td.computed { background: #eef4f6; color: var(--cyan-ink, #0A7A97); font-weight: 700; }
.mini-table td.engine-cell { background: var(--pale-cyan, #EAF7FA); }
.mini-table td.engine-cell input { font-weight: 600; }

/* Product-selection grid */
.ps-cat-row td {
    background: var(--off-white, #F7F7F8);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-dark, #0F1E45);
    border-top: 2px solid var(--soft-cyan, #C3E7F0);
    padding: 0.45rem 0.85rem;
}
.ps-row { cursor: pointer; }
.ps-row.matched { background: linear-gradient(90deg, var(--pale-cyan, #EAF7FA) 0%, #fff 65%); }
.ps-row.focused td:first-child { box-shadow: inset 3px 0 0 var(--primary-blue, #0F9FC4); }
.ps-row td input[type="number"] { width: 90px; text-align: right; font-family: 'Courier New', monospace; }
.ps-row td.warn-cell input { background: var(--warn-cell, #fbe3e3); border-color: #e8b8b8; }
.ps-scenarios td { background: #fbfdfe; }
.ps-scn { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.78rem; color: var(--text-dark, #0F1E45); }
.ps-scn input[type="radio"] { width: auto; }
.ps-scn__dose { font-family: 'Courier New', monospace; font-weight: 700; color: var(--cyan-ink, #0A7A97); }
.ps-scn__ctl { font-size: 0.7rem; color: var(--slate, #55648A); }

/* Right column cards on product stage */
.wiz-products { display: grid; grid-template-columns: minmax(520px, 1.2fr) minmax(380px, 1fr); gap: 1rem; align-items: start; }

/*
 * Tighter than the shared .data-table padding, and scoped so no other grid
 * changes. Six columns each paying 0.85rem a side cost 67px of the panel's
 * width in gutters alone — width this table does not have to spare.
 */
.qty-table th, .qty-table td { padding-left: 0.5rem; padding-right: 0.5rem; }
/* The index column holds one or two digits; it should not claim more. */
.qty-table th:first-child, .qty-table td:first-child { width: 1%; white-space: nowrap; }
@media (max-width: 1150px) { .wiz-products { grid-template-columns: 1fr; } }
.desc-list { font-size: 0.8rem; color: var(--text-dark, #0F1E45); }
.desc-list dt { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate, #55648A); margin-top: 0.6rem; }
.desc-list dd { margin: 0.15rem 0 0; white-space: pre-wrap; }

/* One-time issued password. Deliberately loud: it cannot be shown again, so it
   must not read as an incidental line the administrator scrolls past. */
.issued {
    display: flex; flex-direction: column; gap: 0.4rem;
    margin: 0.875rem 0;
    padding: 0.9rem 1rem;
    background: var(--pale-cyan, #EAF7FA);
    border: 1px solid var(--soft-cyan, #C3E7F0);
    border-left: 3px solid var(--cyan-ink, #0A7A97);
    border-radius: var(--radius-btn, 8px);
}
.issued__label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--slate, #55648A);
}
.issued__value {
    font-family: 'Courier New', monospace;
    font-size: 1.15rem; font-weight: 700; letter-spacing: 1px;
    color: var(--text-dark, #0F1E45);
    /* Selectable in one gesture — it gets copied or read aloud. */
    user-select: all;
}