/* ============================================================================================
   Quotation Builder — a bespoke, document-first quotation editor (no Serenity PropertyGrid).
   One consistent design language: cards, aligned field grid, a single line table, a totals card.
   Scoped entirely under .qb so it never leaks into other screens.
   ============================================================================================ */

.qb {
    --qb-accent: #1f4e9c;            /* BeirutFlow blue */
    --qb-accent-2: #2e7d32;          /* success green */
    --qb-bg: var(--bs-body-bg, #f5f6f8);
    --qb-card: var(--s-card-solid-bg, #fff);
    --qb-border: var(--bs-border-color, #e3e6ea);
    --qb-line: #eef0f3;
    --qb-text: var(--bs-body-color, #1f2430);
    --qb-muted: var(--bs-secondary-color, #6b7280);
    --qb-danger: #c0392b;
    color: var(--qb-text);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
:root.theme-cosmos-dark .qb { --qb-accent: #5b9bff; --qb-bg: #11151c; --qb-line: var(--s-cell-border, rgba(255,255,255,.06)); }

.qb * { box-sizing: border-box; }

/* Scroll body; sits directly on the (white) dialog background — cards carry the visual separation.
   No own padding: the host .s-Panel already provides 1rem all around, and the title sits at that
   same offset — so toolbar, cards and title share one left edge. */
.qb-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; }

.qb-card { background: var(--qb-card); border: 1px solid var(--qb-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.qb-card-pad { padding: 14px 16px; }
.qb-card-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qb-muted); margin: 0 0 10px; }

/* ── Header: two columns (bill-to | quote meta) ───────────────────────────────────────────── */
.qb-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.qb-head.qb-head-single { grid-template-columns: 1fr; }
.qb-head > .qb-col { padding: 16px 18px; }
.qb-head > .qb-col + .qb-col { border-left: 1px solid var(--qb-line); }

/* Read-only notice shown when a Posted payment is reopened */
.qb-readonly-note {
    grid-column: 1 / -1;
    background: #fff3cd; border-bottom: 1px solid #ffc107;
    color: #856404; font-weight: 600; font-size: 12.5px;
    padding: 7px 18px; border-radius: 12px 12px 0 0;
}
:root.theme-cosmos-dark .qb-readonly-note { background: #3a2a00; border-color: #7a5a00; color: #f5c242; }

.qb-field { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.qb-field:last-child { margin-bottom: 0; }
.qb-field > label { color: var(--qb-muted); font-weight: 600; font-size: 12.5px; }
.qb-field > label .req { color: var(--qb-danger); margin-left: 2px; }

.qb-input, .qb-select, .qb-date, .qb-textarea {
    width: 100%; height: 34px; padding: 0 10px; font-size: 13px; color: var(--qb-text);
    background: var(--qb-card); border: 1px solid var(--qb-border); border-radius: 8px; outline: none;
    font-family: inherit;
}
.qb-textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.qb-input:focus, .qb-select:focus, .qb-date:focus, .qb-textarea:focus { border-color: var(--qb-accent); box-shadow: 0 0 0 3px rgba(31,78,156,.12); }
.qb-input::placeholder { color: var(--s-placeholder, #aab1bb); }
.qb-readonly { background: var(--s-input-readonly-bg, #f3f4f6); color: var(--qb-muted); font-weight: 600; display: flex; align-items: center; height: 34px; padding: 0 10px; border: 1px dashed var(--qb-border); border-radius: 8px; }

.qb-more-toggle { background: none; border: 0; color: var(--qb-accent); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 6px 0 0; }
.qb-more { display: none; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--qb-line); }
.qb-more.open { display: block; }
.qb-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }

/* ── Customer typeahead ───────────────────────────────────────────────────────────────────── */
.qb-typeahead { position: relative; display: flex; gap: 6px; }
.qb-typeahead .qb-input { flex: 1 1 auto; }
.qb-ta-new { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--qb-border); border-radius: 8px; background: var(--qb-card); color: var(--qb-accent); font-size: 18px; cursor: pointer; line-height: 1; }
.qb-ta-new:hover { border-color: var(--qb-accent); background: rgba(31,78,156,.06); }
.qb-ta-drop { position: absolute; top: 38px; left: 0; right: 0; z-index: 50; background: var(--qb-card); border: 1px solid var(--qb-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.14); max-height: 280px; overflow: auto; display: none; }
.qb-ta-drop.open { display: block; }
.qb-ta-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--qb-line); }
.qb-ta-item:last-child { border-bottom: 0; }
.qb-ta-item:hover, .qb-ta-item.active { background: rgba(31,78,156,.08); }
.qb-ta-item .qb-ta-code { font-weight: 700; color: var(--qb-accent); margin-right: 8px; }
.qb-ta-item .qb-ta-sub { color: var(--qb-muted); font-size: 12px; }
.qb-ta-empty { padding: 10px 12px; color: var(--qb-muted); }

/* ── Items table ──────────────────────────────────────────────────────────────────────────── */
.qb-items-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qb-items-head .qb-card-title { margin: 0; flex: 0 0 auto; }
.qb-items-head .qb-spacer { flex: 1 1 auto; }
.qb-addbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--qb-border); background: var(--qb-card); color: var(--qb-text); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.qb-addbtn:hover { border-color: var(--qb-accent); color: var(--qb-accent); }
.qb-addbtn.primary { background: var(--qb-accent); border-color: var(--qb-accent); color: #fff; }
.qb-add-wrap { position: relative; }

.qb-tbl { width: 100%; border-collapse: collapse; }
.qb-tbl thead th { position: sticky; top: 0; background: var(--bs-tertiary-bg, #f4f6f9); z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--qb-muted); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--qb-border); }
.qb-tbl thead th.num { text-align: right; }
.qb-tbl tbody td { padding: 0; border-bottom: 1px solid var(--qb-line); vertical-align: middle; }
.qb-tbl tbody tr:hover { background: var(--s-row-bg-hover, #fafbfc); }
.qb-cell-input { width: 100%; height: 38px; border: 0; background: transparent; padding: 0 8px; font-size: 13px; color: var(--qb-text); outline: none; font-family: inherit; }
.qb-cell-input:focus { background: rgba(31,78,156,.06); box-shadow: inset 0 0 0 1px var(--qb-accent); border-radius: 4px; }
.qb-cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.qb-cell-total { padding: 0 10px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb-col-del { width: 36px; text-align: center; }
.qb-del { color: var(--qb-danger); cursor: pointer; font-size: 16px; line-height: 1; opacity: .55; background: none; border: 0; }
.qb-del:hover { opacity: 1; }
.qb-empty { padding: 26px; text-align: center; color: var(--qb-muted); }
.qb-foot-row td { background: var(--qb-card); border-top: 2px solid var(--qb-border); font-weight: 700; padding: 8px; text-align: right; }

/* section group separator row */
.qb-sec-row td { background: var(--bs-primary-bg-subtle, #eef3fb); color: var(--qb-accent); font-weight: 700; font-size: 12px; padding: 5px 10px; border-bottom: 1px solid var(--qb-border); }

/* ── Footer: remarks | totals ─────────────────────────────────────────────────────────────── */
.qb-foot { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: stretch; }
.qb-totals .qb-trow { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; }
.qb-totals .qb-trow + .qb-trow { border-top: 1px solid var(--qb-line); }
.qb-totals .qb-trow .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.qb-totals .qb-trow.disc .v { color: var(--qb-danger); }
.qb-totals .qb-grand { margin-top: 6px; border-top: 2px solid var(--qb-border); padding-top: 20px; display: flex; justify-content: space-between; align-items: baseline; }
.qb-totals .qb-grand .lbl { font-weight: 700; }
.qb-totals .qb-grand .v { font-size: 20px; font-weight: 800; color: var(--qb-accent); font-variant-numeric: tabular-nums; }
.qb-vat-note { color: var(--qb-muted); font-size: 11px; margin-top: 6px; }

/* Toolbar sits above the scroll body — no own padding so its buttons line up with the title and
   cards at the host .s-Panel's 1rem offset. */
.s-QuotationDialog .s-Toolbar { padding: 0; }
.s-QuotationDialog .s-Toolbar .tool-group { margin-left: 0; }

/* Make the host dialog/panel give the builder full room and no default padding. */
.s-QuotationDialog .s-DialogContent,
.s-QuotationDialog .panel-body { padding: 0 !important; }
.s-QuotationDialog.flex-layout { display: flex; flex-direction: column; min-height: 0; }
.s-QuotationDialog .panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.s-QuotationDialog .qb { flex: 1 1 auto; min-height: 0; }
/* When opened as a modal dialog (not a panel), give it a roomy fixed height. */
.ui-dialog .qb { height: 78vh; }

/* ============================================================================================
   Mobile / narrow viewports — stack the two-column header & footer, let the items head wrap,
   and turn the wide 8-column items table into one labeled card per line so nothing overflows.
   ============================================================================================ */
@media (max-width: 760px) {
    .qb { font-size: 13.5px; }
    .qb-scroll { gap: 12px; }
    .qb-card-pad { padding: 12px; }
    /* NOTE: mobile page scrolling is handled globally in sidebar.css (the .s-main scroll
       region is only bounded at ≥768px upstream). This file only handles the qb LAYOUT. */

    /* Header: stack bill-to over quote-meta; swap the dividing border to the top. */
    .qb-head { grid-template-columns: 1fr; }
    .qb-head > .qb-col { padding: 14px; }
    .qb-head > .qb-col + .qb-col { border-left: 0; border-top: 1px solid var(--qb-line); }

    /* Fields: label above control so long labels/inputs get full width. */
    .qb-field { grid-template-columns: 1fr; align-items: stretch; gap: 4px; margin-bottom: 12px; }
    .qb-field > label { font-size: 12px; }
    .qb-input, .qb-select, .qb-date, .qb-textarea, .qb-readonly,
    .qb-ta-new, .qb-cell-input { height: 40px; font-size: 16px; } /* 16px avoids iOS zoom-on-focus */
    .qb-textarea { height: auto; }
    .qb-more-grid { grid-template-columns: 1fr; gap: 0; }

    /* Items toolbar: let the product search + blank-row button wrap to full width. */
    .qb-items-head { flex-wrap: wrap; }
    .qb-items-head .qb-spacer { display: none; }
    .qb-add-wrap { min-width: 0 !important; width: 100%; order: 3; }
    .qb-addbtn { width: 100%; justify-content: center; height: 40px; order: 4; }

    /* Items table → one card per line. */
    .qb-tbl, .qb-tbl tbody, .qb-tbl tr, .qb-tbl td { display: block; width: 100%; }
    .qb-tbl thead { display: none; }
    .qb-tbl tbody tr {
        position: relative; border: 1px solid var(--qb-border); border-radius: 10px;
        padding: 30px 12px 10px; margin-bottom: 12px; background: var(--qb-card);
    }
    .qb-tbl tbody tr:hover { background: var(--qb-card); }
    .qb-tbl tbody td {
        border: 0; padding: 4px 0;
        display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px;
    }
    .qb-tbl tbody td::before {
        content: attr(data-label); color: var(--qb-muted); font-weight: 600; font-size: 12px;
    }
    /* Delete button floats to the card's top-right corner; no label. */
    .qb-tbl tbody td.qb-col-del { position: absolute; top: 4px; right: 6px; width: auto; padding: 0; display: block; }
    .qb-tbl tbody td.qb-col-del::before { content: none; }
    .qb-del { font-size: 22px; padding: 4px; opacity: .7; }
    /* Cells become bordered inputs (they're borderless inside the desktop grid). */
    .qb-cell-input { border: 1px solid var(--qb-border); border-radius: 8px; padding: 0 10px; }
    .qb-cell-input.num { text-align: left; }
    .qb-cell-total { text-align: left; padding: 4px 0; }
    .qb-cell-total::before { content: attr(data-label); }
    .qb-empty { display: block; padding: 22px 12px; }
    .qb-empty-row td::before { content: none; }

    /* Footer: remarks over totals, both full width. */
    .qb-foot { grid-template-columns: 1fr; }

    /* Toolbar: allow the action buttons to wrap rather than clip. */
    .s-QuotationDialog .s-Toolbar .tool-group { flex-wrap: wrap; }
}

/* ── Payment / Receipt builder additions ───────────────────────────────────────── */
.qb-dir-toggle { display:inline-flex; border:1px solid var(--qb-border,#d8dbe0); border-radius:8px; overflow:hidden; margin-bottom:10px; }
.qb-dir-toggle button { border:0; background:transparent; padding:6px 16px; cursor:pointer; font-weight:600; }
.qb-dir-toggle button.active { background:var(--qb-accent,#6b4ce6); color:#fff; }
.qb-alloc-tbl { width:100%; border-collapse:collapse; }
.qb-alloc-tbl th, .qb-alloc-tbl td { padding:6px 8px; border-bottom:1px solid var(--qb-border,#eef0f3); }
.qb-alloc-tbl td.num, .qb-alloc-tbl th.num { text-align:right; }
.qb-alloc-tbl input.qb-apply { width:110px; text-align:right; }
.qb-alloc-empty { padding:18px; text-align:center; color:#8a8f98; }
.qb-pay-summary { display:flex; flex-direction:column; gap:6px; }
.qb-pay-summary .qb-trow.unapplied .v { color:#b8860b; }

/* Journal entry builder: balance indicator + per-line delete */
.qb-totals .qb-grand .v.qb-good { color:#1a8a4f; }
.qb-totals .qb-grand .v.qb-bad { color:#c0392b; }
.qb-rowdel { border:0; background:transparent; color:#c0392b; font-size:14px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; }
.qb-rowdel:hover { background:rgba(192,57,43,.1); }

/* Opening Balances builder */
.s-opening-balances .qb-ob-help { color: var(--qb-muted); font-size: 12.5px; line-height: 1.5; margin: 4px 0 10px; }
.s-opening-balances .qb-ob-status { display:block; font-size:12.5px; font-weight:600; color: var(--qb-muted); }
.s-opening-balances .qb-ob-status.posted { color:#1a8a4f; }
.qb-ob-post { margin-top:12px; width:100%; height:38px; border:0; border-radius:8px; cursor:pointer;
    background:#6c3fc5; color:#fff; font-weight:700; font-size:13.5px; }
.qb-ob-post:hover { background:#5a33a8; }

/* Payment multi-currency: USD-equivalent readout under the foreign Amount */
.qb-usd-row { color: var(--qb-muted); font-size: 12px; }
.qb-usd-row .qb-amount-usd { font-weight: 600; }

/* RTL: the framework flips the layout via dir="rtl"; keep numbers, codes and dates LTR so
   amounts, account codes and ISO dates read correctly inside the right-to-left builders. */
html[dir="rtl"] .qb .num,
html[dir="rtl"] .qb-apply,
html[dir="rtl"] .qb-amount-usd,
html[dir="rtl"] .qb-ta-code,
html[dir="rtl"] .qb-date,
html[dir="rtl"] .qb input[type="date"] { direction: ltr; unicode-bidi: plaintext; }
html[dir="rtl"] .qb .num { text-align: left; }
html[dir="rtl"] .qb-readonly-note { border-radius: 12px 12px 0 0; }