/* Source Product Workbench — global dialog styles (SfDialog CssClass="spw-dialog").
   Link once from App.razor / the layout head, next to the other bomsync-*.css files. */

.spw-dialog .spw-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spw-dialog .spw-form-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.spw-dialog .spw-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #5b6673;
    min-width: 0;
}

.spw-dialog .spw-field-checks {
    justify-content: flex-end;
    gap: 8px;
}

.spw-dialog .spw-span-2 {
    grid-column: span 2;
}

.spw-dialog .spw-req {
    color: #a12c2c;
}

.spw-dialog .spw-hint {
    font-size: 12px;
    color: #5b6673;
    margin: 0;
}

.spw-dialog .spw-error {
    font-size: 13px;
    color: #a12c2c;
    background: #fbeaea;
    padding: 8px 10px;
    border-radius: 6px;
}

@media (max-width: 640px) {
    .spw-dialog .spw-form-2col {
        grid-template-columns: minmax(0, 1fr);
    }

    .spw-dialog .spw-span-2 {
        grid-column: auto;
    }
}

/* Phase 2b — Offer Matrix, Location coverage, Registry dialog.
   Append to wwwroot/css/source-product-workbench.css (global; Syncfusion renders grid templates
   and dialogs outside component-scoped CSS). Teal = action/glass accent already used on Maps links. */

.om { padding: 0; overflow: hidden; gap: 0; }
.om-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 0; }
.om-title { display: flex; align-items: baseline; gap: 10px; }
.om-compare { display: flex; align-items: center; gap: 4px; }
.om-seg.e-btn { border-radius: 0; text-transform: none; font-size: 12px; padding: 4px 10px; min-height: 28px; border: 1px solid #b9c3ce; background: #fff; color: #24507a; }
.om-seg.e-btn:first-of-type { border-radius: 6px 0 0 6px; }
.om-compare .e-tooltip-wrap .om-seg.e-btn, .om-seg.e-btn:last-of-type { border-radius: 0 6px 6px 0; }
.om-seg.e-btn.is-on { background: #24507a; color: #fff; border-color: #24507a; }

.om-views { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 8px 14px 0; border-bottom: 1px solid #e3e8ee; }
.om-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.om-tab { font: inherit; font-size: 13px; padding: 8px 14px; border: 0; background: transparent; color: #5b6673; cursor: pointer; }
.om-tab:hover { color: #24507a; }
.om-tab.is-on { background: #fff; color: #24507a; font-weight: 600; box-shadow: inset 0 -3px 0 #24507a; }
.om-tab:focus-visible { outline: 2px solid #0e5c68; outline-offset: -2px; }
.om-tab-new { color: #0e5c68; font-weight: 600; }
.om-view-actions { display: flex; gap: 6px; align-items: center; padding-bottom: 6px; }
.om-dirty { font-size: 12px; color: #8a5300; }
.om-save.e-btn { background: #0e5c68; border-color: #0e5c68; color: #fff; text-transform: none; }
.om-save.e-btn:disabled { background: #c4ccd5; border-color: #c4ccd5; }

.om-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 14px; background: #f7f9fb; border-bottom: 1px solid #e3e8ee; }
.om-toolbar .e-btn { text-transform: none; }
.om-primary.e-btn { border: 1px solid #24507a; color: #24507a; background: #fff; font-weight: 600; }
.om-chip { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: #e6f2f3; color: #0e5c68; white-space: nowrap; }
.om-flex { flex: 1; }

.om-grid { overflow-x: auto; }
.om-grid .e-grid .e-headercell { background: #2f5f8a; color: #fff; }
.om-grid .e-grid .e-headercell .e-headertext { color: #fff; }
.om-grid [data-inactive="true"] { color: #8a96a3; }
.om-fast { color: #0e5c68; font-weight: 600; }
.om-soon { color: #8a5300; font-weight: 600; }
.om-strong { font-weight: 600; }
.om-foot { padding: 8px 14px; border-top: 1px solid #e3e8ee; }

.om-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; text-align: center; }

.om-editor .om-col-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; border: 1px solid #e3e8ee; border-radius: 6px; padding: 4px; }
.om-editor .om-col-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 4px; }
.om-editor .om-col-row:hover { background: #f5f8fb; }
.om-arrow { font: inherit; font-size: 12px; width: 26px; height: 26px; border: 1px solid #c4ccd5; border-radius: 4px; background: #fff; cursor: pointer; }
.om-filter-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.om-link { font: inherit; font-size: 12px; font-weight: 600; color: #0e5c68; background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }

.olc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.olc .spw-chip-ok, .olc .spw-chip-gap { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.olc .spw-chip-ok { background: #e2efe6; color: #2f5d3a; }
.olc .spw-chip-gap { background: #fbf1e3; color: #8a5300; }

.spw-registry.e-btn:not(:disabled) { border-color: #0e5c68; color: #0e5c68; background: #e6f2f3; }

.rid .rid-body { display: flex; flex-wrap: wrap; gap: 0; min-height: 520px; }
.rid .rid-pick { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 16px 4px 4px; border-right: 1px solid #e3e8ee; }
.rid .rid-match { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 4px 16px; }
.rid .rid-match h4 { margin: 0; font-size: 15px; }
.rid .rid-search { display: flex; gap: 8px; }
.rid .rid-card { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 8px; border: 1px solid #d8dee5; background: #fff; cursor: pointer; }
.rid .rid-card.is-on { border: 1.5px solid #24507a; background: #eef4fa; }
.rid .rid-card.is-linked { opacity: .6; cursor: not-allowed; }
.rid .rid-card-top { display: flex; justify-content: space-between; gap: 8px; }
.rid .rid-offer { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eef1f4; }
.rid .rid-empty { display: flex; flex-direction: column; gap: 8px; padding: 32px 12px; max-width: 560px; }

/* R7 — cost basis bar + best markers */
.om-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 14px; border-bottom: 1px solid #e3e8ee; background: #fbfcfd; }
.om-basis-label { font-size: 12px; font-weight: 600; color: #24507a; }
.om-basis .e-input-group, .om-basis .e-ddl { min-height: 28px; }
.om-chip-warn { background: #fbf1e3; color: #8a5300; }
.om-chip-await { background: #e8eef8; color: #1b2d5e; }
.om-cart-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid #e3e8ee;
  background: color-mix(in srgb, var(--brand-blue, #1b2d5e) 6%, #fff);
}
.om-cart-bar__label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #0e5c68;
}
.om-best { box-shadow: inset 0 -2px 0 #2f7d4f; color: #1f5c38; }
.om-basis-text { color: #4a5663; font-size: 12px; }
.om-muted { color: #8a96a3; }