/*
 * Quote builder (V1.44): Management > Quotes > Build a quote (Client\Apps\Management\QuoteBuilderPage.razor: the five steps, the
 * price lines and their sums, the versions, the PO to confirm) and the quotes' terms and conditions (QuoteTermsPage.razor: the two
 * languages side by side, the history). Class prefix qb-; the rest is the management app's mg- classes of management.css. Linked by
 * Server\Components\App.razor after app.css. Colours only through the tokens of app.css (:root): light and dark themes.
 * Copyright (c) 2026 Toupin Technologies Inc. All rights reserved.
 */

.mg-crumbs .spacer { flex: 1; }

/* The number of a step in a panel's title */
.qb-step {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px;
    border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; font-weight: 800;
}

/* The long texts: the description, the summary, the scope, the terms */
.qb-field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.78rem; font-weight: 700; min-width: 0; }
.qb-text { width: 100%; resize: vertical; font: inherit; font-size: 0.9rem; font-weight: 400; line-height: 1.45; color: var(--text); background: var(--field); }
.qb-terms { font-size: 0.85rem; min-height: 360px; }

/* The rates of the client's POs */
.qb-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 0.85rem; }

/* The price lines */
.qb-lines td { vertical-align: top; }
.qb-lines .qb-sub { margin-top: 4px; font-size: 0.82rem; }
.qb-unconfirmed { border-color: var(--warn); background: var(--warn-soft); }
.qb-confirm { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--warn); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }

/* The sums under the lines */
.qb-totals { margin: 10px 0 0 auto; max-width: 340px; display: flex; flex-direction: column; gap: 2px; }
.qb-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.qb-totals .qb-total { margin-top: 4px; border: 0; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; }
.qb-totals .hint { border: 0; padding: 4px 0 0; }

.qb-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: 0.9rem; }

/* What still stops the PDF */
.qb-problems { margin: 0 0 10px; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--note-soft); color: var(--text); font-size: 0.86rem; }
.qb-problems li { margin: 2px 0; }

.qb-sub-title { margin: 12px 0 6px; font-size: 0.85rem; color: var(--muted); }

/* V1.61: Management > Quotes > a quote > LaTeX (Client\Apps\Management\QuoteLatexPage.razor): the bar, the editor beside the PDF,
   the versions and the shared files under them */
.ql-bar { display: flex; flex-direction: column; gap: 8px; }
.ql-bar-title h2 { margin: 0; font-size: 1.15rem; }
.ql-bar-title .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 0.86rem; }
.ql-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ql-note { flex: 1 1 240px; min-width: 180px; }
.ql-lang { width: auto; }
.ql-engine { color: var(--warn); }
.ql-made { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--good-soft); color: var(--good-text); font-size: 0.88rem; }
.ql-made a { color: inherit; font-weight: 700; }
.ql-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ql-editor, .ql-output { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ql-editor .panel-head, .ql-output .panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ql-editor .panel-head h3, .ql-output .panel-head h3 { margin: 0; }
.ql-count { font-size: 0.8rem; }
.ql-start { margin-left: auto; width: auto; max-width: 340px; }
.ql-text { width: 100%; height: 72vh; min-height: 320px; padding: 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--field); color: var(--text);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.84rem; line-height: 1.45; tab-size: 2; resize: vertical; white-space: pre; overflow: auto; }
.ql-opened { color: var(--warn); }
.ql-pdf { height: 72vh; }
.ql-problems { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow-y: auto; font-size: 0.85rem; }
.ql-problems li { display: flex; align-items: baseline; gap: 8px; padding: 3px 8px; border-radius: 6px; }
.ql-problems li.bad { background: var(--bad-soft); color: var(--bad); }
.ql-problems li.warn { background: var(--warn-soft); color: var(--warn); }
.ql-line { flex: 0 0 auto; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ql-line-file { flex: 0 0 auto; font-family: ui-monospace, Consolas, monospace; }
.ql-log summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.ql-log pre { max-height: 360px; margin: 6px 0 0; padding: 10px; overflow: auto; border-radius: 8px; background: var(--code-bg); font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ql-under { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; margin-top: 12px; }
.ql-under .panel-head { display: flex; align-items: center; gap: 8px; }
.ql-under .spacer { flex: 1; }
@media (max-width: 1100px) { .ql-main, .ql-under { grid-template-columns: minmax(0, 1fr); } .ql-text, .ql-pdf { height: 60vh; } }