.compact-heading { margin-bottom: 18px; }
.catalog-note { display: flex; gap: 8px; align-items: center; padding: 13px 15px; border: 1px solid #d8e0ec; border-radius: 10px; background: #f4f7fb; color: #53627a; }
.catalog-note strong { color: #152044; }
.cost-entry-note { background: #fffbeb; border-color: #f0d9a8; color: #6b5619; margin-bottom: 14px; }
.cost-entry-note strong { color: #4a3a08; }
.cost-entry-note a { color: #1d4ed8; font-weight: 700; }
.catalog-note span { font-size: 13px; }
.template-sections { display: grid; gap: 10px; }
.template-section { border: 1px solid #dbe2ec; border-radius: 12px; overflow: hidden; background: #fff; }
.template-section > summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; cursor: pointer; color: #152044; font-weight: 750; background: #f8faff; }
.template-section > summary::marker { color: #ed8500; }
.template-section > summary small { color: #718096; font-weight: 600; }
.template-section .table-wrap { border-top: 1px solid #e1e7ef; border-radius: 0; }
.template-table th { font-size: 11px; }
.template-table td { padding: 8px 10px; }
.template-table td:nth-child(2) strong { display: block; min-width: 260px; font-size: 13px; }
.template-table td:nth-child(2) small { display: block; margin-top: 3px; color: #7a879b; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.include-column { width: 44px; }
.calculated-row { background: #f1f4fa; }
.calculated-row input[readonly] { color: #34456b; font-weight: 700; cursor: not-allowed; }
.calculated-field { display: flex; flex-direction: column; justify-content: center; min-height: 70px; padding: 12px 14px; border-radius: 9px; background: #19245d; color: #fff; }
.calculated-field span { color: #c6d0ec; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.calculated-field strong { margin-top: 4px; font-size: 20px; }
.commission-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 15px; padding: 14px 16px; border-radius: 11px; background: #f4f6fb; }
.commission-toolbar > div { display: flex; flex-direction: column; margin-right: auto; }
.commission-toolbar span { color: #69768c; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.commission-toolbar strong { color: #18245f; font-size: 23px; }
.check-label { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 7px; font-size: 13px; }
.check-label input { width: auto; }
.duty-eligibility { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: #53627a; font-size: 11px; font-weight: 650; }
.duty-eligibility input { width: auto; min-height: 0; margin: 0; }
.commission-exclusion { display: grid; width: 220px; gap: 4px; color: #53627a; font-size: 11px; font-weight: 700; }
.commission-exclusion input { min-height: 36px; }
.commission-exclusion small { color: #718096; font-size: 10px; font-weight: 500; }
.commission-table { min-width: 1250px; }
.commission-table th { font-size: 10px; }
.commission-table td { padding: 7px 6px; }
.commission-table select { min-width: 150px; }
.commission-notes { display: block; margin-top: 16px; }
.empty-state { padding: 18px; border: 1px dashed #cbd4e2; border-radius: 10px; color: #66738a; background: #f8faff; }
.ops-contrast .catalog-note, .ops-contrast .template-section > summary, .ops-contrast .commission-toolbar, .ops-contrast .calculated-row { background: #202b58; border-color: #344273; color: #c9d2e8; }
.ops-contrast .template-section { background: #182248; border-color: #344273; }
.ops-contrast .template-section > summary, .ops-contrast .catalog-note strong { color: #fff; }
@media (max-width: 850px) { .catalog-note { align-items: flex-start; flex-direction: column; } .commission-toolbar { align-items: flex-start; } .commission-toolbar > div { width: 100%; } }
.catalog-note[data-state="matched"] { border-color: #b8dfc1; background: #f2fbf4; }
.catalog-note[data-state="matched"] strong { color: #166534; }
.catalog-note[data-state="custom"] { border-color: #f0d3aa; background: #fff9ef; }
.catalog-note[data-state="custom"] strong { color: #9a5200; }
.type-or-choose-control { position: relative; display: block; }
.type-or-choose-control::after { position: absolute; top: 50%; right: 12px; color: #66758c; font-family: "Material Symbols Rounded"; font-size: 20px; font-weight: normal; content: "unfold_more"; pointer-events: none; transform: translateY(-50%); }
.type-or-choose-control input { padding-right: 40px; }
.field-help { color: #718096; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.catalog-template-field.is-locked select { color: #53627a; background: #eef2f7; cursor: not-allowed; }
.catalog-persistence-note { display: flex; align-items: flex-start; gap: 8px; margin: -5px 0 0; color: #53627a; font-size: 11px; }
.catalog-persistence-note .material-symbols-rounded { margin-top: 1px; color: #2e7d32; font-size: 17px; }
.ops-contrast .catalog-note[data-state="matched"], .ops-contrast .catalog-note[data-state="custom"] { background: #202b58; border-color: #51628f; }
.ops-contrast .catalog-note[data-state="matched"] strong { color: #90d59d; }
.ops-contrast .catalog-note[data-state="custom"] strong { color: #f6bc72; }
.ops-contrast .catalog-template-field.is-locked select { color: #aebbd5; background: #202b58; }
.ops-contrast .catalog-persistence-note, .ops-contrast .field-help { color: #aebbd5; }

/* Combined-solution component rows on the new-worksheet form */
.component-spec-list { display: flex; flex-direction: column; gap: 13px; }
.component-spec-list:not(:empty) { margin-bottom: 13px; }
.component-spec-row { grid-template-columns: minmax(0,.9fr) minmax(0,2.1fr) minmax(0,.55fr) minmax(0,1.1fr) auto; align-items: end; padding: 13px 15px; border: 1px solid #d8e0ec; border-radius: 10px; background: #f9fbfd; }
.component-spec-row .component-remove { margin-bottom: 2px; white-space: nowrap; }
.ops-contrast .component-spec-row { background: #202b58; border-color: #344273; }
@media (max-width: 850px) { .component-spec-row { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Phase-2 Step 4: solution margin strip, component panels, margin cards */
.solution-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.solution-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid #d8e0ec; border-radius: 10px; background: #f4f7fb; }
.solution-chip strong { color: #152044; font-size: 13px; }
.solution-chip small { color: #53627a; font-size: 12px; }
.solution-chip-total { background: #152044; border-color: #152044; }
.solution-chip-total strong, .solution-chip-total small { color: #fff; }
.ops-contrast .solution-chip { background: #202b58; border-color: #344273; }
.ops-contrast .solution-chip strong { color: #fff; }
.ops-contrast .solution-chip small { color: #c9d2e8; }
.component-panels { display: flex; flex-direction: column; gap: 16px; }
.component-panel { border: 1px solid #d8e0ec; border-radius: 12px; background: #fff; }
.component-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: 12px; background: #f4f7fb; }
.component-panel[open] > summary { border-bottom: 1px solid #d8e0ec; border-radius: 12px 12px 0 0; }
.component-panel-title { display: flex; flex-direction: column; gap: 2px; }
.component-panel-title strong { color: #152044; font-size: 14px; }
.component-panel-title small { color: #53627a; font-size: 12px; }
.component-panel-margin { padding: 4px 12px; border-radius: 999px; background: #152044; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.component-panel > *:not(summary) { margin: 0 18px 16px; }
.component-panel > .component-subhead { margin-top: 18px; color: #53627a; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ops-contrast .component-panel { background: #182252; border-color: #344273; }
.ops-contrast .component-panel > summary { background: #202b58; border-color: #344273; }
.ops-contrast .component-panel-title strong { color: #fff; }
.margin-card { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; padding: 15px 17px; border: 1px solid #d8e0ec; border-radius: 12px; background: #f9fbfd; }
/* The quick edit screen mirrors the price card under Save & recalculate. */
.quick-price-footer { margin-top: 18px; }
.margin-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.margin-card-stats-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .margin-card-stats-four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.margin-card-stats > div { display: flex; flex-direction: column; gap: 2px; }
.margin-card-stats span { color: #53627a; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.margin-card-stats strong { color: #152044; font-size: 18px; }
.margin-card-stats small { color: #53627a; font-size: 12px; }
.margin-card-headline strong { color: #0f6d31; }
.ops-contrast .margin-card { background: #202b58; border-color: #344273; }
.ops-contrast .margin-card-stats strong { color: #fff; }
.ops-contrast .margin-card-headline strong { color: #90d59d; }
@media (max-width: 850px) { .margin-card-stats { grid-template-columns: 1fr; } .component-panel > summary { flex-direction: column; align-items: flex-start; } }

/* Phase-2 Step 6: priced add/deduct alternates */
.alternate-row { background: #fffdf5; }
.alternate-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
.alternate-deduct { background: #fdeaea; color: #9c1f1f; border: 1px solid #f1c0c0; }
.alternate-add { background: #eaf7ee; color: #166534; border: 1px solid #bfe3c9; }
.alternate-group-tag { display: block; margin-top: 2px; color: #8a6d1a; font-size: 11px; font-weight: 600; }
.ops-contrast .alternate-row { background: #262e5a; }
.ops-contrast .alternate-deduct { background: #4a2330; border-color: #7c3a4d; color: #f3b7c4; }
.ops-contrast .alternate-add { background: #1e3d2c; border-color: #35664a; color: #90d59d; }

/* Phase-2 Step 8: supplier-quote reference cards */
.attachment-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.attachment-item { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border: 1px solid #d8e0ec; border-radius: 10px; background: #f9fbfd; }
.attachment-headline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attachment-headline strong { color: #152044; font-size: 13px; }
.attachment-quote { color: #53627a; font-size: 12px; }
.attachment-version { padding: 2px 8px; border-radius: 999px; background: #eef2f9; border: 1px solid #d8e0ec; color: #3b4a63; font-size: 11px; font-weight: 700; }
.attachment-meta, .attachment-hash { color: #53627a; font-size: 12px; }
.attachment-ref { font-size: 12px; overflow-wrap: anywhere; }
.attachment-ref a { color: #1c4fa1; }
.attachment-hash { font-family: ui-monospace, monospace; }
.ops-contrast .attachment-item { background: #202b58; border-color: #344273; }
.ops-contrast .attachment-headline strong { color: #fff; }
.ops-contrast .attachment-version { background: #182252; border-color: #51628f; color: #c9d2e8; }
/* Quick edit price card stays in view (Chad, Sep 9): the bottom mirror is gone,
   the top card is sticky so price and margin read while the Price fields and
   the Cash flow terms below are being changed. */
main.page-narrow > .margin-card { position: sticky; top: 10px; z-index: 20; box-shadow: 0 8px 24px rgba(16,31,47,.12); }