.bp-editor-root, .bp-viewer3d-root, .bp-electrical-root, .bp-materials-root, .bp-rules-root {
    font-family: system-ui, sans-serif;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 6px;
    background: #fafafa;
    margin: 12px 0;
}

/* Editor + electrical break out to full viewport width regardless of theme container.
   Width + margin-left are set by their JS (measured at runtime, so it works
   even when the parent isn't viewport-centered or has off-center sidebars). */
.bp-editor-root, .bp-electrical-root {
    box-sizing: border-box;
    border-radius: 0;
    position: relative;
	width:100%;
}

.bp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.bp-toolbar button {
    padding: 4px 10px;
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
	color: #3a8;
}
.bp-toolbar button.active { background: #3a8; color: #fff; border-color: #2a6; }
.bp-spacer { flex: 1; }
.bp-toolbar-sep {
    width: 1px;
    align-self: stretch;
    background: #d0d0d0;
    margin: 0 4px;
}
.bp-clear-tapes:disabled,
.bp-undo:disabled,
.bp-redo:disabled { opacity: 0.4; cursor: not-allowed; }

.bp-toolbar [data-tool="exterior"]::before,
.bp-toolbar [data-tool="interior"]::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #333;
    margin-right: 6px;
    vertical-align: middle;
}
.bp-toolbar [data-tool="exterior"]::before { background: #b0b0b0; }
.bp-toolbar [data-tool="interior"]::before { background: #ededed; }

.bp-toolbar [data-tool="toggle_insulation"]::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #333;
    margin-right: 6px;
    vertical-align: middle;
    background: #a8c8f0;
}

.bp-toolbar [data-tool="toggle_drywall"]::before,
.bp-toolbar [data-tool="toggle_all_drywall"]::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #333;
    margin-right: 6px;
    vertical-align: middle;
    background: #c44;
}

/* When the Wall tool is active, the Exterior/Interior button matching the
   default kind for new walls gets a teal outline so it's visible at a glance. */
.bp-toolbar button.bp-wall-default {
    outline: 2px solid #3a8;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px #3a8;
}

.bp-toolbar [data-tool="mark_all_existing"]::before,
.bp-toolbar [data-tool="mark_all_new"]::before,
.bp-toolbar [data-tool="toggle_status"]::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #333;
    margin-right: 6px;
    vertical-align: middle;
}
.bp-toolbar [data-tool="mark_all_existing"]::before { background: #f4a8a8; }
.bp-toolbar [data-tool="mark_all_new"]::before      { background: #a8e0a8; }
.bp-toolbar [data-tool="toggle_status"]::before     { background: linear-gradient(135deg, #f4a8a8 0%, #f4a8a8 50%, #a8e0a8 50%, #a8e0a8 100%); }
.bp-status { color: #666; font-size: 12px; margin-left: 8px; }
.bp-status.bp-status-success { color: #2a6; font-weight: 600; }
.bp-status.bp-status-error   { color: #c44; font-weight: 600; }

.bp-props {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: #fff7e0;
    border: 1px solid #f0d090;
    border-radius: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
.bp-props label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #555; }
.bp-props input[type="number"] { width: 70px; padding: 2px 4px; font-size: 13px; }
.bp-props button { padding: 4px 10px; border: 1px solid #bbb; background: #fff; border-radius: 3px; cursor: pointer; color:#000;}
.bp-props .bp-danger { background: #c44; color: #fff; border: none; }
.bp-props-fields { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bp-canvas-host {
    border: 1px solid #ccc;
    background: #fff;
    height: 900px;
    position: relative;
}
.bp-3d-host {
    border: 1px solid #ccc;
    background: #fff;
    height: 600px;
}
.bp-hint, .bp-3d-hint { font-size: 12px; color: #666; margin-top: 6px; }

.bp-materials-table, .bp-rules-table {
    width: 100%;
    border-collapse: collapse;
}
.bp-materials-section { margin-top: 10px; }
.bp-materials-section h4 {
    margin: 6px 0 6px;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
}
.bp-materials-table tfoot td { background: #f7f7f7; font-weight: 600; }
.bp-materials-table .bp-totals-label  { text-align: right; }
.bp-materials-table .bp-totals-amount { text-align: left; }
.bp-materials-table th, .bp-materials-table td,
.bp-rules-table th, .bp-rules-table td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    text-align: left;
    font-size: 13px;
}
.bp-materials-table th, .bp-rules-table th { background: #f0f0f0; }

/* Section blocks on the Rules page mirror the Materials list layout: a
   labeled <section> per category, each with its own table. Headers in those
   tables are sticky so the column titles stay visible while scrolling. */
.bp-rules-section { margin-top: 18px; }
.bp-rules-section-title {
    margin: 16px 0 6px;
    font-size: 15px;
    color: #333;
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
}
.bp-rules-section-count {
    font-size: 12px;
    color: #888;
    font-weight: normal;
    margin-left: 8px;
}
.bp-rules-section-empty {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin: 4px 0 0;
}

/* Sticky table headers. Each <thead> sticks independently to the top of the
   viewport while its section is in view; once a section scrolls past, the
   next section's header takes over. The WP admin bar is 32 px on desktop and
   46 px on the small-screen layout (matches /wp-includes/css/admin-bar.css). */
.bp-rules-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f0f0f0;
    box-shadow: inset 0 -1px 0 #ccc;
}
.admin-bar .bp-rules-table thead th { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .bp-rules-table thead th { top: 46px; }
}

/* Drag-and-drop handle column. The whole <tr> is draggable, but the leading
   handle cell gives a clear "grab here" affordance and reserves a column for
   the placeholder line we draw during dragover. */
.bp-rules-drag-col { width: 24px; padding: 0 !important; }
.bp-rules-table tbody td.bp-rules-drag-cell {
    width: 24px;
    text-align: center;
    color: #888;
    cursor: grab;
    user-select: none;
    font-size: 16px;
    line-height: 1;
}
.bp-rules-table tbody tr {
    transition: background 80ms;
}
.bp-rules-table tbody tr.bp-row-dragging {
    opacity: 0.4;
    background: #fffbe5;
}
.bp-rules-table tbody tr.bp-row-drop-above {
    box-shadow: inset 0 3px 0 #2a8;
}
.bp-rules-table tbody tr.bp-row-drop-below {
    box-shadow: inset 0 -3px 0 #2a8;
}

.bp-rules-actions {
    margin: 12px 0;
    display: flex;
    gap: 8px;
}
.bp-add-rule {
    padding: 8px 16px;
    background: #2a6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.bp-add-rule:hover { background: #2a8; }

.bp-refresh-prices {
    padding: 8px 14px;
    background: #f6f6f6;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.bp-refresh-prices:hover { background: #ececec; }
.bp-refresh-prices:disabled {
    opacity: 0.6;
    cursor: wait;
}
.bp-refresh-status {
    align-self: center;
    font-size: 13px;
    color: #555;
}
.bp-refresh-status.bp-error   { color: #a83a3a; }
.bp-refresh-status.bp-success { color: #2a7a3a; }
/* When a row's price gets refreshed, briefly flash the cell so the user can
   tell which rule just updated. */
.bp-rules-table tbody td.bp-price-updated {
    background: #d6f0d6;
    transition: background 1.4s ease-out;
}

.bp-rule-dialog {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0;
    max-width: 720px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.bp-rule-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }

.bp-rule-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    padding: 18px;
    background: #fff;
    border-radius: 8px;
}
.bp-rule-form-title {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-size: 16px;
}
.bp-rule-form label {
    display: flex; flex-direction: column;
    font-size: 12px; color: #555;
}
.bp-rule-form input, .bp-rule-form select {
    padding: 5px 6px; font-size: 13px;
}
.bp-rule-form .bp-rule-formula-row {
    grid-column: 1 / -1;
}
.bp-rule-form .bp-rule-formula-row input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bp-rule-form .bp-rule-url-row {
    grid-column: 1 / -1;
}
.bp-rule-form .bp-rule-url-row input { flex: 1 1 auto; min-width: 0; }
.bp-rule-form .bp-fetch-price {
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.bp-rule-form .bp-fetch-price:disabled { opacity: 0.5; cursor: wait; }
.bp-rule-form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 4px;
}
.bp-rule-form-actions button { padding: 6px 14px; cursor: pointer; }
.bp-rule-form-actions .bp-rule-save {
    background: #2a6; color: #fff; border: none; border-radius: 4px; font-weight: 600;
}
.bp-rule-form-actions .bp-rule-cancel {
    background: #fff; border: 1px solid #bbb; border-radius: 4px; color: #333;
}
.bp-formula-help { margin-top: 12px; font-size: 12px; color: #555; }
.bp-formula-help code { background: #eef; padding: 1px 3px; }

.bp-locked { color: #a44; font-style: italic; }

/* Tabs on the single-blueprint front-end view (editor / 3D / materials) */
.bp-tabs { margin: 0; }
.bp-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px;
    margin: 0;
    border-bottom: 2px solid #ddd;
    background: transparent;
}
.bp-tabs-nav button {
    padding: 8px 18px;
    border: 1px solid #bbb;
    border-bottom: none;
    background: #f0f0f0;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-family: system-ui, sans-serif;
    color: #333;
    margin-bottom: -2px;
}
.bp-tabs-nav button:hover { background: #fff; }
.bp-tabs-nav button.active {
    background: #fff;
    border-bottom: 2px solid #fff;
    font-weight: 600;
    color: #2a6;
}
.bp-tab-panel { padding-top: 0; }

/* ===== Contractors page ===== */

.bp-contractors-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.bp-contractors-status {
    align-self: center;
    font-size: 13px;
    color: #555;
}
.bp-contractors-status.bp-error   { color: #a83a3a; }
.bp-contractors-status.bp-success { color: #2a7a3a; }
.bp-contractors-empty {
    font-size: 13px;
    color: #888;
    font-style: italic;
}
.bp-add-contractor {
    padding: 8px 16px;
    background: #2a6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.bp-add-contractor:hover { background: #2a8; }

.bp-contractor-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}
.bp-contractor-card-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
}
.bp-contractor-card-head h4 {
    margin: 0;
    font-size: 16px;
}
.bp-contractor-card-meta {
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.bp-contractor-pricecount {
    color: #2a6;
    font-weight: 600;
}
.bp-contractor-card-actions {
    display: flex;
    gap: 6px;
}
.bp-contractor-card-actions button {
    padding: 4px 10px;
    border: 1px solid #bbb;
    background: #f6f6f6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.bp-contractor-card-actions button:hover { background: #ececec; }
.bp-contractor-card-notes {
    margin: 8px 0 4px;
    font-size: 13px;
    color: #444;
    white-space: pre-wrap;
}
.bp-contractor-card-prices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #ddd;
}
.bp-contractor-card-cat h5 {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}
.bp-contractor-card-cat dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    font-size: 13px;
}
.bp-contractor-card-cat dt { color: #333; }
.bp-contractor-card-cat dt span { color: #888; font-size: 11px; margin-left: 4px; }
.bp-contractor-card-cat dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Contractor edit dialog */
.bp-contractor-dialog {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0;
    max-width: 920px;
    width: 92vw;
    max-height: 90vh;
    background: #fff;
}
.bp-contractor-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.bp-contractor-form {
    margin: 0;
    padding: 18px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bp-contractor-form-title {
    margin: 0;
    font-size: 16px;
}
.bp-contractor-form-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.bp-contractor-form-meta label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #555;
}
.bp-contractor-form-meta input,
.bp-contractor-form-meta textarea {
    padding: 4px 6px;
    font-size: 13px;
    font-family: inherit;
}
.bp-contractor-notes-row { grid-column: 1 / -1; }

.bp-contractor-prices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.bp-contractor-cat {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px 12px;
    margin: 0;
}
.bp-contractor-cat legend {
    padding: 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2a6;
    font-weight: 600;
}
.bp-contractor-price-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 2px 0;
}
.bp-contractor-price-label { color: #333; }
.bp-contractor-price-unit {
    color: #888;
    font-size: 11px;
    margin-left: 4px;
}
.bp-contractor-price-input { white-space: nowrap; color: #666; }
.bp-contractor-price-input input {
    width: 70px;
    padding: 3px 6px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ===== Contractor compare — one block per trade ===== */

.bp-compare-section { margin-top: 22px; }
.bp-compare-section-title {
    margin: 0 0 8px;
    font-size: 15px;
    color: #333;
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
}
.bp-compare-section-count {
    font-size: 12px;
    color: #888;
    font-weight: normal;
    margin-left: 8px;
}
.bp-compare-section-empty {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin: 4px 0 0;
}

/* Wrapper used to be a scroll container with overflow:auto so a sticky
   thead/leftmost column could anchor while the table scrolled internally.
   That layout was right for the old wide single table; with per-section
   tables nothing actually overflows, and the sticky stacking context was
   floating the thead over the first tbody row. Now the wrapper is just a
   border/radius — no scroll, no sticky. */
.bp-compare-scroll {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-x: auto; /* only kicks in if a section is unusually wide */
}
.bp-compare-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    width: 100%;
}
.bp-compare-table th,
.bp-compare-table td {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 6px 10px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.bp-compare-table thead th {
    background: #f4f4f4;
    border-bottom: 2px solid #ccc;
}
.bp-compare-table .bp-compare-item-header {
    text-align: center;
    font-weight: 600;
}
.bp-compare-item-label { display: block; }
.bp-compare-item-unit {
    display: block;
    font-size: 11px;
    color: #888;
    font-weight: normal;
}
.bp-compare-table th.bp-compare-name {
    background: #fff;
    text-align: left;
}
.bp-compare-table thead th.bp-compare-name {
    background: #f4f4f4;
}
.bp-compare-row-name { display: block; font-weight: 600; }
.bp-compare-row-contact {
    display: block;
    font-size: 11px;
    color: #888;
    font-weight: normal;
}
.bp-compare-empty-cell { color: #bbb; text-align: center; }
.bp-compare-low {
    background: #d6f0d6;
    color: #1d5a1d;
    font-weight: 600;
}
.bp-compare-empty {
    font-size: 13px;
    color: #888;
    font-style: italic;
    margin-top: 10px;
}

/* ===== Projects index ===== */

.bp-projects-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.bp-projects-head h2 { margin: 0; flex: 1; }
.bp-create-project {
    padding: 8px 16px;
    background: #2a6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.bp-create-project:hover { background: #2a8; }
.bp-create-project:disabled { opacity: 0.6; cursor: wait; }
.bp-projects-status {
    font-size: 13px;
    color: #555;
}
.bp-projects-status.bp-error   { color: #a83a3a; }
.bp-projects-status.bp-success { color: #2a7a3a; }
.bp-projects-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.bp-projects-empty {
    font-size: 13px;
    color: #888;
    font-style: italic;
}
.bp-project-card {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow 120ms, transform 120ms;
}
.bp-project-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.bp-project-card-link {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
}
.bp-project-card-actions {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px;
    margin-top: -6px;
}
.bp-project-card-actions button {
    padding: 4px 10px;
    border: 1px solid #bbb;
    background: #f6f6f6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.bp-project-card-actions button:hover { background: #ececec; }
.bp-project-card-actions .bp-card-delete {
    color: #a83a3a;
    border-color: #d9a0a0;
}
.bp-project-card-actions .bp-card-delete:hover { background: #fdecec; }
.bp-project-card-title {
    margin: 0 0 6px;
    font-size: 16px;
    color: #2a6;
}
.bp-project-card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    color: #666;
}
.bp-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.bp-status-publish { background: #d6f0d6; color: #1d5a1d; }
.bp-status-draft   { background: #f0e7d6; color: #6a4a1d; }

/* ===== Project page header ===== */

.bp-project-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
}
.bp-project-title { margin: 0; flex: 1; }
.bp-project-publish-toggle,
.bp-project-rename,
.bp-project-delete {
    padding: 6px 14px;
    background: #f6f6f6;
    border: 1px solid #bbb;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.bp-project-publish-toggle:hover,
.bp-project-rename:hover,
.bp-project-delete:hover { background: #ececec; }
.bp-project-publish-toggle:disabled,
.bp-project-rename:disabled,
.bp-project-delete:disabled { opacity: 0.6; cursor: wait; }
.bp-project-delete {
    color: #a83a3a;
    border-color: #d9a0a0;
}
.bp-project-delete:hover { background: #fdecec; }
.bp-status-badge[data-status="publish"] ~ .bp-project-publish-toggle { color: #6a4a1d; }
.bp-project-publish-status {
    font-size: 12px;
    color: #555;
}
.bp-project-publish-status.bp-error   { color: #a83a3a; }
.bp-project-publish-status.bp-success { color: #2a7a3a; }

/* ===== Read-only mode for editor and electrical tabs ===== */

/* Hides every editing affordance so the view-only viewer just shows the
   canvas (and a floor switcher so users can browse multi-story projects).
   The JS skips wiring the corresponding handlers, so even though the
   buttons exist in the DOM they're inert. */
.bp-editor-root.bp-readonly .bp-toolbar,
.bp-editor-root.bp-readonly .bp-props,
.bp-editor-root.bp-readonly .bp-hint,
.bp-electrical-root.bp-readonly .bp-toolbar,
.bp-electrical-root.bp-readonly .bp-props,
.bp-electrical-root.bp-readonly .bp-hint {
    display: none !important;
}
/* Bring back just the floor selector — it's tucked inside the hidden
   toolbar but useful even in view-only mode for browsing floors. */
.bp-editor-root.bp-readonly .bp-toolbar,
.bp-electrical-root.bp-readonly .bp-toolbar {
    display: flex !important;
    justify-content: flex-end;
    background: transparent;
    border: 0;
    padding: 0 0 8px;
}
.bp-editor-root.bp-readonly .bp-toolbar > *,
.bp-electrical-root.bp-readonly .bp-toolbar > * {
    display: none;
}
.bp-editor-root.bp-readonly .bp-toolbar > label,
.bp-electrical-root.bp-readonly .bp-toolbar > label {
    /* The "Floor:" select is wrapped in a <label>. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.bp-editor-root.bp-readonly .bp-toolbar .bp-floor-select,
.bp-electrical-root.bp-readonly .bp-toolbar .bp-floor-select {
    display: inline-block;
}
.bp-project-root.bp-readonly .bp-project-header { /* no publish button visible */ }

/* ===== Bid submission form ===== */

.bp-bid-root { padding: 8px 0 24px; }
.bp-bid-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 900px;
    margin: 12px 0;
}
.bp-bid-form fieldset {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 14px 14px;
    margin: 0;
}
.bp-bid-form legend {
    padding: 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2a6;
    font-weight: 600;
}
.bp-bid-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.bp-bid-contact label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #555;
}
.bp-bid-contact input,
.bp-bid-contact textarea {
    padding: 4px 6px;
    font-size: 13px;
    font-family: inherit;
}
.bp-bid-contact .bp-bid-notes-row { grid-column: 1 / -1; }
/* Honeypot — invisible to humans, present in the DOM for bots. */
.bp-bid-form .bp-bid-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bp-bid-row {
    display: grid;
    grid-template-columns: 1fr auto 100px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
}
.bp-bid-row:last-child { border-bottom: 0; }
.bp-bid-row-label { font-size: 13px; }
.bp-bid-item { display: block; color: #333; font-weight: 600; }
.bp-bid-qty {
    display: inline-block;
    font-size: 12px;
    color: #2a6;
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}
.bp-bid-extra {
    display: inline-block;
    font-size: 11px;
    color: #888;
}
.bp-bid-row-input {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #666;
    font-size: 13px;
}
.bp-bid-row-input input {
    width: 80px;
    padding: 4px 6px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.bp-bid-row-unit { font-size: 11px; color: #888; }
.bp-bid-row-line {
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #2a7a3a;
    font-weight: 600;
}

.bp-bid-summary {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    padding: 8px 14px;
    background: #f4f8f4;
    border: 1px solid #cfd;
    border-radius: 6px;
    font-size: 14px;
}
.bp-bid-summary .bp-bid-total {
    font-size: 18px;
    color: #1d5a1d;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bp-bid-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bp-bid-submit {
    padding: 10px 20px;
    background: #2a6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.bp-bid-submit:hover { background: #2a8; }
.bp-bid-submit:disabled { opacity: 0.6; cursor: wait; }
.bp-bid-status { font-size: 13px; color: #555; }
.bp-bid-status.bp-error   { color: #a83a3a; }
.bp-bid-status.bp-success { color: #2a7a3a; }

/* ===== Bids received ===== */

.bp-bids-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
}
.bp-bids-empty {
    font-size: 13px;
    color: #888;
    font-style: italic;
}
.bp-bid-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}
.bp-bid-card-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
}
.bp-bid-card-who h4 { margin: 0 0 2px; font-size: 15px; }
.bp-bid-card-contact { font-size: 12px; color: #666; }
.bp-bid-card-when {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.bp-bid-card-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.bp-bid-card-total-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.04em;
}
.bp-bid-card-total-amount {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #333;
}
.bp-bid-card-total.bp-bid-low .bp-bid-card-total-amount {
    color: #1d5a1d;
}
.bp-bid-low-tag {
    background: #d6f0d6;
    color: #1d5a1d;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.bp-bid-card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bp-bid-card-actions button {
    padding: 4px 10px;
    border: 1px solid #bbb;
    background: #f6f6f6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.bp-bid-card-actions button:hover { background: #ececec; }
.bp-bid-card-actions .bp-bid-card-delete {
    color: #a83a3a;
    border-color: #d9a0a0;
}
.bp-bid-card-actions .bp-bid-card-delete:hover { background: #fdecec; }
.bp-bid-card-notes {
    margin: 8px 0 4px;
    font-size: 13px;
    color: #444;
    white-space: pre-wrap;
}
.bp-bid-card-detail {
    border-top: 1px dashed #ddd;
    padding-top: 10px;
    margin-top: 10px;
}
.bp-bid-card-cat { margin-bottom: 12px; }
.bp-bid-card-cat:last-child { margin-bottom: 0; }
.bp-bid-card-cat h5 {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}
.bp-bid-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.bp-bid-detail-table th,
.bp-bid-detail-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
    text-align: right;
}
.bp-bid-detail-table th:first-child,
.bp-bid-detail-table td:first-child { text-align: left; }
.bp-bid-detail-table th { background: #f8f8f8; font-weight: 600; }