/* Steelplan ordering: page-specific styles on top of the Moduflex house style (moduflex.css). */

[hidden] { display: none !important; }

main.wide { max-width: 1240px; }
main.medium { max-width: 960px; }
main.narrow { max-width: 452px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.centred { text-align: center; }
.small { font-size: 13px; }
abbr[title] { text-decoration: none; }

label { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 14px; color: var(--ink-2); }
.label-lg { font-size: 18px; font-weight: 600; color: var(--ink); }
.hint { margin: 0; color: var(--ink-3); font-size: 13px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }

.flash p, .flash ul { margin: 0; }
.flash ul { padding-left: 20px; }
.flash:focus { outline: none; }

.field.is-invalid, .field[aria-invalid="true"] {
    border-color: var(--err); box-shadow: inset 0 -1px 0 var(--err);
}

/* Header account area */
.inline-form { display: inline; margin: 0; }
.account { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; font-size: 14px; color: var(--ink-2); }
.account-icon { width: 28px; height: 28px; flex: none; }
.account-icon > circle:first-child { fill: var(--brand-blue); }

/* Sign in, password and message pages */
body.auth-page main { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }
.auth-card { margin: 24px 0; padding: 36px; display: flex; flex-direction: column; gap: 20px; border-top: 4px solid var(--brand-blue); }
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.auth-head h1 { margin: 0; font-size: 24px; }
.auth-head p { margin: 0; text-wrap: pretty; }
.auth-logo { display: block; width: 150px; height: auto; margin-bottom: 12px; }
.auth-card .flash { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack .btn { width: 100%; margin-top: 4px; }
.auth-card > .btn { width: 100%; }
.check { display: flex; align-items: center; gap: 10px; min-height: 32px; font-family: var(--font-text); font-size: 15px; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand-blue-deep); cursor: pointer; }
.auth-links { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; text-align: center; }

.password-wrap { position: relative; }
.password-wrap .field { padding-right: 48px; }
.password-toggle {
    position: absolute; top: 2px; right: 2px; width: 40px; height: calc(100% - 4px);
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-2); cursor: pointer;
}
.password-toggle:hover { background: var(--tint); color: var(--brand-blue-deep); }
.password-toggle svg { width: 18px; height: 18px; }
.password-toggle .eye-shut, .password-toggle.is-shown .eye-open { display: none; }
.password-toggle.is-shown .eye-shut { display: block; }

/* ---- Order page ------------------------------------------------------- */

.page-head { margin-bottom: 20px; }
.page-head p { margin: 0; text-wrap: pretty; }
.order-form { display: flex; flex-direction: column; gap: 20px; }

.po-card { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; padding: 20px; }
.po-field { flex: 0 1 340px; min-width: 220px; }
.field-lg { font-family: var(--font-ui); font-size: 16px; }
.po-email { flex: 1 1 320px; margin: 0; font-size: 14px; }

.parts-card { overflow: visible; }  /* the pickers' lists drop below the card */
.parts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.parts-head h2 { margin: 0 0 2px; }
.keys { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--ink-2); }
.parts-foot { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }

/* Changing several lines at once: folded away until wanted */
.bulk { border-top: 1px solid var(--line-soft); }
.bulk summary {
    display: flex; align-items: center; gap: 8px; padding: 12px 20px; list-style: none; cursor: pointer;
    font-family: var(--font-ui); font-size: 15px; color: var(--ink);
}
.bulk summary::-webkit-details-marker { display: none; }
.bulk summary:hover { background: var(--tint); }
.bulk-chevron { width: 16px; height: 16px; color: var(--ink-2); transition: transform 0.15s; }
.bulk[open] .bulk-chevron { transform: rotate(90deg); }
.bulk-body { padding: 0 20px 16px; }
.bulk-hint { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.bulk-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bulk-field { display: flex; flex-direction: column; gap: 6px; }
.bulk-qty { flex: 0 1 120px; }
.bulk-material { flex: 0 1 200px; }
.bulk-finish { flex: 1 1 240px; }
.bulk-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-status { margin: 10px 0 0; min-height: 1em; font-size: 14px; color: var(--ok-text); }
.bulk-status:empty { display: none; }
.bulk-status.is-warning { color: var(--warn-text); }

/* Order lines */
.order-table { table-layout: fixed; border-top: 1px solid var(--line-soft); counter-reset: line; }
.order-table th { padding: 10px 8px; }
.order-table th:first-child, .order-table td:first-child { padding-left: 20px; }
.order-table th:last-child, .order-table td:last-child { padding-right: 16px; }
.order-table td { padding: 14px 8px; vertical-align: top; }
.order-table tbody tr { counter-increment: line; counter-reset: sub; transition: background-color 0.6s; }
.order-table tbody tr.is-component { counter-increment: sub; counter-reset: none; }
.order-table tbody tr:hover { background: #f8fbfc; }
.order-table tbody tr.is-selected { background: var(--select); }
.order-table tbody tr.just-changed { animation: just-changed 1.2s ease-out; }
@keyframes just-changed { from { background: #d4e9f2; } }
.order-table .col-select { width: 48px; }
.order-table .col-num { width: 36px; }
.order-table .col-qty { width: 140px; }
.order-table .col-material { width: 252px; }
.order-table .col-finish { width: 27%; }
.order-table .col-remove { width: 56px; }
.order-table .col-price { width: 150px; text-align: right; }
.order-table td.col-price { padding-top: 22px; }
.line-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-price strong { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 15px; }
.line-price-each { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.line-price-tbd { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-2); white-space: normal; }
.line-price-hint { display: block; font-size: 12px; line-height: 1.35; color: var(--ink-2); white-space: normal; }
.order-table tbody tr.is-unit .line-price strong { color: var(--brand-blue-deep); }
.order-table td.col-select, .order-table td.col-num { padding-top: 24px; }
.line-number::before { content: counter(line); font-family: var(--font-ui); font-size: 14px; color: var(--ink-3); }
.is-component .line-number::before { content: counter(line) "." counter(sub); }
.select-box { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-blue-deep); cursor: pointer; }

/* Quantity: − box + */
.stepper { display: flex; }
.stepper .field { min-width: 0; border-radius: 0; text-align: center; padding: 0 4px; font-family: var(--font-ui); font-size: 16px; -moz-appearance: textfield; }
.stepper .field::-webkit-inner-spin-button, .stepper .field::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn {
    flex: none; width: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--card); color: var(--ink); cursor: pointer;
    border: 1px solid var(--line-control); border-bottom-color: #c3ced4;
}
.step-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.step-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.step-btn:hover { background: var(--tint); color: var(--brand-blue-deep); }
.step-btn:active { background: var(--select); }
.step-btn svg { width: 14px; height: 14px; }

/* Material: segmented buttons */
.seg { display: flex; gap: 2px; padding: 2px; background: var(--tint); border: 1px solid var(--line); border-radius: 6px; }
.seg.is-invalid { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.seg-btn {
    flex: 1; min-height: 34px; padding: 0 8px; border: 0; border-radius: var(--radius);
    background: transparent; color: var(--ink); font-family: var(--font-ui); font-weight: 400; font-size: 14px; cursor: pointer;
}
.seg-btn:hover { background: rgba(255, 255, 255, 0.75); }
.seg-btn.is-on { background: var(--card); color: var(--brand-blue-deep); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.seg-text, .seg-sub { display: block; }
.seg-sub { margin-top: 1px; font-size: 12px; font-weight: 400; line-height: 1.25; color: var(--ink-2); }

/* Gloss: a part that can be either (a sloped top) asks what it should match */
.gloss-choice { margin-top: 10px; }
.gloss-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--ink-2); }
.gloss-choice .seg-btn { padding: 5px 8px; line-height: 1.25; }
.confirm-gloss { font-size: 13px; color: var(--ink-2); }

/* Searchable picker (part and finish) */
.combo-field { position: relative; }
.combo-search .combo-input {
    padding-left: 36px;
    background: var(--card) url("icons/search.svg") no-repeat 11px center / 16px 16px;
    font-family: var(--font-ui);
}
.combo-search .combo-input:hover { background-color: #f9fbfc; }
.combo-swatches .combo-input { padding-left: 38px; }
.swatch {
    display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.swatch.is-empty { box-shadow: none; border: 1.5px dashed var(--line-strong); }
.combo-swatch { position: absolute; left: 11px; top: 50%; margin-top: -9px; pointer-events: none; }
.combo.is-disabled .combo-swatch { border-color: #c9cdd2; }
.combo-list {
    position: fixed; z-index: 30; top: 0; left: 0;  /* placed against its box by order.js, so it never stretches or scrolls the page */
    width: 100%; min-width: 260px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 4px; list-style: none;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-flyout);
}
.combo-wide .combo-list { width: max-content; min-width: 100%; max-width: min(600px, 90vw); }
.combo-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius); cursor: pointer; }
.combo-option:hover { background: var(--tint); }
.combo-option.is-active { background: var(--select); }
.combo-option.is-active::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px;
    border-radius: 2px; background: var(--brand-blue-deep);
}
.combo-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.combo-label { font-family: var(--font-ui); font-weight: 600; color: var(--ink); }
.combo-sub { color: var(--ink-2); font-size: 13px; }
.combo-tag {
    flex: none; padding: 2px 8px; border-radius: 10px; background: var(--tint); font-weight: 400;
    font-size: 12px; color: var(--ink-2); text-transform: capitalize;
}
.combo-empty { padding: 10px 12px; color: var(--ink-2); font-size: 14px; }
.combo-detail { margin-top: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.3; }
.combo-detail:empty { display: none; }

/* Designed or not yet: a tag in the part list, and a note under the chosen part */
.combo-flag {
    flex: none; padding: 2px 8px; border-radius: 10px; font-weight: 400; font-size: 12px; white-space: nowrap;
}
.combo-flag.is-ok { background: var(--ok-bg); color: var(--ok-text); }
.combo-flag.is-warn { background: var(--warn-bg); color: var(--warn-text); }
.part-status {
    display: inline-flex; align-items: center; margin-top: 6px; padding: 3px 10px 3px 28px;
    border: 1px solid; border-radius: var(--radius); font-size: 13px;
    background-repeat: no-repeat; background-position: 9px center; background-size: 14px 14px;
}
.part-status.is-ok { background-color: var(--ok-bg); background-image: url("icons/ok.svg"); border-color: var(--ok-line); color: var(--ok-text); }
.part-status.is-warn { background-color: var(--warn-bg); background-image: url("icons/warning.svg"); border-color: var(--warn-line); color: var(--warn-text); }

/* Drawings attached to a part */
.drawing { margin-top: 8px; }
.drawing[hidden] { display: none; }
.drawing .drawing-onfile { display: flex; margin: 0 0 6px; }
.drawing .drawing-onfile[hidden] { display: none; }
.drawing-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.drawing-chips[hidden] { display: none; }
.drawing-chip {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 3px 4px 3px 10px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); font-size: 13px;
}
.drawing-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawing-size { color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.drawing-x {
    flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius);
    background: transparent; color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer;
}
.drawing-x:hover { background: var(--select); color: var(--brand-blue-deep); }
.btn.drawing-add {
    margin-top: 10px; min-height: 34px; padding: 0 12px; gap: 6px; font-size: 13px;
    border-color: var(--brand-blue); background: var(--tint); color: var(--brand-blue-deep);
}
.btn.drawing-add[hidden] { display: none; }
.btn.drawing-add:hover { background: var(--select); border-color: var(--brand-blue-deep); }
.drawing-add-icon { display: inline-flex; width: 16px; height: 16px; }
.drawing-add-icon svg { width: 16px; height: 16px; }
.drawing-message { margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--err-text); }
.drawing-message[hidden] { display: none; }

/* A note for Moduflex on a part not on the price list */
.note-wrap { margin-top: 10px; }
.note-wrap label { margin-bottom: 4px; font-size: 13px; }
.note-wrap textarea.field { height: auto; min-height: 58px; padding: 8px 12px; font-size: 14px; line-height: 1.4; resize: vertical; }
.confirm-note { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); white-space: pre-line; }
.confirm-flag { display: block; margin-top: 2px; font-size: 12px; }
.confirm-flag.is-ok { color: var(--ok-text); }
.confirm-flag.is-warn { color: var(--warn-text); }

/* A part the customer added that is not on the price list */
.combo.is-new .combo-detail {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 28px;
    background: var(--warn-bg) url("icons/warning.svg") no-repeat 9px center / 14px 14px;
    border: 1px solid var(--warn-line); border-radius: var(--radius); color: var(--warn-text);
}
.unlisted { color: var(--warn-text); }

/* Units: a tinted heading line (the unit code and its quantity) with its parts on the lines beneath */
.order-table tbody tr.is-unit { background: var(--tint); }
.order-table tbody tr.is-unit:hover { background: #e6eff4; }
.order-table tbody tr.is-unit.is-selected { background: var(--select); }
.unit-hint { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.order-table tbody tr.is-component td.col-part { padding-left: 32px; }
.order-table tbody tr.is-component td.col-num { color: var(--ink-3); }
.part-fixed { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 40px; }
.part-role {
    font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--ink-2);
}
.part-fixed-code { font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--ink); }
.stainless-note { margin-top: 4px; color: var(--ink-2); font-size: 13px; line-height: 1.3; }
.stainless-note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #a5a5a5; border: 1px solid var(--ink-3); }
.part-fixed-desc { color: var(--ink-2); font-size: 13px; line-height: 1.3; }
.confirm-table tr.is-unit { background: var(--tint); }
.confirm-table tr.is-component td.code { padding-left: 28px; }
.confirm-role, .items-table .role {
    display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink-2);
}
.items-table .role-desc { display: block; }
.items-table tr.is-unit { background: var(--tint); }
.items-table tr.is-unit td.code { font-weight: 600; }
.items-table tr.is-component td.code { padding-left: 32px; }
.unit-tag {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; vertical-align: middle;
    background: #fff; border: 1px solid var(--line); font-family: var(--font-ui); font-weight: 400; font-size: 11px;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2);
}

/* Remove a line */
.btn-icon {
    width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--ink-2); cursor: pointer;
}
.btn-icon svg { width: 18px; height: 18px; }
.btn-icon:hover { background: var(--err-bg); color: var(--err-text); }

/* The bar along the bottom: totals and the main button, always in view */
/* The page is always at least as tall as the window, with the content taking up any spare height,
   so the bar sits at the bottom of the window even on a short order (and sticks there on a long one). */
body.has-order-bar { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.has-order-bar main { flex: 1 0 auto; width: 100%; padding-bottom: 24px; }
html:has(body.has-order-bar) { scroll-padding-bottom: 96px; }  /* keep focused fields and open lists clear of the bar */
.order-bar {
    position: sticky; bottom: 0; z-index: 20;
    background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}
.order-bar-in {
    max-width: 1240px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.order-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.stat { display: flex; flex-direction: column; }
.stat-label { font-size: 12px; color: var(--ink-2); }
.stat strong { font-family: var(--font-ui); font-size: 20px; font-weight: 600; line-height: 1.2; }
.stat-total strong { font-variant-numeric: tabular-nums; }
.stat-note { font-size: 12px; color: var(--ink-2); }
.stat-warn {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius);
    background: var(--warn-bg); color: var(--warn-text); font-size: 13px;
}
.stat-warn svg { width: 14px; height: 14px; }

/* Dialogs (Windows 11 content dialog: grey button band along the bottom) */
dialog.dialog {
    width: calc(100% - 32px); max-width: 480px; padding: 0; overflow: hidden;
    color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-dialog);
}
dialog.dialog-wide { max-width: 640px; }
dialog.dialog::backdrop { background: rgba(0, 0, 0, 0.32); }
.dialog-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 16px; max-height: calc(100vh - 160px); overflow: auto; }
.dialog h2 { margin: 0 0 4px; font-size: 20px; }
.dialog p { margin: 0; }
.dialog .flash { margin: 0; font-size: 14px; }
.dialog-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    padding: 20px 24px; background: var(--card-alt); border-top: 1px solid var(--line);
}
/* flex: none, so the dialog body scrolls as a whole rather than squashing the lines into a slot */
.confirm-lines { flex: none; max-height: 32vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.confirm-table th { position: sticky; top: 0; padding: 8px 12px; }
.confirm-table td { padding: 10px 12px; font-size: 14px; }
.confirm-table .num { text-align: right; font-family: var(--font-ui); font-size: 15px; }
.confirm-table .code > span, .confirm-what > span { display: block; }
.confirm-table .code > span + span, .confirm-what > span + span { margin-top: 2px; }
.confirm-code { font-family: var(--font-ui); font-weight: 600; white-space: nowrap; font-size: 15px; }
.confirm-table tr.is-new { background: #fffbea; }
.confirm-table .confirm-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.confirm-table .confirm-price strong { display: block; font-weight: 600; }
.confirm-table tfoot th, .confirm-table tfoot td {
    position: sticky; bottom: 0; padding: 10px 12px; background: var(--tint);
    border-top: 2px solid var(--line-soft); font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--ink);
}
.confirm-unpriced { margin: 6px 0 0; }
.confirm-what > .confirm-finish { display: flex; align-items: center; gap: 6px; }
.finish { display: inline-flex; align-items: center; gap: 6px; }
.confirm-finish .swatch, .finish .swatch { width: 14px; height: 14px; }

/* Delivery details, in the "Place this order?" dialog */
.delivery { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.delivery h3 { margin: 0 0 12px; font-size: 16px; }
.delivery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.delivery-grid .span-2, .delivery-grid .delivery-date { grid-column: 1 / -1; }
.delivery-date .field { max-width: 240px; font-family: var(--font-ui); }
.delivery .hint { line-height: 1.4; text-wrap: pretty; }
.delivery .flash { margin: 4px 0 0; }
.delivery label .muted, .delivery h3 .muted { font-weight: 300; }
.order-note { margin-top: 16px; }
.order-note textarea.field { height: auto; min-height: 72px; padding: 8px 12px; line-height: 1.4; resize: vertical; }

/* Order placed */
.placed-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px; margin-bottom: 16px; }
.placed-banner h1 { margin: 0 0 4px; }
.placed-banner p { margin: 0; color: var(--ink); }
.placed-tick { flex: none; width: 56px; height: 56px; }
.placed-tick circle { fill: var(--ok); }
.placed-tick path { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.summary-card { overflow: hidden; margin-bottom: 20px; }
.summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.summary-head h2 { margin: 0; }
.summary-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; font-size: 14px; }
.summary-facts div { display: flex; gap: 6px; }
.summary-facts dt { color: var(--ink-2); }
.summary-facts dd { margin: 0; font-weight: bold; }
.summary-delivery {
    display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; padding: 12px 20px;
    border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.summary-delivery div { display: flex; flex-direction: column; gap: 2px; }
.summary-delivery dt { color: var(--ink-2); }
.summary-delivery dd { margin: 0; font-family: var(--font-ui); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.items-table { min-width: 640px; }
.items-table .num { text-align: right; }
.items-table .code { font-family: var(--font-ui); font-weight: 600; white-space: nowrap; }
.items-table tr.is-new { background: #fffbea; }
.items-table.has-prices { min-width: 820px; }
.items-table .money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.items-table tr.is-unit td.money { font-weight: 600; }
.items-table .total-row th, .items-table .total-row td {
    padding: 12px 16px; border-top: 2px solid var(--line-soft); border-bottom: 0;
    background: var(--tint); font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--ink);
}
.summary-note { margin: 0; padding: 12px 20px 14px 46px; }  /* the flash's 46px left keeps clear of its icon */
.placed-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Narrow screens: each line becomes a card */
@media (max-width: 760px) {
    .order-table, .order-table tbody, .order-table tr, .order-table td { display: block; width: 100%; }
    .order-table thead { display: none; }
    .order-table tbody tr {
        position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
        padding: 16px; border-top: 1px solid var(--line-soft);
    }
    .order-table tbody td[class] { padding: 0; border: 0; width: auto; }
    .order-table td.col-select { position: absolute; top: 16px; left: 16px; }
    .order-table tbody td.col-num[class] { padding-left: 30px; }
    .order-table td.col-remove { position: absolute; top: 6px; right: 6px; }
    .order-table td.col-qty { max-width: 200px; }
    .order-table td.col-price { text-align: left; }
    .order-table td.col-price:has(.line-price:empty):not(:has(.drawing-add:not([hidden]))) { display: none; }
    .order-table td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 6px;
        font-family: var(--font-ui); font-size: 13px; color: var(--ink-2);
    }
    .line-number::before { content: "Line " counter(line); }
    .is-component .line-number::before { content: "Part " counter(line) "." counter(sub); }
    .order-table tbody tr.is-component { margin-left: 16px; width: calc(100% - 16px); border-left: 3px solid var(--brand-blue); }
    .order-table tbody tr.is-component td.col-part[class] { padding-left: 0; }
    .order-table tbody tr.is-unit td.col-material, .order-table tbody tr.is-unit td.col-finish { display: none; }
    .btn-icon { width: 44px; height: 44px; }
    .step-btn { width: 44px; }
    .seg-btn { min-height: 40px; }
    .account-name { display: none; }
    .order-bar-in { flex-wrap: wrap; padding: 10px 16px; }
    .order-bar-in .btn { width: 100%; }
    .bulk-buttons, .bulk-buttons .btn { width: 100%; }
    .auth-card { padding: 28px 20px; }
    .dialog-actions { grid-template-columns: minmax(0, 1fr); }
    .delivery-grid { grid-template-columns: minmax(0, 1fr); }
    .delivery-date .field { max-width: none; }
}

@media print {
    .topbar .nav, .placed-actions, .order-bar { display: none; }
    body { background: #fff; }
    .card { box-shadow: none; }
}

/* Orders: the list, a saved order, and what an amendment changed */
.crumbs { margin: 0 0 6px; color: var(--ink-3); font-size: 13px; }
.page-head .btn { margin-top: 12px; }
.orders-card { padding: 0; overflow: hidden; }
.orders-table td, .orders-table th { vertical-align: middle; }
.orders-table .unit-tag { margin-left: 8px; }
.changes-card, .versions-card { margin-bottom: 20px; padding: 16px 20px; }
.changes-card h2, .versions-card h2 { margin: 0 0 8px; font-size: 17px; }
.changes { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.versions { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Users (admins only): adding an account, and the list of them */
.users-add { margin-bottom: 20px; padding: 20px; }
.users-add > p { margin: 0 0 16px; text-wrap: pretty; }
.users-add .flash { margin: 0 0 16px; }
.users-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.users-role { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; }
.users-role legend { margin-bottom: 4px; padding: 0; font-family: var(--font-ui); font-weight: 400; font-size: 14px; color: var(--ink-2); }
.users-submit { grid-column: 1 / -1; }
.users-table td, .users-table th { vertical-align: middle; }
.users-remove:hover { background: var(--err-bg); color: var(--err-text); border-color: var(--err); }
@media (max-width: 760px) {  /* after the rules above, so it wins over them */
    .users-form { grid-template-columns: minmax(0, 1fr); }
    .users-submit .btn { width: 100%; }
}

/* Placing an order: covers the page from the moment it is sent until the next page loads */
.placing { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.2s ease; }
.placing[hidden] { display: none; }
.placing.is-open { opacity: 1; }
.placing-card { width: min(440px, 100%); padding: 32px 28px 28px; border: 1px solid var(--line);
    border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-dialog); text-align: center; }
.placing-logo { width: 132px; height: auto; margin: 0 auto 18px; display: block; }
.placing-title { margin: 0 0 6px; font-family: var(--font-ui); font-size: 22px; font-weight: 600; color: var(--brand-blue); }
.placing-sub { margin: 0 0 22px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
/* An indeterminate bar: it says "working", not how far along, so it never claims more than it knows. */
.placing-bar { position: relative; height: 4px; margin: 0 0 22px; overflow: hidden; border-radius: 2px; background: var(--tint); }
.placing-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px;
    background: var(--brand-blue-deep); animation: placing-slide 1.3s ease-in-out infinite; }
@keyframes placing-slide { from { left: -40%; } to { left: 100%; } }
.placing-steps { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; }
.placing-step { display: flex; align-items: center; gap: 12px; padding: 7px 4px; color: var(--ink-3); font-size: 15px;
    transition: color 0.2s ease; }
.placing-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-control);
    display: grid; place-items: center; transition: border-color 0.2s ease, background 0.2s ease; }
.placing-step.is-active { color: var(--ink); font-weight: 600; }
.placing-step.is-active .placing-mark { border-color: var(--brand-blue-deep); border-top-color: transparent;
    animation: placing-spin 0.8s linear infinite; }
.placing-step.is-done { color: var(--ink); }
.placing-step.is-done .placing-mark { border-color: var(--ok); background: var(--ok); }
.placing-step.is-done .placing-mark::after { content: ""; width: 5px; height: 9px; margin-top: -2px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes placing-spin { to { transform: rotate(360deg); } }
.placing-warning { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-bg);
    border: 1px solid var(--warn-line); color: var(--warn-text); font-size: 13px; line-height: 1.45; }
.placing-slow { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
    .placing, .placing-step, .placing-mark { transition: none; }
    .placing-bar::before { animation: none; left: 0; width: 100%; opacity: 0.35; }
    .placing-step.is-active .placing-mark { animation: none; border-top-color: var(--brand-blue-deep); }
}
@media print { .placing { display: none; } }