/* THEME-003B-R4-2-BOTTOM-PANELS-ONLY */
/* THEME-003B-R3-FAMILY-FINAL-OWNERSHIP — all family cascade owners use canonical theme tokens */
/* THEME-003B-R1-COMPOSER-CANONICAL-SURFACES */
/* CE-UI-001D-COMMERCIAL-COMPOSER-STYLES */

.commercial-composer-workspace {
    width: 100%;
    min-height: calc(100vh - 76px);
    padding: 28px;
    background: var(--ms-theme-surface);
    overflow: auto;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-composer-workspace[hidden] {
    display: none !important;
}

.commercial-composer-shell {
    display: grid;
    gap: 22px;
    max-width: 1680px;
    margin: 0 auto;
}

.commercial-composer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 1px solid rgba(20, 42, 68, 0.10);
    border-radius: 20px;
    background: var(--ms-theme-surface);
    box-shadow: 0 14px 38px rgba(22, 42, 65, 0.08);

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-composer-header h1 {
    margin: 4px 0 8px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
}

.commercial-composer-header p {
    margin: 0;
    color: var(--muted, #64748b);
}

.commercial-composer-eyebrow {
    color: #a97900 !important;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.commercial-composer-status {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(245, 183, 31, 0.16);
    color: #745300;
    font-size: 13px;
    font-weight: 800;
}

.commercial-composer-status.is-ready {
    background: rgba(26, 156, 104, 0.14);
    color: #117047;
}

.commercial-composer-status.is-error {
    background: rgba(202, 53, 53, 0.12);
    color: #a32121;
}

.commercial-composer-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) auto;
    gap: 16px;
    align-items: end;
    padding: 20px;
    border-radius: 18px;
    background: var(--ms-theme-surface);
    box-shadow: 0 10px 30px rgba(22, 42, 65, 0.06);

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-composer-toolbar label {
    display: grid;
    gap: 7px;
}

.commercial-composer-toolbar label > span {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.commercial-composer-toolbar input,
.commercial-composer-toolbar select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(20, 42, 68, 0.18);
    border-radius: 11px;
    background: var(--surface, #ffffff);
    color: inherit;
    font: inherit;
}

.commercial-composer-toolbar button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #ffd45e, #e3a817);
    color: #142a44;
    font-weight: 900;
    cursor: pointer;
}

.commercial-composer-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 16px;
}

.commercial-composer-summary article {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    border: 1px solid rgba(20, 42, 68, 0.08);
    border-radius: 16px;
    background: var(--ms-theme-surface);

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-composer-summary span {
    color: var(--muted, #64748b);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.commercial-composer-summary strong {
    font-size: 22px;
}

.commercial-composer-content {
    display: grid;
    grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
    gap: 18px;
}

.commercial-composer-families,
.commercial-composer-catalog {
    border: 1px solid rgba(20, 42, 68, 0.08);
    border-radius: 18px;
    background: var(--ms-theme-surface);
    overflow: hidden;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-composer-families header,
.commercial-composer-catalog > header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(20, 42, 68, 0.08);
}

.commercial-composer-families h2,
.commercial-composer-catalog h2 {
    margin: 0;
    font-size: 18px;
}

.commercial-composer-catalog header p {
    margin: 5px 0 0;
    color: var(--muted, #64748b);
}

.commercial-composer-families [data-commercial-composer-family-list] {
    display: grid;
    gap: 5px;
    padding: 12px;
}

.commercial-family-button {
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    text-align: left;
    font-weight: 700;
    cursor: pointer;

    border-color: var(--ms-theme-border);}

.commercial-family-button:hover,
.commercial-family-button.is-active {
    background: rgba(245, 183, 31, 0.16);
    color: #755600;
}

.commercial-composer-loading,
.commercial-composer-error {
    margin: 20px;
    padding: 18px;
    border-radius: 12px;
}

.commercial-composer-loading {
    background: rgba(20, 42, 68, 0.05);
}

.commercial-composer-error {
    background: rgba(202, 53, 53, 0.10);
    color: #a32121;
}

.commercial-composer-table-wrap {
    overflow: auto;
}

.commercial-composer-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.commercial-composer-table-wrap th,
.commercial-composer-table-wrap td {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(20, 42, 68, 0.08);
    text-align: left;
    vertical-align: middle;
}

.commercial-composer-table-wrap th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface, #ffffff);
    color: var(--muted, #64748b);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.commercial-composer-table-wrap tbody tr:hover {
    background: rgba(20, 42, 68, 0.035);
}

.commercial-composer-item-code {
    font-weight: 900;
    white-space: nowrap;
}

.commercial-composer-price {
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .commercial-composer-summary {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .commercial-composer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .commercial-composer-workspace {
        padding: 16px;
    }

    .commercial-composer-header,
    .commercial-composer-toolbar {
        grid-template-columns: 1fr;
        display: grid;
    }

    .commercial-composer-summary {
        grid-template-columns: 1fr;
    }
}

/* CE-UI-001G-R5.1-SURGICAL-LIVE-INTEGRATION */

.commercial-composer-workspace {
    overflow: auto;
    padding: 20px 22px 36px;
}

.commercial-family-panel {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: var(--ms-theme-surface);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.08);

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(174px, 1fr));
    gap: 14px;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(108px, 1fr);
    min-height: 166px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: var(--ms-theme-surface);
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.07);
    cursor: pointer;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-card:hover {
    transform: translateY(-2px);
    border-color: var(--ms-theme-accent);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.12);

    background: var(--ms-theme-surface-soft);
    color: var(--ms-theme-text);}

.commercial-family-card.is-selected {
    border-color: var(--ms-theme-accent);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.12),
        0 14px 30px rgba(15, 23, 42, 0.12);

    background: var(--ms-theme-surface-soft);
    color: var(--ms-theme-text);}

.commercial-family-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: var(--ms-theme-surface);

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-heading input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2563eb;
}

.commercial-family-heading strong {
    overflow: hidden;
    color: var(--ms-theme-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commercial-family-heading em {
    color: var(--ms-theme-muted);
    font-style: normal;
}

.commercial-family-visual {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: 10px;
    background: var(--ms-theme-surface);

    color: var(--ms-theme-text);}

.commercial-family-visual img {
    display: block;
    width: 100%;
    height: 108px;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(
            0 9px 10px rgba(15, 23, 42, 0.16)
        );
}

.commercial-family-visual.is-fallback {
    font-size: 54px;
    line-height: 1;
}

.commercial-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;

    background: var(--ms-theme-surface-soft);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-products-toolbar h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: 0.045em;
}

.commercial-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.commercial-toolbar-actions button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    color: #1e293b;
    cursor: pointer;
}

.commercial-toolbar-actions button:hover {
    border-color: rgba(37, 99, 235, 0.45);
    background: rgba(239, 246, 255, 0.96);
}

@media (max-width: 900px) {
    .commercial-products-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .commercial-toolbar-actions {
        justify-content: flex-start;
    }
}

/* END CE-UI-001G-R5.1-SURGICAL-LIVE-INTEGRATION */

/* CE-EDIT-MODE-001 */
.commercial-composer-workspace
    [data-commercial-action="edit"].is-active {
    border-color: rgba(37, 99, 235, 0.72);
    background: rgba(37, 99, 235, 0.14);
    box-shadow:
        inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.commercial-row-code {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.commercial-row-code > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}

.commercial-composer-table-wrap td > input,
.commercial-row-code > input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(37, 99, 235, 0.34);
    border-radius: 8px;
    background: var(--surface, #ffffff);
    color: inherit;
    font: inherit;
}

.commercial-composer-table-wrap td > input:focus,
.commercial-row-code > input[type="text"]:focus {
    outline: 2px solid rgba(37, 99, 235, 0.22);
    border-color: rgba(37, 99, 235, 0.72);
}

.commercial-composer-table-wrap td > input:disabled {
    border-color: transparent;
    background: transparent;
    color: inherit;
    opacity: 1;
    cursor: default;
    -webkit-text-fill-color: currentColor;
}

.commercial-composer-table-wrap
    tbody tr.is-editable {
    background: rgba(37, 99, 235, 0.065);
    box-shadow:
        inset 3px 0 0 rgba(37, 99, 235, 0.72);
}

.commercial-composer-table-wrap
    tbody tr.is-editable:hover {
    background: rgba(37, 99, 235, 0.09);
}

.commercial-separator-row {
    pointer-events: none;
}

/* CE-EDIT-MODE-001A */

/*
 * QUANTITY e DISCOUNT restano sempre modificabili.
 * Le frecce native degli input number vengono mantenute.
 */
.commercial-composer-table-wrap th:nth-child(4),
.commercial-composer-table-wrap th:nth-child(5),
.commercial-composer-table-wrap td:nth-child(4),
.commercial-composer-table-wrap td:nth-child(5),
.commercial-quantity-cell,
.commercial-discount-cell {
    text-align: center;
}

.commercial-quantity-cell,
.commercial-discount-cell {
    vertical-align: middle;
}

.commercial-composer-table-wrap
    .commercial-quantity-input,
.commercial-composer-table-wrap
    .commercial-discount-input {
    display: block;
    box-sizing: border-box;
    width: min(100%, 112px);
    min-width: 76px;
    margin-inline: auto;
    text-align: center;
}

/*
 * Nessuna regola appearance o webkit spin button:
 * gli spinner laterali restano visibili e funzionanti.
 */

/* CE-LIVE-LAYOUT-FINAL-001 */

/* Nasconde la fascia CERCA / FAMIGLIA / Aggiorna catalogo. */
.commercial-composer-toolbar {
    display: none !important;
}

/* Titolo pagina compatto e coerente con MASTER SUITE. */
.commercial-composer-header {
    display: flex !important;
    align-items: center !important;
    min-height: 72px;
    padding: 18px 24px !important;
    border-radius: 16px !important;
}

.commercial-composer-header h1 {
    margin: 0 !important;
    color: var(--text, #172337);
    font-size: clamp(25px, 2.2vw, 34px) !important;
    font-weight: 900;
    line-height: 1.1;
}

/*
 * Le schede delle macchine restano subito sotto il titolo
 * e utilizzano tutta la larghezza disponibile.
 */
.commercial-family-panel {
    margin-top: 0 !important;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-grid {
    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr)) !important;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 126px;
    object-fit: contain;
    object-position: center;
}

/* Tabella: nessun taglio di CODE o prezzi. */
.commercial-composer-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
}

.commercial-composer-table-wrap table {
    width: 100% !important;
    min-width: 960px;
    table-layout: auto !important;
    border-collapse: collapse;
}

.commercial-composer-table-wrap th,
.commercial-composer-table-wrap td {
    box-sizing: border-box;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* CODE sempre visibile. */
.commercial-composer-table-wrap th:nth-child(1),
.commercial-composer-table-wrap td:nth-child(1) {
    width: 15%;
    min-width: 150px;
    text-align: left;
}

.commercial-row-code {
    display: flex !important;
    width: 100%;
    min-width: 0;
    align-items: center;
}

.commercial-row-code strong {
    display: inline-block !important;
    overflow: visible !important;
    color: var(--text, #172337) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 900;
    white-space: nowrap;
}

/* DESCRIPTION usa lo spazio residuo. */
.commercial-composer-table-wrap th:nth-child(2),
.commercial-composer-table-wrap td:nth-child(2) {
    width: auto;
    min-width: 300px;
    text-align: left;
}

/* LIST PRICE e NET PRICE sempre visibili. */
.commercial-composer-table-wrap th:nth-child(3),
.commercial-composer-table-wrap td:nth-child(3),
.commercial-composer-table-wrap th:nth-child(6),
.commercial-composer-table-wrap td:nth-child(6) {
    width: 14%;
    min-width: 145px;
    text-align: right;
    white-space: nowrap;
}

.commercial-composer-price,
.commercial-net-price,
.commercial-composer-table-wrap td:nth-child(3),
.commercial-composer-table-wrap td:nth-child(6) {
    display: table-cell;
    overflow: visible !important;
    color: var(--text, #172337) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* QUANTITY e DISCOUNT centrati. */
.commercial-composer-table-wrap th:nth-child(4),
.commercial-composer-table-wrap td:nth-child(4),
.commercial-composer-table-wrap th:nth-child(5),
.commercial-composer-table-wrap td:nth-child(5) {
    width: 11%;
    min-width: 120px;
    text-align: center !important;
}

.commercial-quantity-cell,
.commercial-discount-cell {
    text-align: center !important;
}

.commercial-composer-table-wrap
    .commercial-quantity-input,
.commercial-composer-table-wrap
    .commercial-discount-input {
    display: block !important;
    box-sizing: border-box;
    width: 92px !important;
    min-width: 92px !important;
    height: 36px;
    margin: 0 auto !important;
    padding: 4px 7px;
    text-align: center !important;
    text-indent: 0 !important;
    font-variant-numeric: tabular-nums;
}

/* Centra anche il testo interno in Firefox. */
.commercial-quantity-input::-moz-number-text,
.commercial-discount-input::-moz-number-text {
    text-align: center;
}

/*
 * Conserva le frecce laterali native:
 * nessuna regola appearance o spin-button.
 */

/* Colorazione dinamica della cella DISCOUNT. */
.commercial-discount-cell[data-discount-band="ok"],
.commercial-composer-table-wrap
    td[data-discount-band="ok"] {
    background:
        linear-gradient(
            135deg,
            rgba(34, 197, 94, 0.20),
            rgba(132, 204, 22, 0.15)
        ) !important;
}

.commercial-discount-cell[data-discount-band="warning"],
.commercial-composer-table-wrap
    td[data-discount-band="warning"] {
    background:
        linear-gradient(
            135deg,
            rgba(245, 158, 11, 0.26),
            rgba(234, 179, 8, 0.18)
        ) !important;
}

.commercial-discount-cell[data-discount-band="danger"],
.commercial-composer-table-wrap
    td[data-discount-band="danger"] {
    background:
        linear-gradient(
            135deg,
            rgba(239, 68, 68, 0.24),
            rgba(220, 38, 38, 0.17)
        ) !important;
}

/* Parte inferiore proporzionata. */
.commercial-composer-summary.commercial-live-bottom-grid {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 16px !important;
    width: 100%;
    margin-top: 0;
}

.commercial-live-bottom-grid > article {
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    min-height: 180px;
    padding: 18px 20px !important;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: var(--surface, #ffffff);
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.065);
}

/*
 * Qualora i totali siano ancora distribuiti in più article,
 * manteniamo dimensioni uniformi e non deformate.
 */
.commercial-live-summary-card {
    align-content: center;
}

.commercial-live-summary-card strong {
    overflow: visible !important;
    color: var(--text, #172337) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* MASTER %. */
.commercial-master-guide {
    display: grid;
    align-content: start;
    gap: 10px;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-master-guide h3 {
    margin: 0 0 4px;
    color: var(--ms-theme-text);
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    letter-spacing: 0.04em;
}

.commercial-master-band {
    display: grid;
    grid-template-columns:
        minmax(82px, auto)
        minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 7px 12px;
    border-radius: 9px;
    color: #ffffff;
}

.commercial-master-band strong {
    color: inherit !important;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.commercial-master-band span {
    color: inherit !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.025em;
}

.commercial-master-band.is-ok {
    background:
        linear-gradient(
            135deg,
            #65a30d,
            #84cc16
        );
}

.commercial-master-band.is-warning {
    background:
        linear-gradient(
            135deg,
            #eab308,
            #f59e0b
        );
    color: #3d2b00;
}

.commercial-master-band.is-danger {
    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );
}

/* Non deformare la parte inferiore sugli schermi medi. */
@media (max-width: 1180px) {
    .commercial-composer-summary.commercial-live-bottom-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .commercial-master-guide {
        grid-column: 1 / -1;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}
}

@media (max-width: 760px) {
    .commercial-composer-summary.commercial-live-bottom-grid {
        grid-template-columns: 1fr !important;
    }

    .commercial-master-guide {
        grid-column: auto;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}
}

/* CE-LIVE-VISUAL-FIX-003 */

/* Rimuove definitivamente header e toolbar legacy. */
.commercial-composer-header,
.commercial-composer-toolbar {
    display: none !important;
}

/* Header nello stile della pagina Aziende. */
.commercial-visual-header {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    background: transparent;
}

.commercial-visual-eyebrow {
    margin: 0 0 7px;
    color: #f5b900;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.commercial-visual-header h1 {
    margin: 0 0 8px;
    color: #f8fafc;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.08;
}

.commercial-visual-header p {
    margin: 0;
    color: #aebcd0;
    font-size: 15px;
    line-height: 1.45;
}

/* Pannello famiglie blu, senza contenitore bianco. */
.commercial-family-panel {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 34px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(104, 151, 196, 0.28) !important;
    border-radius: 12px !important;
    background: #8298ac !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.18) !important;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

/* Cinque colonne desktop, come nella configurazione approvata. */
.commercial-family-grid {
    display: grid !important;
    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100%;

    background: #8298ac !important;
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

/* Schede integrate nel pannello, senza riquadro bianco. */
.commercial-family-card {
    position: relative;
    display: grid !important;
    grid-template-rows:
        46px
        minmax(150px, 1fr) !important;
    box-sizing: border-box;
    min-width: 0;
    min-height: 218px !important;
    overflow: hidden;
    border: 0 !important;
    border-right:
        1px solid rgba(117, 154, 191, 0.20) !important;
    border-bottom:
        1px solid rgba(117, 154, 191, 0.20) !important;
    border-radius: 0 !important;
    background: #8298ac !important;
    box-shadow: none !important;
    cursor: pointer;
    transform: none !important;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-card:hover {
    z-index: 2;
    background: #8fa5b8 !important;
    box-shadow:
        inset 0 0 0 1px rgba(65, 153, 255, 0.45) !important;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-accent);}

.commercial-family-card.is-selected {
    z-index: 3;
    background: #91a9bd !important;
    box-shadow:
        inset 0 0 0 2px rgba(65, 153, 255, 0.82),
        inset 0 -4px 0 rgba(65, 153, 255, 0.70) !important;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-accent);}

/* Intestazione scheda sul blu. */
.commercial-family-heading {
    display: flex !important;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    min-height: 46px !important;
    padding: 10px 13px !important;
    border-bottom:
        1px solid rgba(117, 154, 191, 0.19) !important;
    background: #667f97 !important;

    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-heading input {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    border-color: rgba(255, 255, 255, 0.60);
    accent-color: #3b82f6;
}

.commercial-family-heading strong {
    overflow: visible !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.025em;
    text-overflow: clip !important;
    white-space: nowrap;
}

/* XXL resta rosso. */
.commercial-family-heading em {
    color: #ff3b30 !important;
    font-style: normal;
}

/* Area immagine interamente trasparente. */
.commercial-family-visual {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0 !important;
    padding: 12px 15px 16px !important;
    overflow: hidden;
    background: #8298ac !important;

    color: var(--ms-theme-text);}

/*
 * L’immagine riempie la scheda.
 * Il PNG resta trasparente e non introduce alcuno sfondo.
 */
.commercial-family-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 230px !important;
    max-height: 155px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    filter:
        drop-shadow(
            0 10px 11px rgba(0, 0, 0, 0.26)
        );
}

/* PRODUCTS e pulsanti. */
.commercial-products-panel,
.commercial-composer-catalog {
    width: 100%;
    min-width: 0;
    background: transparent !important;
}

.commercial-products-toolbar,
.commercial-action-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    background: var(--ms-theme-surface-soft);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-products-toolbar button,
.commercial-action-toolbar button,
[data-commercial-action] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f1f5f9
        );
    color: #162033;
    font-weight: 750;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Parte inferiore proporzionata. */
.commercial-bottom-grid,
.commercial-composer-summary.commercial-live-bottom-grid {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr) !important;
    align-items: stretch;
    gap: 16px !important;
    width: 100%;
    margin-top: 18px;
}

.commercial-bottom-grid > article,
.commercial-composer-summary.commercial-live-bottom-grid > article,
.commercial-totals-card,
.commercial-quick-actions,
.commercial-master-card,
.commercial-master-guide {
    box-sizing: border-box;
    min-width: 0;
    min-height: 190px;
    padding: 18px 20px !important;
    border: 1px solid rgba(104, 151, 196, 0.30) !important;
    border-radius: 13px !important;
    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.18) !important;

    border-color: var(--ms-theme-border);}

/* MASTER % verde, giallo, rosso. */
.commercial-master-band {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #ffffff !important;
    font-weight: 900;
}

.commercial-master-band.is-ok {
    background:
        linear-gradient(
            135deg,
            #15803d,
            #4ade80
        ) !important;
}

.commercial-master-band.is-warning {
    background:
        linear-gradient(
            135deg,
            #eab308,
            #f59e0b
        ) !important;
    color: #352600 !important;
}

.commercial-master-band.is-danger {
    background:
        linear-gradient(
            135deg,
            #b91c1c,
            #ef4444
        ) !important;
}

/* Responsive. */
@media (max-width: 1250px) {
    .commercial-family-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}
}

@media (max-width: 980px) {
    .commercial-family-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

    .commercial-bottom-grid,
    .commercial-composer-summary.commercial-live-bottom-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .commercial-family-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

    .commercial-bottom-grid,
    .commercial-composer-summary.commercial-live-bottom-grid {
        grid-template-columns: 1fr !important;
    }
}
/* CE-UI-005A-EDITABLE-DISCOUNT-THRESHOLDS */
.commercial-master-range {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-width: 100px;
}

.commercial-master-range input {
    box-sizing: border-box;
    width: 62px;
    height: 30px;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.60);
    border-radius: 7px;
    outline: none;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font: inherit;
    font-weight: 900;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.commercial-master-range input:hover {
    background: rgba(255, 255, 255, 0.26);
}

.commercial-master-range input:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.34);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.commercial-master-band.is-warning
    .commercial-master-range input {
    border-color: rgba(53, 38, 0, 0.45);
    background: rgba(255, 255, 255, 0.42);
    color: #352600;
}

.commercial-master-range output,
.commercial-master-range b,
.commercial-master-range i {
    color: inherit;
    font: inherit;
    font-weight: 900;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}
/* CE-UI-005A1-DISCOUNT-INPUT-BACKGROUND-FIX
   Il testo resta sempre nero.
   Cambia esclusivamente lo sfondo dell'input Discount.
*/

.commercial-discount-cell .commercial-discount-input {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 900;
}

.commercial-discount-cell[data-discount-band="ok"]
    .commercial-discount-input {
    background: #bff0ca !important;
    background-color: #bff0ca !important;
    border-color: #55a96b !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.commercial-discount-cell[data-discount-band="warning"]
    .commercial-discount-input {
    background: #ffe39a !important;
    background-color: #ffe39a !important;
    border-color: #d6a629 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.commercial-discount-cell[data-discount-band="danger"]
    .commercial-discount-input {
    background: #ffc1c1 !important;
    background-color: #ffc1c1 !important;
    border-color: #d95a5a !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.commercial-discount-cell[data-discount-band="ok"]
    .commercial-discount-input:focus {
    background: #bff0ca !important;
    background-color: #bff0ca !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.commercial-discount-cell[data-discount-band="warning"]
    .commercial-discount-input:focus {
    background: #ffe39a !important;
    background-color: #ffe39a !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.commercial-discount-cell[data-discount-band="danger"]
    .commercial-discount-input:focus {
    background: #ffc1c1 !important;
    background-color: #ffc1c1 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
/* CE-UI-005A2-CENTER-QUANTITY-DISCOUNT-R1
   Centratura orizzontale e verticale delle colonne
   Quantity e Discount.
*/

.commercial-composer-enterprise
.commercial-quantity-cell,
.commercial-composer-enterprise
.commercial-discount-cell {
    text-align: center;
    vertical-align: middle;
}

.commercial-composer-enterprise
.commercial-quantity-header,
.commercial-composer-enterprise
.commercial-discount-header {
    text-align: center;
    vertical-align: middle;
}

.commercial-composer-enterprise
.commercial-quantity-input,
.commercial-composer-enterprise
.commercial-discount-input {
    display: block;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.commercial-composer-enterprise
td:has(.commercial-quantity-input),
.commercial-composer-enterprise
td:has(.commercial-discount-input) {
    text-align: center;
    vertical-align: middle;
}

.commercial-composer-enterprise
.commercial-quantity-input:focus,
.commercial-composer-enterprise
.commercial-quantity-input:hover,
.commercial-composer-enterprise
.commercial-discount-input:focus,
.commercial-composer-enterprise
.commercial-discount-input:hover {
    text-align: center;
}


/* CE-UI-005A3-INPUT-TEXT-CENTER
   Centra esclusivamente il testo digitato
   negli input Quantity e Discount.
*/

.commercial-quantity-input,
.commercial-discount-input{
    text-align:center !important;
    font-variant-numeric:tabular-nums;
}

.commercial-quantity-input:focus,
.commercial-discount-input:focus{
    text-align:center !important;
}

/* CE-UI-005A4-PRODUCTS-HEADER-ALIGNMENT
   PRODUCTS allineato completamente a sinistra.
   Toolbar azioni mantenuta completamente a destra.
*/

.commercial-products-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
}

.commercial-products-toolbar h1 {
    margin: 0 auto 0 0;
    text-align: left;
}

.commercial-products-toolbar .commercial-toolbar-actions {
    margin-left: auto;
}

/* CE-UI-005A5-PAGE-TITLE-STYLE
   Titolo principale del Compilatore Offerte.
*/

.commercial-page-heading {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
}

.commercial-page-heading h1 {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 28px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--commercial-text, #172033);
}

/* COMMERCIAL-COMPOSER-HEADER-001 START */

#commercial-composer-workspace .commercial-composer-page-path {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(
        --master-suite-accent,
        var(--gold, #f2b400)
    ) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

#commercial-composer-workspace .commercial-composer-page-title {
    margin-top: 0;
    color: var(
        --master-suite-heading,
        #f4f7fb
    ) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}



/* COMMERCIAL-COMPOSER-HEADER-001 END */


/* CE-FAMILY-SELECTION-RULES-001 */
.commercial-family-card.is-disabled {
    opacity: 0.40;
    filter: grayscale(0.35);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);
    border-color: var(--ms-theme-border);}

.commercial-family-card.is-disabled:hover {
    transform: none;
    box-shadow: none;
}

.commercial-family-card.is-disabled
input[type="checkbox"] {
    cursor: not-allowed;
}

.commercial-family-card.is-disabled
.commercial-family-visual {
    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);}

/* CE-PRODUCTS-FLUID-RESPONSIVE-001 */

/*
 * Il modulo prodotti segue sempre la larghezza disponibile
 * del workspace senza imporre dimensioni rigide alla pagina.
 */
.commercial-table-wrap,
.commercial-composer-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    box-sizing: border-box;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

/*
 * La tabella usa tutta la larghezza del contenitore.
 * table-layout fixed permette alle colonne di adattarsi
 * realmente quando cambia la dimensione della finestra.
 */
.commercial-table-wrap table,
.commercial-composer-table-wrap table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

/*
 * Tutte le celle possono restringersi senza forzare
 * l'allargamento dell'intero workspace.
 */
.commercial-table-wrap th,
.commercial-table-wrap td,
.commercial-composer-table-wrap th,
.commercial-composer-table-wrap td {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* CODE */
.commercial-table-wrap th:nth-child(1),
.commercial-table-wrap td:nth-child(1),
.commercial-composer-table-wrap th:nth-child(1),
.commercial-composer-table-wrap td:nth-child(1) {
    width: clamp(100px, 12vw, 170px);
}

/*
 * DESCRIPTION assorbe tutto lo spazio residuo.
 * Il vecchio min-width rigido viene neutralizzato.
 */
.commercial-table-wrap th:nth-child(2),
.commercial-table-wrap td:nth-child(2),
.commercial-composer-table-wrap th:nth-child(2),
.commercial-composer-table-wrap td:nth-child(2) {
    width: auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* LIST PRICE */
.commercial-table-wrap th:nth-child(3),
.commercial-table-wrap td:nth-child(3),
.commercial-composer-table-wrap th:nth-child(3),
.commercial-composer-table-wrap td:nth-child(3) {
    width: clamp(120px, 13vw, 175px);
    min-width: 0;
}

/* QUANTITY */
.commercial-table-wrap th:nth-child(4),
.commercial-table-wrap td:nth-child(4),
.commercial-composer-table-wrap th:nth-child(4),
.commercial-composer-table-wrap td:nth-child(4) {
    width: clamp(86px, 9vw, 125px);
    min-width: 0;
}

/* DISCOUNT */
.commercial-table-wrap th:nth-child(5),
.commercial-table-wrap td:nth-child(5),
.commercial-composer-table-wrap th:nth-child(5),
.commercial-composer-table-wrap td:nth-child(5) {
    width: clamp(100px, 10vw, 140px);
    min-width: 0;
}

/* NET PRICE */
.commercial-table-wrap th:nth-child(6),
.commercial-table-wrap td:nth-child(6),
.commercial-composer-table-wrap th:nth-child(6),
.commercial-composer-table-wrap td:nth-child(6) {
    width: clamp(120px, 13vw, 175px);
    min-width: 0;
}

/*
 * Gli input seguono la larghezza della propria cella
 * senza fuoriuscire dal modulo.
 */
.commercial-table-wrap input,
.commercial-table-wrap select,
.commercial-composer-table-wrap input,
.commercial-composer-table-wrap select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Schermate intermedie: riduciamo spaziatura e testo,
 * continuando a mostrare tutte le colonne.
 */
@media (max-width: 1280px) {
    .commercial-table-wrap th,
    .commercial-table-wrap td,
    .commercial-composer-table-wrap th,
    .commercial-composer-table-wrap td {
        padding-left: 8px;
        padding-right: 8px;
    }

    .commercial-table-wrap th,
    .commercial-composer-table-wrap th {
        font-size: clamp(10px, 0.85vw, 12px);
    }

    .commercial-table-wrap td,
    .commercial-composer-table-wrap td {
        font-size: clamp(11px, 0.95vw, 13px);
    }
}

/*
 * Schermate strette: la tabella conserva una larghezza
 * minima funzionale e scorre solo dentro il proprio modulo.
 * La pagina e la shell non vengono allargate.
 */
@media (max-width: 900px) {
    .commercial-table-wrap table,
    .commercial-composer-table-wrap table {
        min-width: 760px;
    }

    .commercial-table-wrap,
    .commercial-composer-table-wrap {
        overscroll-behavior-inline: contain;
    }
}

/* CE-PRODUCTS-GRID-ITEMS-STYLE-001 */

/*
 * Variabili locali del modulo prodotti.
 * Non modificano il tema globale della Suite.
 */
.commercial-table-wrap,
.commercial-composer-table-wrap {
    --ce-products-grid-line: rgba(30, 41, 59, 0.16);
    --ce-products-grid-line-strong: var(--ms-theme-border);
    --ce-products-header-bg: var(--ms-theme-surface-soft);
    --ce-products-item-bg: var(--ms-theme-surface);
    --ce-products-item-text: var(--ms-theme-text);
}

/*
 * Cornice esterna della griglia.
 */
.commercial-table-wrap table,
.commercial-composer-table-wrap table {
    border: 1px solid var(--ce-products-grid-line-strong);
    border-collapse: collapse;
    border-spacing: 0;
}

/*
 * Ogni cella viene chiaramente delimitata.
 */
.commercial-table-wrap th,
.commercial-table-wrap td,
.commercial-composer-table-wrap th,
.commercial-composer-table-wrap td {
    border: 1px solid var(--ce-products-grid-line);
}

/*
 * Intestazione leggermente distinta dal corpo.
 */
.commercial-table-wrap thead th,
.commercial-composer-table-wrap thead th {
    background: var(--ce-products-header-bg);
    border-color: var(--ce-products-grid-line-strong);
}

/*
 * LIST PRICE e NET PRICE:
 * intestazioni e contenuti centrati.
 */
.commercial-table-wrap th:nth-child(3),
.commercial-table-wrap td:nth-child(3),
.commercial-table-wrap th:nth-child(6),
.commercial-table-wrap td:nth-child(6),
.commercial-composer-table-wrap th:nth-child(3),
.commercial-composer-table-wrap td:nth-child(3),
.commercial-composer-table-wrap th:nth-child(6),
.commercial-composer-table-wrap td:nth-child(6) {
    text-align: center;
    vertical-align: middle;
}

/*
 * Il campo modificabile di LIST PRICE resta centrato
 * anche quando la modalità di modifica è attiva.
 */
.commercial-table-wrap td:nth-child(3) input,
.commercial-composer-table-wrap td:nth-child(3) input,
.commercial-composer-price input {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/*
 * NET PRICE centrato anche attraverso la classe dedicata.
 */
.commercial-net-price,
.commercial-composer-price {
    text-align: center;
}

/*
 * Righe ITEM:
 * fondo circa due tonalità più scuro rispetto
 * alle normali righe prodotto.
 */
.commercial-table-wrap
tbody
tr.commercial-separator-row
td,
.commercial-composer-table-wrap
tbody
tr.commercial-separator-row
td {
    background: var(--ce-products-item-bg);
    color: var(--ce-products-item-text);
    border-color: var(--ce-products-grid-line-strong);
    font-weight: 800;
    letter-spacing: 0.015em;
}

/*
 * Nessun cambio di tonalità al passaggio del mouse:
 * la riga ITEM mantiene sempre la sua funzione visiva.
 */
.commercial-table-wrap
tbody
tr.commercial-separator-row:hover
td,
.commercial-composer-table-wrap
tbody
tr.commercial-separator-row:hover
td {
    background: var(--ce-products-item-bg);
}

/*
 * Mantiene visibile la griglia anche sugli input,
 * senza creare un doppio bordo pesante.
 */
.commercial-table-wrap td input,
.commercial-composer-table-wrap td input {
    border-color: var(--ce-products-grid-line-strong);
}

/*
 * Supporto tema scuro della Suite.
 */
[data-theme="dark"]
.commercial-table-wrap,
[data-theme="dark"]
.commercial-composer-table-wrap,
.theme-dark
.commercial-table-wrap,
.theme-dark
.commercial-composer-table-wrap {
    --ce-products-grid-line: rgba(203, 213, 225, 0.18);
    --ce-products-grid-line-strong: var(--ms-theme-border);
    --ce-products-header-bg: var(--ms-theme-surface-soft);
    --ce-products-item-bg: var(--ms-theme-surface);
    --ce-products-item-text: var(--ms-theme-text);
}


/* CP-005J4R1-BOTTOM-TOTALS-FONT-SIZE */
.commercial-totals-card > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 14px;
}

.commercial-totals-card > div + div {
    margin-top: 12px;
}

.commercial-totals-card span {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.01em;

    color: var(--ms-theme-text);}

.commercial-totals-card strong {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 850;
    white-space: nowrap;

    color: var(--ms-theme-text);}

.commercial-totals-card [data-average-discount] {
    font-size: 18px;
}

/* CP-005J5-FAMILY-IMAGES-EXTRA-RESPONSIVE-REDUCTION */
@media (max-width: 1100px) {
    .commercial-family-visual {
        display: flex;
        align-items: center;
        justify-content: center;

    background: var(--ms-theme-surface);
    color: var(--ms-theme-text);}

    .commercial-family-visual img {
        width: 50%;
        max-width: 50%;
        height: auto;
        max-height: 50%;
        object-fit: contain;
        transition:
            width 180ms ease,
            max-width 180ms ease,
            max-height 180ms ease;
    }
}

@media (max-width: 760px) {
    .commercial-family-visual img {
        width: 45%;
        max-width: 45%;
        max-height: 45%;
    }
}

/* CP-005K2-TOOLBAR-DISCOUNT-RESET */
.commercial-discount-overlay {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 8, 23, 0.72);
    backdrop-filter: blur(6px);
}

.commercial-discount-overlay[hidden] {
    display: none;
}

.commercial-discount-dialog {
    width: min(390px, 100%);
    padding: 22px;
    border: 1px solid rgba(79, 209, 197, 0.45);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.98),
            rgba(8, 15, 31, 0.98)
        );
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.48),
        0 0 30px rgba(45, 212, 191, 0.08);
}

.commercial-discount-dialog h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 18px;
}

.commercial-discount-dialog p {
    margin: 8px 0 18px;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.45;
}

.commercial-discount-dialog-field {
    display: grid;
    gap: 8px;
}

.commercial-discount-dialog-field span {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.commercial-discount-dialog-field input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(45, 212, 191, 0.42);
    border-radius: 10px;
    outline: none;
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

.commercial-discount-dialog-field input:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14);
}

.commercial-discount-dialog-error {
    display: block;
    margin-top: 8px;
    color: #fca5a5;
    font-size: 12px;
}

.commercial-discount-dialog-error[hidden] {
    display: none;
}

.commercial-discount-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.commercial-discount-dialog-actions button {
    min-width: 94px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}

.commercial-discount-dialog-cancel {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 41, 59, 0.72);
    color: #cbd5e1;
}

.commercial-discount-dialog-save {
    border: 1px solid rgba(45, 212, 191, 0.55);
    background: linear-gradient(135deg, #0f766e, #0d9488);
    color: #ffffff;
}

/* CP-006B2R2-PACKAGING-QUANTITY-FILTER */
.commercial-discount-cell[data-discount-locked="true"] {
    position: relative;
    isolation: isolate;
    cursor: not-allowed;
    background:
        linear-gradient(
            135deg,
            rgba(148, 163, 184, 0.22),
            rgba(100, 116, 139, 0.14)
        ) !important;
}

.commercial-discount-cell[data-discount-locked="true"]
.commercial-discount-input {
    opacity: 0.38 !important;
    filter: grayscale(1);
    pointer-events: none;
    cursor: not-allowed !important;
    border-color: rgba(100, 116, 139, 0.38) !important;
    background: rgba(148, 163, 184, 0.24) !important;
    color: rgba(15, 23, 42, 0.58) !important;
    -webkit-text-fill-color: rgba(15, 23, 42, 0.58) !important;
}

.commercial-discount-cell[data-discount-locked="true"]::after {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 2;
    border-radius: 8px;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(148, 163, 184, 0.08) 0,
            rgba(148, 163, 184, 0.08) 6px,
            rgba(100, 116, 139, 0.15) 6px,
            rgba(100, 116, 139, 0.15) 12px
        );
    pointer-events: auto;
    cursor: not-allowed;
}

[data-commercial-action="filter"].is-active {
    border-color: rgba(34, 197, 94, 0.72) !important;
    background:
        linear-gradient(
            135deg,
            rgba(34, 197, 94, 0.24),
            rgba(16, 185, 129, 0.17)
        ) !important;
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.12),
        0 8px 22px rgba(16, 185, 129, 0.16);
}

.commercial-quantity-input {
    cursor: pointer;
}

/* OFFER-COMPILER-R6-PRODUCT-COLUMNS
 * Le colonne operative restano associate al DOM canonico; DESCRIPTION
 * assorbe lo spazio residuo mentre prezzi e controlli seguono il contenuto.
 */
.commercial-table-wrap table,
.commercial-composer-table-wrap table {
    width: 100%;
    box-sizing: border-box;
    table-layout: auto;
}

.commercial-table-wrap th:nth-child(1),
.commercial-table-wrap td:nth-child(1),
.commercial-composer-table-wrap th:nth-child(1),
.commercial-composer-table-wrap td:nth-child(1) {
    width: 1%;
    padding-inline: 10px;
    text-align: left;
    white-space: nowrap;
}

.commercial-table-wrap th:nth-child(2),
.commercial-table-wrap td:nth-child(2),
.commercial-composer-table-wrap th:nth-child(2),
.commercial-composer-table-wrap td:nth-child(2) {
    width: auto;
    min-width: 0;
    max-width: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
}

.commercial-table-wrap th:nth-child(3),
.commercial-table-wrap td:nth-child(3),
.commercial-table-wrap th:nth-child(6),
.commercial-table-wrap td:nth-child(6),
.commercial-composer-table-wrap th:nth-child(3),
.commercial-composer-table-wrap td:nth-child(3),
.commercial-composer-table-wrap th:nth-child(6),
.commercial-composer-table-wrap td:nth-child(6) {
    width: 1%;
    padding-inline: 10px;
    text-align: right;
    white-space: nowrap;
}

.commercial-table-wrap th:nth-child(4),
.commercial-table-wrap td:nth-child(4),
.commercial-table-wrap th:nth-child(5),
.commercial-table-wrap td:nth-child(5),
.commercial-composer-table-wrap th:nth-child(4),
.commercial-composer-table-wrap td:nth-child(4),
.commercial-composer-table-wrap th:nth-child(5),
.commercial-composer-table-wrap td:nth-child(5) {
    width: 1%;
    padding-inline: 5px;
    text-align: center;
}

.commercial-table-wrap th:nth-child(4),
.commercial-table-wrap th:nth-child(5),
.commercial-composer-table-wrap th:nth-child(4),
.commercial-composer-table-wrap th:nth-child(5) {
    line-height: 1.1;
    white-space: normal;
}

.commercial-table-wrap td:nth-child(4),
.commercial-table-wrap td:nth-child(5),
.commercial-composer-table-wrap td:nth-child(4),
.commercial-composer-table-wrap td:nth-child(5) {
    white-space: nowrap;
}

.commercial-table-wrap .commercial-quantity-input,
.commercial-table-wrap .commercial-discount-input,
.commercial-composer-table-wrap .commercial-quantity-input,
.commercial-composer-table-wrap .commercial-discount-input {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    margin-inline: auto;
}

@media (min-width: 901px) {
    .commercial-table-wrap,
    .commercial-composer-table-wrap {
        overflow-x: hidden;
        scrollbar-gutter: auto;
    }
}

/* OMNIA-FAMILY-CHECKBOX-WHITE-001
 * Checkbox is the only intentionally white family control surface.
 */
.commercial-family-heading input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    box-sizing: border-box;
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    border: 1px solid rgba(71, 85, 105, 0.58) !important;
    border-radius: 3px;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

.commercial-family-heading input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #24364a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* OMNIA_PRODUCTS_REAL_OWNER_R2_START
 *
 * Configuratore ordini — canonical visual contract.
 *
 * Main surface : #8298AC
 * Header       : #667F97
 * Zebra odd    : #8298AC
 * Zebra even   : #748CA2
 *
 * IMPORTANT:
 * quantity / discount inputs and semantic discount bands retain
 * their functional colors.
 */

/* ================================================================
   PRODUCTS TITLE + TOOLBAR
   ================================================================ */

.commercial-products-toolbar {
    background: #667f97 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.24) !important;
}

.commercial-products-toolbar h1,
.commercial-products-toolbar h2,
.commercial-products-toolbar h3 {
    color: #ffffff !important;
}

/* Buttons remain controls, not flat background. */
.commercial-products-toolbar button {
    background: rgba(255,255,255,.92) !important;
    color: #24364a !important;
}

/* ================================================================
   REAL PRODUCT TABLE OWNERS
   ================================================================ */

.commercial-table-wrap,
.commercial-composer-table-wrap {
    background: #8298ac !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.22) !important;
}

.commercial-table-wrap table,
.commercial-composer-table-wrap table {
    background: #8298ac !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.22) !important;
}

/* Table header. */
.commercial-table-wrap thead,
.commercial-table-wrap thead tr,
.commercial-table-wrap thead th,
.commercial-composer-table-wrap thead,
.commercial-composer-table-wrap thead tr,
.commercial-composer-table-wrap thead th {
    background: #667f97 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.28) !important;
}

/* ================================================================
   REAL ZEBRA
   ================================================================ */

.commercial-table-wrap tbody tr:nth-child(odd) > td,
.commercial-composer-table-wrap tbody tr:nth-child(odd) > td {
    background: #8298ac !important;
    color: #ffffff !important;
}

.commercial-table-wrap tbody tr:nth-child(even) > td,
.commercial-composer-table-wrap tbody tr:nth-child(even) > td {
    background: #748ca2 !important;
    color: #ffffff !important;
}

.commercial-table-wrap tbody td,
.commercial-composer-table-wrap tbody td {
    border-color: rgba(255,255,255,.22) !important;
}

/* Text inside normal product cells. */
.commercial-table-wrap tbody td span,
.commercial-table-wrap tbody td strong,
.commercial-table-wrap tbody td label,
.commercial-composer-table-wrap tbody td span,
.commercial-composer-table-wrap tbody td strong,
.commercial-composer-table-wrap tbody td label {
    color: inherit;
}

/*
 * Group headers such as V CUT INFINITY 3 / 6 / 8.
 * colspan is the real structural fallback and does not depend on
 * invented class names.
 */
.commercial-table-wrap tbody tr > td[colspan],
.commercial-composer-table-wrap tbody tr > td[colspan] {
    background: #667f97 !important;
    color: #ffffff !important;
    font-weight: 850 !important;
}

/* Hover without returning to white. */
.commercial-table-wrap tbody tr:not(:has(td[colspan])):hover > td,
.commercial-composer-table-wrap tbody tr:not(:has(td[colspan])):hover > td {
    filter: brightness(1.07);
}

/* ================================================================
   EDITABLE CONTROLS — PRESERVE FUNCTIONAL SURFACES
   ================================================================ */

.commercial-quantity-input {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/*
 * Discount background is intentionally NOT overwritten here.
 * Existing OK / WARNING / DANGER rules remain authoritative:
 * green / yellow / red.
 */
.commercial-discount-input {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ================================================================
   BOTTOM SUMMARY — REAL OWNERS
   ================================================================ */

.commercial-composer-summary.commercial-live-bottom-grid {
    background: #8298ac !important;
    color: #ffffff !important;
}

.commercial-composer-summary.commercial-live-bottom-grid > article,
.commercial-totals-card,
.commercial-master-card,
.commercial-master-guide {
    background: #8298ac !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.25) !important;
}

.commercial-totals-card span,
.commercial-totals-card strong,
.commercial-master-card h1,
.commercial-master-card h2,
.commercial-master-card h3,
.commercial-master-guide h1,
.commercial-master-guide h2,
.commercial-master-guide h3 {
    color: #ffffff !important;
}

/*
 * MASTER % green / yellow / red bands are deliberately untouched.
 * Their semantic status colors remain canonical.
 */

/* OMNIA_PRODUCTS_REAL_OWNER_R2_END */

/* OMNIA_RESIDUAL_WHITE_SURFACES_START
 *
 * Final removal of structural white gaps in the Configuratore ordini.
 * Controls, quantity/discount inputs and MASTER semantic bands are excluded.
 */

/* ================================================================
   COMPLETE COMMERCIAL WORKSPACE
   ================================================================ */

.commercial-composer-enterprise {
    background: #8298ac !important;
}

/*
 * PRODUCTS content area:
 * removes the white structural surface around status + table.
 */
.commercial-products,
.commercial-products-content,
.commercial-products-body,
.commercial-products-grid,
.commercial-products-status,
.commercial-products-message,
.commercial-products-empty,
.commercial-products-hint {
    background: #8298ac !important;
    color: #ffffff !important;
}

/*
 * Known real table owners.
 * Height below the table header must remain blue-grey even when
 * the tbody contains no product rows.
 */
.commercial-table-wrap,
.commercial-composer-table-wrap,
.commercial-table-wrap table,
.commercial-composer-table-wrap table,
.commercial-table-wrap tbody,
.commercial-composer-table-wrap tbody {
    background: #8298ac !important;
    color: #ffffff !important;
}

/*
 * Direct structural siblings between PRODUCTS toolbar and bottom grid.
 * This catches the actual status/table containers without changing
 * buttons or form inputs.
 */
.commercial-products-toolbar ~ section,
.commercial-products-toolbar ~ article,
.commercial-products-toolbar ~ div:not(.commercial-composer-summary) {
    background-color: #8298ac !important;
}

/* ================================================================
   EMPTY / STATUS INFORMATION
   ================================================================ */

[data-commercial-products-status],
[data-commercial-products-empty],
[data-commercial-products-message],
[data-commercial-products-grid],
[data-commercial-products-table] {
    background-color: #8298ac !important;
    color: #ffffff !important;
}

/* ================================================================
   BOTTOM THREE-COLUMN AREA
   ================================================================ */

.commercial-composer-summary.commercial-live-bottom-grid {
    background: #8298ac !important;
}

/*
 * ALL direct cards in the real bottom grid receive the same surface.
 * This includes the middle actions card that remained white.
 */
.commercial-composer-summary.commercial-live-bottom-grid > article {
    background: #8298ac !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.25) !important;
}

/*
 * Some versions render the middle action area as a div rather
 * than an article. Cover only direct bottom-grid children.
 */
.commercial-composer-summary.commercial-live-bottom-grid > div {
    background: #8298ac !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.25) !important;
}

/* Preserve action buttons as light functional controls. */
.commercial-composer-summary.commercial-live-bottom-grid button {
    background: rgba(255,255,255,.92) !important;
    color: #24364a !important;
}

/* ================================================================
   EXPLICIT EXCLUSIONS — FUNCTIONAL CONTROLS
   ================================================================ */

.commercial-quantity-input {
    background: #ffffff !important;
    color: #000000 !important;
}

/*
 * Do not assign background here:
 * existing discount OK/WARNING/DANGER colors stay authoritative.
 */
.commercial-discount-input {
    color: #000000 !important;
}

/*
 * MASTER semantic bands deliberately stay green/yellow/red.
 */
.commercial-master-band.is-ok,
.commercial-master-band.is-warning,
.commercial-master-band.is-danger {
    /* semantic background remains owned by canonical rules */
}

/* OMNIA_RESIDUAL_WHITE_SURFACES_END */


/* OMNIA_BOTTOM_MIDDLE_REAL_DOM_START
 * Resolved directly from compiler-runtime.html.
 * Parent: .commercial-bottom-grid
 * Child index: 2
 * Node: article.commercial-quick-actions
 */

.commercial-bottom-grid > :nth-child(2) {
    background: #8298ac !important;
    background-color: #8298ac !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.25) !important;
}

/*
 * Internal layout wrappers must not repaint the card white.
 */
.commercial-bottom-grid > :nth-child(2) > div,
.commercial-bottom-grid > :nth-child(2) > section,
.commercial-bottom-grid > :nth-child(2) > article,
.commercial-bottom-grid > :nth-child(2) .commercial-toolbar-actions {
    background: transparent !important;
    background-color: transparent !important;
}

/* Keep only the actual buttons light. */
.commercial-bottom-grid > :nth-child(2) button {
    background: rgba(255,255,255,.92) !important;
    background-color: rgba(255,255,255,.92) !important;
    color: #24364a !important;
}

/* OMNIA_BOTTOM_MIDDLE_REAL_DOM_END */

/* OMNIA_QTY_DISCOUNT_WIDTH_R1_START
 *
 * Quantity:
 *   accommodates values such as 10.000 plus native spinner controls.
 *
 * Discount:
 *   accommodates values such as 100,00 plus native spinner controls.
 */

.commercial-table-wrap .commercial-quantity-input,
.commercial-composer-table-wrap .commercial-quantity-input {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    padding-left: 8px;
    padding-right: 4px;
    box-sizing: border-box;
}

.commercial-table-wrap .commercial-discount-input,
.commercial-composer-table-wrap .commercial-discount-input {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding-left: 8px;
    padding-right: 4px;
    box-sizing: border-box;
}

/* OMNIA_QTY_DISCOUNT_WIDTH_R1_END */

/* OMNIA_MASTER_INPUT_WIDTH_R2_START
 *
 * Final canonical width contract for MASTER % editors.
 * Enough room for 99,99 / 99.99 plus native number spinner.
 */
.commercial-master-range input,
.commercial-master-range input[type="number"],
[data-commercial-master-threshold],
[data-commercial-master-danger-mirror] {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 24px !important;
    text-align: right !important;
}
/* OMNIA_MASTER_INPUT_WIDTH_R2_END */

/* OMNIA_MASTER_INTERACTIVE_R3_CSS_START */

.commercial-master-band,
.commercial-master-range {
    pointer-events: auto !important;
}

.commercial-master-range input[type="number"],
[data-commercial-master-threshold],
[data-commercial-master-danger-mirror] {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 50 !important;

    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;

    opacity: 1 !important;
    visibility: visible !important;

    user-select: text !important;
    -webkit-user-select: text !important;

    cursor: text !important;

    -webkit-appearance: auto !important;
    appearance: auto !important;

    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 22px !important;

    text-align: right !important;
}

/* Make focus unmistakably real without changing band colours. */
.commercial-master-range input[type="number"]:focus,
[data-commercial-master-threshold]:focus,
[data-commercial-master-danger-mirror]:focus {
    outline: 2px solid rgba(255,255,255,.95) !important;
    outline-offset: 2px !important;
}

/* OMNIA_MASTER_INTERACTIVE_R3_CSS_END */


/* OMNIA_ACCESSORIES_INCLUDED_ROLE_LOCK_R3_CSS_START */

.commercial-quantity-input[
    data-accessories-included-locked="true"
] {
    background: #cbd5e1 !important;
    background-color: #cbd5e1 !important;
    border-color: #94a3b8 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    box-shadow:
        inset 0 1px 3px rgba(15, 23, 42, 0.16) !important;
    opacity: 0.88 !important;
    cursor: not-allowed !important;
}

.commercial-quantity-input[
    data-accessories-included-locked="true"
]:disabled {
    background: #cbd5e1 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 0.88 !important;
}

/* OMNIA_ACCESSORIES_INCLUDED_ROLE_LOCK_R3_CSS_END */

/* OMNIA_POSITIVE_QUANTITY_FILTER_R1_CSS_START
 *
 * Presentation-only row visibility for the PRODUCTS filter.
 * Does not alter product/catalog data or the application's own
 * hidden/search state.
 */

.commercial-products-panel
.omnia-positive-quantity-hidden {
    display: none !important;
}

/* OMNIA_POSITIVE_QUANTITY_FILTER_R1_CSS_END */

/* OMNIA_MULTILINE_R1_START */

.commercial-multiline-panel {
    display: grid;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid rgba(128,128,128,.24);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}

.commercial-multiline-head,
.commercial-multiline-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.commercial-multiline-head > div:first-child {
    display: grid;
    gap: 3px;
}

.commercial-multiline-head strong {
    font-size: 14px;
    font-weight: 800;
}

.commercial-multiline-head span {
    font-size: 12px;
    opacity: .72;
}

.commercial-multiline-actions,
.commercial-line-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.commercial-multiline-actions button,
.commercial-line-tab,
.commercial-line-add {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(128,128,128,.28);
    background: rgba(255,255,255,.06);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.commercial-line-tab {
    min-width: 110px;
}

.commercial-line-tab.is-active {
    border-color: rgba(77,163,255,.72);
    background:
        linear-gradient(
            135deg,
            rgba(77,163,255,.24),
            rgba(95,91,255,.16)
        );
    box-shadow:
        0 0 0 1px rgba(77,163,255,.14);
}

.commercial-line-add {
    border-style: dashed;
}

.commercial-line-add:disabled,
.commercial-multiline-actions button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.commercial-line-summary {
    display: grid;
    gap: 5px;
    min-width: min(100%, 310px);
}

.commercial-line-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
}

.commercial-line-summary-row strong {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.commercial-line-summary-row.is-grand-total {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid rgba(128,128,128,.24);
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .commercial-multiline-panel {
        padding: 11px;
    }

    .commercial-line-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 2px;
    }

    .commercial-line-tab {
        flex: 0 0 auto;
    }

    .commercial-line-summary {
        width: 100%;
    }
}

/* OMNIA_MULTILINE_R1_END */

/* OMNIA_BOTTOM_GRID_TOOLBAR_2X6_R4_START */

/*
 * OMNIA Offer Compiler — bottom area R4
 *
 * DESKTOP
 *   [ TOTALS wider ] [ QUICK ACTIONS compact ] [ MASTER % ]
 *
 * Quick Actions:
 *   2 columns × maximum natural capacity of 6 rows / 12 controls.
 *
 * No economic calculations or R21 state are changed.
 */

@media (min-width: 1181px) {

    .commercial-bottom-grid,
    .commercial-composer-summary.commercial-live-bottom-grid {
        grid-template-columns:
            minmax(470px, 1.65fr)
            minmax(230px, 0.72fr)
            minmax(350px, 1.08fr) !important;

        gap: 16px !important;
        align-items: stretch !important;
    }

    /* ------------------------------------------------------------
       LEFT — TOTALS
       ------------------------------------------------------------ */

    .commercial-bottom-grid > :first-child,
    .commercial-bottom-grid > .commercial-totals-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    .commercial-line-summary-row {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            max-content !important;

        align-items: center !important;
        column-gap: 24px !important;
        width: 100% !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    .commercial-line-summary-row > span {
        min-width: 0 !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    .commercial-line-summary-row > strong {
        min-width: max-content !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    /*
     * TOTAL PRICE LIST
     * TOTAL NET PRICE
     * AVERAGE DISCOUNT
     * TOTAL OFFER LINES
     */
    .commercial-bottom-grid
    .commercial-totals-card
    > div:not([data-commercial-bottom-line-summary]) {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            max-content !important;

        align-items: center !important;
        column-gap: 24px !important;
        width: 100% !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    > div:not([data-commercial-bottom-line-summary])
    > strong {
        min-width: max-content !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    /* ------------------------------------------------------------
       CENTER — QUICK ACTIONS
       ------------------------------------------------------------ */

    .commercial-bottom-grid > :nth-child(2) {
        min-width: 0 !important;
        width: 100% !important;
        padding: 16px !important;
    }

    .commercial-bottom-grid
    > :nth-child(2)
    .commercial-toolbar-actions {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-auto-flow: row !important;
        grid-auto-rows: minmax(42px, auto) !important;

        gap: 10px !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        align-content: start !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .commercial-bottom-grid
    > :nth-child(2)
    .commercial-toolbar-actions
    > button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 42px !important;

        margin: 0 !important;
        padding: 8px 10px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;
        white-space: nowrap !important;
    }

    .commercial-bottom-grid
    > :nth-child(2)
    .commercial-toolbar-actions
    > button span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* ------------------------------------------------------------
       RIGHT — MASTER %
       ------------------------------------------------------------ */

    .commercial-bottom-grid > :nth-child(3) {
        min-width: 0 !important;
        width: 100% !important;
    }
}


/* TABLET */

@media (min-width: 769px) and (max-width: 1180px) {

    .commercial-bottom-grid,
    .commercial-composer-summary.commercial-live-bottom-grid {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(210px, .78fr)
            minmax(290px, 1fr) !important;

        gap: 12px !important;
    }

    .commercial-bottom-grid
    > :nth-child(2)
    .commercial-toolbar-actions {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-auto-flow: row !important;
        gap: 8px !important;

        width: 100% !important;
    }

    .commercial-bottom-grid
    > :nth-child(2)
    .commercial-toolbar-actions
    > button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    .commercial-line-summary-row {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            max-content !important;

        column-gap: 16px !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    .commercial-line-summary-row > strong {
        white-space: nowrap !important;
        text-align: right !important;
    }
}


/* MOBILE */

@media (max-width: 768px) {

    .commercial-bottom-grid,
    .commercial-composer-summary.commercial-live-bottom-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .commercial-bottom-grid
    > :nth-child(2)
    .commercial-toolbar-actions {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-auto-flow: row !important;
        gap: 8px !important;

        width: 100% !important;
    }

    .commercial-bottom-grid
    > :nth-child(2)
    .commercial-toolbar-actions
    > button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    .commercial-line-summary-row {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            max-content !important;

        column-gap: 12px !important;
    }

    .commercial-bottom-grid
    .commercial-totals-card
    .commercial-line-summary-row > strong {
        white-space: nowrap !important;
        text-align: right !important;
    }
}

/* OMNIA_BOTTOM_GRID_TOOLBAR_2X6_R4_END */

/* OMNIA_BOTTOM_TOTAL_LINES_VERTICAL_R4A_START */

/*
 * The dynamic commercial bottom-line summary must be a vertical stack.
 *
 * Required visual order:
 *
 *   Linea 1        amount
 *   Linea 2        amount
 *   Linea 3        amount
 *   Totale offerta amount
 *
 * Each individual row retains its internal two-column structure:
 * label on the left, economic value on the right.
 *
 * No pricing, R21 state or toolbar behavior is modified.
 */

.commercial-bottom-grid
.commercial-totals-card
[data-commercial-bottom-line-summary] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

.commercial-bottom-grid
.commercial-totals-card
[data-commercial-bottom-line-summary]
> .commercial-line-summary-row {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        max-content !important;

    align-items: center !important;
    column-gap: 24px !important;
}

.commercial-bottom-grid
.commercial-totals-card
[data-commercial-bottom-line-summary]
> .commercial-line-summary-row
> strong {
    white-space: nowrap !important;
    text-align: right !important;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1180px) {
    .commercial-bottom-grid
    .commercial-totals-card
    [data-commercial-bottom-line-summary]
    > .commercial-line-summary-row {
        column-gap: 16px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .commercial-bottom-grid
    .commercial-totals-card
    [data-commercial-bottom-line-summary]
    > .commercial-line-summary-row {
        column-gap: 12px !important;
    }
}

/* OMNIA_BOTTOM_TOTAL_LINES_VERTICAL_R4A_END */

/* OMNIA_MULTILINE_ECONOMICS_HOST_STYLE_R2A1_START */

/*
 * R2A.1
 * Il modulo Economia della linea non possiede un tema autonomo.
 * Colori, font e contrasto derivano dal modulo Commercial Composer ospitante.
 * Le superfici secondarie usano currentColor/color-mix così da adattarsi
 * automaticamente a light/dark mode senza introdurre una seconda palette.
 */

.commercial-line-economics-r2a {
    margin: 16px 0;
    padding: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.commercial-line-economics-r2a,
.commercial-line-economics-r2a * {
    box-sizing: border-box;
}

.commercial-econ-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;

    margin: 0 0 12px;
    padding: 14px 16px;

    color: inherit;

    background:
        color-mix(
            in srgb,
            currentColor 4%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 16%,
            transparent
        );

    border-radius: 14px;
}

.commercial-econ-heading > div:first-child {
    min-width: 0;
}

.commercial-econ-heading small,
.commercial-econ-card small {
    display: block;

    margin: 0 0 3px;

    color: inherit;

    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .11em;

    opacity: .68;
}

.commercial-econ-heading h3,
.commercial-econ-card h4 {
    margin: 0;
    padding: 0;

    color: inherit;

    font: inherit;
    font-weight: 700;
    line-height: 1.25;
}

.commercial-econ-heading h3 {
    font-size: 15px;
}

.commercial-econ-card h4 {
    font-size: 14px;
}

.commercial-econ-heading p {
    max-width: 660px;

    margin: 5px 0 0;

    color: inherit;

    font: inherit;
    font-size: 11px;
    line-height: 1.4;

    opacity: .66;
}

.commercial-econ-kpis {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(118px, 1fr));

    gap: 8px;

    min-width: min(480px, 46%);
}

.commercial-econ-kpis > div {
    display: grid;
    gap: 3px;

    padding: 9px 11px;

    color: inherit;

    background:
        color-mix(
            in srgb,
            currentColor 5%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 13%,
            transparent
        );

    border-radius: 10px;
}

.commercial-econ-kpis span {
    color: inherit;

    font: inherit;
    font-size: 10px;
    line-height: 1.25;

    opacity: .68;
}

.commercial-econ-kpis strong {
    color: inherit;

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;

    white-space: nowrap;
}

.commercial-econ-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.commercial-econ-card {
    min-width: 0;

    padding: 14px;

    color: inherit;

    background:
        color-mix(
            in srgb,
            currentColor 3%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 15%,
            transparent
        );

    border-radius: 14px;

    box-shadow: none;
}

.commercial-econ-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0 0 12px;
}

.commercial-econ-wide {
    margin-top: 12px;
}

.commercial-econ-fields {
    display: grid;

    grid-template-columns:
        minmax(145px, 1.5fr)
        minmax(72px, .65fr)
        minmax(72px, .65fr)
        minmax(110px, 1fr)
        minmax(110px, 1fr);

    gap: 9px;

    align-items: end;
}

.commercial-econ-card label {
    display: grid;
    gap: 5px;

    min-width: 0;

    margin: 0;

    color: inherit;

    font: inherit;
}

.commercial-econ-card label span {
    color: inherit;

    font: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;

    opacity: .68;
}

.commercial-econ-card input,
.commercial-econ-card select {
    width: 100%;
    min-width: 0;
    min-height: 36px;

    margin: 0;
    padding: 7px 9px;

    color: inherit;

    background:
        color-mix(
            in srgb,
            currentColor 4%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 20%,
            transparent
        );

    border-radius: 8px;

    outline: none;

    font: inherit;
    font-size: 12px;

    box-shadow: none;
}

.commercial-econ-card input:hover,
.commercial-econ-card select:hover {
    border-color:
        color-mix(
            in srgb,
            currentColor 30%,
            transparent
        );
}

.commercial-econ-card input:focus,
.commercial-econ-card select:focus {
    border-color:
        color-mix(
            in srgb,
            currentColor 48%,
            transparent
        );

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            currentColor 8%,
            transparent
        );
}

.commercial-econ-card input::placeholder {
    color: inherit;
    opacity: .45;
}

/*
 * Evita il comportamento browser bianco forzato dei select/input
 * nel tema scuro, lasciando tuttavia la scelta cromatica al modulo host.
 */
.commercial-econ-card select option {
    color: CanvasText;
    background: Canvas;
}

.commercial-econ-expenses {
    display: grid;
    gap: 0;
}

.commercial-econ-expense-row {
    display: grid;

    grid-template-columns:
        minmax(170px, 1.25fr)
        minmax(160px, 1fr)
        minmax(160px, 1fr);

    gap: 12px;

    align-items: end;

    min-height: 52px;

    padding: 7px 0;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            currentColor 10%,
            transparent
        );
}

.commercial-econ-expense-row:last-child {
    border-bottom: 0;
}

.commercial-econ-expense-row > strong {
    align-self: center;

    color: inherit;

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    opacity: .9;
}

.commercial-econ-commissions {
    display: grid;
    gap: 9px;
}

.commercial-econ-commission-row {
    display: grid;

    grid-template-columns:
        minmax(150px, 1.35fr)
        minmax(120px, .9fr)
        minmax(105px, .8fr)
        minmax(95px, .7fr)
        minmax(105px, .8fr)
        auto;

    gap: 9px;

    align-items: end;

    padding: 10px;

    color: inherit;

    background:
        color-mix(
            in srgb,
            currentColor 3%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 11%,
            transparent
        );

    border-radius: 10px;
}

.commercial-econ-add,
.commercial-econ-remove {
    min-height: 36px;

    padding: 7px 11px;

    color: inherit;

    background:
        color-mix(
            in srgb,
            currentColor 5%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 18%,
            transparent
        );

    border-radius: 8px;

    font: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: none;
}

.commercial-econ-add:hover,
.commercial-econ-remove:hover {
    background:
        color-mix(
            in srgb,
            currentColor 9%,
            transparent
        );

    border-color:
        color-mix(
            in srgb,
            currentColor 30%,
            transparent
        );
}

.commercial-econ-add:disabled,
.commercial-econ-remove:disabled {
    cursor: default;
    opacity: .45;
}

.commercial-econ-empty {
    margin: 3px 0;

    color: inherit;

    font: inherit;
    font-size: 11px;

    opacity: .62;
}

.commercial-econ-note {
    margin-top: 12px;

    padding: 9px 12px;

    color: inherit;

    background:
        color-mix(
            in srgb,
            currentColor 3%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor 12%,
            transparent
        );

    border-radius: 9px;

    font: inherit;
    font-size: 10px;
    line-height: 1.45;

    opacity: .72;
}

/*
 * Mantiene l'aspetto coerente anche nel tema chiaro:
 * niente colori hard-coded dark/navy e nessuna palette autonoma.
 */
@media (max-width: 1180px) {
    .commercial-econ-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .commercial-econ-kpis {
        width: 100%;
        min-width: 0;
    }

    .commercial-econ-fields {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .commercial-econ-commission-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .commercial-line-economics-r2a {
        margin: 12px 0;
    }

    .commercial-econ-heading,
    .commercial-econ-card {
        padding: 12px;
    }

    .commercial-econ-grid,
    .commercial-econ-kpis,
    .commercial-econ-fields,
    .commercial-econ-expense-row,
    .commercial-econ-commission-row {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .commercial-econ-expense-row {
        padding: 10px 0;
    }
}

/* OMNIA_MULTILINE_ECONOMICS_HOST_STYLE_R2A1_END */


/* OMNIA_OFFER_COMPOSER_UI_R1_START */

/* CODE remains visible and editable on its white edit surface. */
.commercial-composer-workspace
.commercial-row-code > input[type="text"] {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}

/* Compact Progetto commerciale vertically. */
.commercial-multiline-panel {
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

.commercial-multiline-head,
.commercial-multiline-foot {
    gap: 6px !important;
}

.commercial-multiline-head > div:first-child {
    gap: 1px !important;
}

.commercial-multiline-head strong {
    font-size: 13px !important;
}

.commercial-multiline-head span {
    font-size: 11px !important;
}

.commercial-multiline-actions,
.commercial-line-tabs {
    gap: 5px !important;
}

.commercial-multiline-actions button,
.commercial-line-tab,
.commercial-line-add {
    min-height: 28px !important;
    padding: 4px 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

.commercial-line-tab {
    min-width: 94px !important;
}

.commercial-line-summary {
    gap: 2px !important;
}

/*
 * Independent machine-list viewport.
 * The whole workspace retains its existing page scroll.
 */
.commercial-composer-table-wrap {
    max-height: clamp(320px, 52vh, 620px) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.commercial-composer-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 4;
}

@media (max-width: 1180px) {
    .commercial-composer-table-wrap {
        max-height: 48vh !important;
    }
}

@media (max-width: 768px) {
    .commercial-multiline-panel {
        padding: 7px 8px !important;
    }

    .commercial-composer-table-wrap {
        max-height: 44vh !important;
    }
}

/* OMNIA_OFFER_COMPOSER_UI_R1_END */

/* ============================================================
   OMNIA_OFFER_DATI_EXTRA_R2
   Collapsible commercial-project panel below line economics.
   ============================================================ */

.commercial-extra-r2 {
  display:block;
  width:100%;
  margin:10px 0 18px;
}

.commercial-extra-toggle-r2 {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:8px 16px;
  border-radius:9px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}

.commercial-extra-toggle-r2::after {
  content:"▾";
  font-size:.82em;
}

.commercial-extra-toggle-r2[aria-expanded="true"]::after {
  content:"▴";
}

.commercial-extra-r2 > .commercial-multiline-panel {
  margin-top:10px !important;
  margin-bottom:0 !important;
}

.commercial-extra-r2 > .commercial-multiline-panel[hidden] {
  display:none !important;
}

@media (max-width:768px) {
  .commercial-extra-r2 {
    margin:8px 0 14px;
  }

  .commercial-extra-toggle-r2 {
    width:100%;
  }
}

/* OMNIA_OFFER_DATI_EXTRA_R2_END */

/* ============================================================
   OMNIA_OFFER_DATI_EXTRA_R3_POSITION
   Exact boundary: complete economics -> Dati extra -> project.
   ============================================================ */

.commercial-line-economics-r2a + .commercial-extra-r2 {
  display:block;
  width:100%;
  margin:0 0 18px !important;
  padding-top:10px;
}

.commercial-line-economics-r2a + .commercial-extra-r2
  > .commercial-extra-toggle-r2 {
  margin:0;
}

.commercial-line-economics-r2a + .commercial-extra-r2
  > .commercial-multiline-panel {
  width:100%;
  margin-top:10px !important;
}

/* OMNIA_OFFER_DATI_EXTRA_R3_POSITION_END */

/* ============================================================
   OMNIA_OFFER_DATI_EXTRA_R4_FINAL

   Closed:
     Dati extra

   Open:
     Dati extra
     Progetto commerciale
     Economia della linea
   ============================================================ */

.commercial-extra-content-r4 {
  display:block;
  width:100%;
  margin-top:10px;
}

.commercial-extra-content-r4[hidden] {
  display:none !important;
}

.commercial-extra-content-r4
  > .commercial-multiline-panel {
  width:100%;
  margin:0 0 10px !important;
}

.commercial-extra-content-r4
  > .commercial-line-economics-r2a {
  width:100%;
  margin:0 !important;
}

.commercial-table-panel
  + .commercial-extra-r2 {
  display:block;
  width:100%;
  margin:10px 0 18px !important;
}

/* OMNIA_OFFER_DATI_EXTRA_R4_FINAL_END */


/* OMNIA_COMPILER_TOOLBAR_RESPONSIVE_R1 */
.commercial-products-toolbar {
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0;
    width: 100%;
}

.commercial-products-toolbar > h1 {
    flex: 0 0 auto;
    margin: 0 !important;
}

.commercial-products-toolbar > .commercial-toolbar-actions {
    display: flex !important;
    flex: 1 1 420px;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0;
    margin: 0 !important;
}

.commercial-products-toolbar > .commercial-toolbar-actions > button {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .commercial-products-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .commercial-products-toolbar > .commercial-toolbar-actions {
        flex: 0 1 auto;
        justify-content: flex-start !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .commercial-products-toolbar > .commercial-toolbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-products-toolbar > .commercial-toolbar-actions > button {
        width: 100%;
        justify-content: center;
        padding-inline: 7px !important;
        font-size: 12px;
    }
}
/* OMNIA_COMPILER_TOOLBAR_RESPONSIVE_R1_END */


/* OMNIA_COMPILER_OVERFLOW_R2_START */

/* Prevent the compiler workspace from expanding the page. */
.commercial-composer-workspace {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.commercial-composer-workspace .commercial-composer-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Keep every toolbar control inside the available width. */
.commercial-composer-workspace .commercial-products-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
}

.commercial-composer-workspace
.commercial-products-toolbar > .commercial-toolbar-actions {
    box-sizing: border-box;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
}

.commercial-composer-workspace
.commercial-products-toolbar > .commercial-toolbar-actions > button {
    flex: 0 1 auto !important;
    max-width: 100% !important;
}

/* Scroll wide product tables inside their own viewport. */
.commercial-composer-workspace .commercial-table-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.commercial-composer-workspace .commercial-table-wrap,
.commercial-composer-workspace .commercial-composer-table-wrap {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
}

@media (max-width: 900px) {
    .commercial-composer-workspace
    .commercial-products-toolbar > .commercial-toolbar-actions {
        flex: 0 1 auto !important;
    }
}

@media (max-width: 480px) {
    .commercial-composer-workspace
    .commercial-products-toolbar > .commercial-toolbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-composer-workspace
    .commercial-products-toolbar > .commercial-toolbar-actions > button {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* OMNIA_COMPILER_OVERFLOW_R2_END */

/* OMNIA_OFFER_DESIGN_R4 — visual owner scoped to the canonical compiler. */
#offerCompilerMainMount {
    --offer-bg:#f4f8fd;
    --offer-surface:#FFFFFF;
    --offer-surface-soft:#F8FBFF;
    --offer-primary:#1765D8;
    --offer-text:#10264B;
    --offer-card:var(--offer-surface);
    --offer-border:#dce6f3;
    --offer-blue:var(--offer-primary);
    --offer-ink:var(--offer-text);
    --offer-muted:#61748F;
    --ms-theme-text:var(--offer-ink);
    --ms-theme-border:var(--offer-border);
    --ms-theme-surface:var(--offer-bg);
    --surface:var(--offer-card);
    --muted:var(--offer-muted);
    color:var(--offer-ink) !important;
    background:var(--offer-bg) !important;
    padding:16px !important;
}
#offerCompilerMainMount *,#offerCompilerMainMount *::before,#offerCompilerMainMount *::after {box-sizing:border-box;}
#offerCompilerMainMount .commercial-composer-shell {gap:8px;max-width:1680px;}
#offerCompilerMainMount :is(.commercial-composer-toolbar,.commercial-family-panel,.commercial-table-panel,.commercial-products-toolbar,.commercial-multiline-panel,.commercial-econ-card,.commercial-totals-card,.commercial-quick-actions,.commercial-master-card) {
    color:var(--offer-ink) !important;
    background:var(--offer-card) !important;
    border:1px solid var(--offer-border) !important;
    border-radius:14px !important;
    box-shadow:0 3px 14px rgba(16,38,75,.045) !important;
}
#offerCompilerMainMount :is(.commercial-composer-toolbar,.commercial-family-panel,.commercial-multiline-panel,.commercial-econ-card,.commercial-totals-card,.commercial-quick-actions,.commercial-master-card) {padding:12px !important;}
#offerCompilerMainMount .commercial-composer-toolbar {gap:12px;}
#offerCompilerMainMount .commercial-products-toolbar {padding:12px !important;gap:10px !important;}
#offerCompilerMainMount .commercial-products-toolbar h1 {margin:0;font-size:18px;color:var(--offer-ink) !important;}
#offerCompilerMainMount :is(input,select,textarea) {
    min-width:0;max-width:100%;border-color:var(--offer-border) !important;
    background:#fff !important;color:var(--offer-ink) !important;
    -webkit-text-fill-color:var(--offer-ink) !important;
    border-radius:8px !important;font-family:inherit;
}
#offerCompilerMainMount :is(input,select,textarea):focus-visible {
    outline:2px solid var(--offer-blue);outline-offset:2px;box-shadow:none !important;
}
#offerCompilerMainMount button:focus-visible,#offerCompilerMainMount summary:focus-visible {
    outline:2px solid var(--offer-blue);outline-offset:3px;
}
#offerCompilerMainMount button {
    color:var(--offer-ink);border-radius:8px !important;min-height:40px;
    border-color:var(--offer-border) !important;font-weight:650;
}
#offerCompilerMainMount button:not(:disabled):hover {border-color:var(--offer-blue) !important;}
#offerCompilerMainMount button:disabled {cursor:not-allowed;}
#offerCompilerMainMount :is(.commercial-multiline-actions button,.commercial-line-tab,.commercial-line-add) {
    min-height:40px !important;padding:8px 12px !important;font-size:12px !important;
    background:#fff !important;color:var(--offer-ink) !important;
}
#offerCompilerMainMount .commercial-line-tab.is-active {
    background:var(--offer-blue) !important;color:#fff !important;border-color:var(--offer-blue) !important;
}
#offerCompilerMainMount .commercial-multiline-panel {margin-bottom:8px !important;gap:8px !important;}
#offerCompilerMainMount .commercial-multiline-panel {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(260px,304px);background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;}
#offerCompilerMainMount .commercial-multiline-head {grid-column:1/-1;grid-row:2;}
#offerCompilerMainMount .commercial-multiline-panel .commercial-line-tabs {grid-column:1;grid-row:3;align-self:center;}
#offerCompilerMainMount .commercial-multiline-foot {display:contents !important;}
#offerCompilerMainMount [data-commercial-line-summary] {grid-column:3;grid-row:3;align-self:center;min-width:0;}
#offerCompilerMainMount .commercial-line-tab {max-width:100%;white-space:normal;overflow-wrap:anywhere;}

#offerCompilerMainMount .commercial-multiline-head {align-items:center;gap:12px !important;}
#offerCompilerMainMount .commercial-multiline-head strong {font-size:22px !important;line-height:1.25;}
#offerCompilerMainMount .commercial-multiline-head span {color:var(--offer-muted) !important;font-size:12px !important;}
#offerCompilerMainMount .commercial-multiline-actions {grid-column:2;grid-row:3;flex-wrap:wrap;gap:8px !important;justify-content:flex-end;}
#offerCompilerMainMount .commercial-line-tabs {gap:8px !important;flex-wrap:wrap;}
#offerCompilerMainMount .commercial-line-summary {gap:8px !important;}
#offerCompilerMainMount .commercial-line-summary-row {padding:10px 16px !important;border-radius:0;background:#315e95;}
#offerCompilerMainMount .commercial-line-summary-row strong {color:#fff !important;-webkit-text-fill-color:#fff !important;font-size:22px;}
#offerCompilerMainMount .commercial-line-summary-row.is-grand-total {background:#082c5c;font-weight:750;}
#offerCompilerMainMount [data-commercial-line-summary] {display:flex;gap:0 !important;border-radius:8px;overflow:hidden;}
#offerCompilerMainMount [data-commercial-line-summary] .commercial-line-summary-row {flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-width:0;margin:0;border:0;color:#fff !important;}
#offerCompilerMainMount [data-commercial-line-summary] .commercial-line-summary-row span {color:#fff !important;-webkit-text-fill-color:#fff !important;}
#offerCompilerMainMount .commercial-extra-r2 {margin:0 !important;padding:10px;border:1px solid var(--offer-border);border-radius:12px;background:var(--offer-surface-soft) !important;}
#offerCompilerMainMount .commercial-extra-toggle-r2 {min-height:36px;padding:6px 10px;margin:0;box-shadow:none;background:var(--offer-surface-soft) !important;color:var(--offer-blue) !important;border:1px solid var(--offer-border) !important;border-radius:10px !important;}
#offerCompilerMainMount .commercial-extra-content-r4 {margin-top:4px;padding:0 !important;}
#offerCompilerMainMount .commercial-line-economics-r2a {margin:0 !important;padding:0 !important;}
#offerCompilerMainMount .commercial-econ-heading {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;
    gap:16px;margin:0 0 12px;padding:12px 18px !important;background:#fff !important;border:1px solid var(--offer-border) !important;border-left:3px solid var(--offer-blue) !important;border-radius:10px;
}
#offerCompilerMainMount .commercial-econ-heading h3 {margin:2px 0;font-size:20px;text-transform:lowercase;}
#offerCompilerMainMount .commercial-econ-heading h3::first-letter {text-transform:uppercase;}
#offerCompilerMainMount .commercial-econ-heading p {margin:4px 0 0;font-size:12px;color:var(--offer-muted);}
#offerCompilerMainMount .commercial-econ-kpis {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0;}
#offerCompilerMainMount .commercial-econ-kpis > div {padding:10px 12px;min-width:0;border:1px solid var(--offer-border);border-radius:12px;background:#fff !important;box-shadow:0 3px 14px rgba(16,38,75,.045);}
#offerCompilerMainMount .commercial-econ-kpis span {font-size:11px;color:var(--offer-muted);}
#offerCompilerMainMount .commercial-econ-kpis strong {font-size:19px;color:var(--offer-blue);line-height:1.4;overflow-wrap:anywhere;}
#offerCompilerMainMount .commercial-econ-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#offerCompilerMainMount .commercial-econ-card {min-width:0;}
#offerCompilerMainMount .commercial-econ-card > header {margin:0 0 10px;gap:10px;}
#offerCompilerMainMount .commercial-econ-card h4 {font-size:15px;margin:0;color:var(--offer-ink);}
#offerCompilerMainMount .commercial-econ-card small {font-size:10px;color:var(--offer-muted);}
#offerCompilerMainMount .commercial-service-title {display:flex;align-items:center;gap:8px;}
#offerCompilerMainMount .commercial-service-title .offer-icon {object-fit:contain;padding:4px;border-radius:6px;background:#edf4ff;width:30px;height:30px;}
#offerCompilerMainMount .commercial-econ-fields {grid-template-columns:repeat(2,minmax(0,1fr)) repeat(2,minmax(0,1.3fr));gap:12px;}
#offerCompilerMainMount .commercial-service-responsible {grid-column:1/-1;}
#offerCompilerMainMount .commercial-econ-card label {min-width:0;gap:4px;}
#offerCompilerMainMount .commercial-econ-card label > span {font-size:11px;line-height:1.3;color:var(--offer-muted);}
#offerCompilerMainMount :is(.commercial-multiline-head span,.commercial-econ-heading small,.commercial-econ-heading p,.commercial-econ-kpis span,.commercial-econ-card small,.commercial-econ-card label > span,.commercial-accordion-title > span) {color:var(--offer-muted) !important;-webkit-text-fill-color:var(--offer-muted) !important;opacity:1 !important;}

#offerCompilerMainMount .commercial-econ-card :is(input:not([type=checkbox]),select) {width:100%;min-height:38px;padding:8px 10px;font-size:13px;}
#offerCompilerMainMount .commercial-service-switch {position:relative;display:block;width:54px;height:44px;flex:0 0 54px;cursor:pointer;}
#offerCompilerMainMount .commercial-service-switch input {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1;}
#offerCompilerMainMount .commercial-service-switch > span {position:absolute;left:3px;right:3px;top:9px;height:26px;background:#a6b6cb;border-radius:999px;transition:background .15s;}
#offerCompilerMainMount .commercial-service-switch > span::after {content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,38,75,.12);transition:transform .15s;}
#offerCompilerMainMount .commercial-service-switch input:checked + span {background:var(--offer-blue);}
#offerCompilerMainMount .commercial-service-switch input:checked + span::after {transform:translateX(22px);}
#offerCompilerMainMount .commercial-service-switch input:focus-visible + span {outline:2px solid var(--offer-blue);outline-offset:3px;}
#offerCompilerMainMount .commercial-econ-wide {margin-top:12px;}
#offerCompilerMainMount .commercial-econ-accordion > summary {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none;}
#offerCompilerMainMount .commercial-econ-accordion > summary::-webkit-details-marker {display:none;}
#offerCompilerMainMount .commercial-econ-accordion > summary::after {content:'⌄';font-size:22px;color:var(--offer-blue);transition:transform .15s;}
#offerCompilerMainMount .commercial-econ-accordion[open] > summary::after {transform:rotate(180deg);}
#offerCompilerMainMount .commercial-accordion-title {display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--offer-ink);}
#offerCompilerMainMount .commercial-accordion-title > span {font-size:12px;color:var(--offer-muted);}
#offerCompilerMainMount .commercial-econ-accordion > header {justify-content:flex-end;}
#offerCompilerMainMount .commercial-econ-expenses {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding-top:10px;}
#offerCompilerMainMount .commercial-econ-expense-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;padding:0 8px;border:0;border-right:1px solid var(--offer-border);border-radius:0;background:#fff;}
#offerCompilerMainMount .commercial-econ-expense-row > strong {grid-column:1/-1;font-size:12px;line-height:1.4;min-height:18px;color:var(--offer-ink);}
#offerCompilerMainMount .commercial-econ-commissions {gap:10px;}
#offerCompilerMainMount .commercial-econ-commission-row {grid-template-columns:minmax(140px,1.5fr) repeat(4,minmax(80px,1fr)) auto;gap:10px;border:1px solid var(--offer-border);border-radius:10px;padding:10px;background:#f8fbff;}
#offerCompilerMainMount .commercial-econ-note {padding:10px 12px;margin-top:0;background:#dfecfc;border:1px solid var(--offer-border);border-radius:10px;gap:12px;font-size:12px;}
#offerCompilerMainMount .commercial-bottom-grid {background:var(--offer-bg) !important;gap:12px;margin-top:0;grid-template-columns:minmax(0,1.3fr) minmax(200px,.8fr) minmax(0,1fr);}
#offerCompilerMainMount .commercial-totals-card {display:flex !important;flex-direction:column;gap:8px !important;font-variant-numeric:tabular-nums;}
#offerCompilerMainMount .commercial-totals-card > div {gap:8px !important;padding:0 !important;min-width:0;flex:0 0 auto;}
#offerCompilerMainMount .commercial-totals-card > div:not([data-commercial-bottom-line-summary]),
#offerCompilerMainMount .commercial-totals-card [data-commercial-bottom-line-summary] > .commercial-line-summary-row {display:grid !important;grid-template-columns:minmax(0,1fr) max-content !important;column-gap:8px !important;align-items:center !important;min-height:48px;padding:8px 10px !important;}
#offerCompilerMainMount .commercial-totals-card [data-commercial-bottom-line-summary] {gap:8px !important;margin:0 !important;padding:0 !important;}
#offerCompilerMainMount .commercial-totals-card > div:not([data-commercial-bottom-line-summary]),
#offerCompilerMainMount .commercial-totals-card [data-commercial-bottom-line-summary] > .commercial-line-summary-row {margin:0 !important;border:1px solid transparent;}
@media(max-width:599px) {
    #offerCompilerMainMount .commercial-totals-card > div:not([data-commercial-bottom-line-summary]),
    #offerCompilerMainMount .commercial-totals-card [data-commercial-bottom-line-summary] > .commercial-line-summary-row {min-height:64px;}
}
#offerCompilerMainMount .commercial-totals-card span {font-weight:600 !important;line-height:1.4;overflow-wrap:anywhere;}
#offerCompilerMainMount .commercial-totals-card strong {font-weight:700 !important;line-height:1.4;text-align:right !important;font-variant-numeric:tabular-nums;white-space:nowrap;}
#offerCompilerMainMount .commercial-totals-card :is(span,strong) {color:var(--offer-ink) !important;-webkit-text-fill-color:var(--offer-ink) !important;font-size:15px !important;}
#offerCompilerMainMount .commercial-totals-card [data-total-net] {color:var(--offer-blue) !important;-webkit-text-fill-color:var(--offer-blue) !important;font-size:15px !important;}
#offerCompilerMainMount .commercial-quick-actions {align-content:start;gap:8px !important;}
#offerCompilerMainMount .commercial-quick-actions .commercial-save-line {grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:8px;width:100% !important;min-height:44px !important;background:var(--offer-blue) !important;border-color:var(--offer-blue) !important;color:#fff !important;font-size:14px !important;box-shadow:0 3px 8px rgba(23,101,216,.18);}
#offerCompilerMainMount .commercial-save-line span {color:#fff !important;-webkit-text-fill-color:#fff !important;}
#offerCompilerMainMount :is(.commercial-toolbar-actions button,.commercial-econ-add,.commercial-econ-remove) {background:#fff !important;color:var(--offer-ink) !important;border:1px solid var(--offer-border) !important;}
#offerCompilerMainMount .commercial-composer-toolbar button {background:var(--offer-blue) !important;color:#fff !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) th {background:var(--offer-surface-soft) !important;color:var(--offer-ink) !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) td {border-color:var(--offer-border);}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tbody tr {background:#fff !important;color:var(--offer-ink) !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) td:not([data-discount-band]) {background:#fff !important;color:var(--offer-ink) !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) td :is(strong,span,label) {color:inherit !important;-webkit-text-fill-color:currentColor !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tr.is-selected td:not([data-discount-band]) {background:#eaf2ff !important;}
#offerCompilerMainMount [data-discount-band=warning] input {color:#8a5800 !important;-webkit-text-fill-color:#8a5800 !important;}
#offerCompilerMainMount [data-discount-band=danger] input {color:#9d2626 !important;-webkit-text-fill-color:#9d2626 !important;}

#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tr:hover td {background:#f4f8fd;}
/* R4.1: presentation of existing workflow actions; no second shell or toolbar. */
#offerCompilerMainMount .commercial-project-breadcrumb {grid-column:1/-1;grid-row:1;display:flex;gap:8px;align-items:center;color:var(--offer-muted);font-size:13px;padding:2px 0 4px;}
#offerCompilerMainMount .commercial-project-title {display:flex !important;flex-direction:row !important;align-items:center;gap:12px;min-width:0;}
#offerCompilerMainMount .commercial-project-title > .offer-icon {width:44px;height:44px;object-fit:contain;padding:8px;background:var(--offer-blue);border-radius:10px;}
#offerCompilerMainMount .commercial-project-title > div {display:grid;gap:4px;min-width:0;}
#offerCompilerMainMount .commercial-project-stepper {list-style:none;display:flex;gap:0;padding:0;margin:0;flex:0 1 620px;min-width:0;}
#offerCompilerMainMount .commercial-project-stepper li {position:relative;flex:1;min-width:0;}
#offerCompilerMainMount .commercial-project-stepper li:not(:last-child)::after {content:'';position:absolute;top:18px;left:calc(50% + 24px);right:calc(-50% + 24px);height:2px;background:#d2deef;}
#offerCompilerMainMount .commercial-project-stepper button {display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0 4px;border:0 !important;background:transparent !important;box-shadow:none !important;font-weight:400;}
#offerCompilerMainMount .commercial-project-stepper button > span:first-child {display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#edf3fb;border:1px solid var(--offer-border);color:var(--offer-muted) !important;-webkit-text-fill-color:var(--offer-muted) !important;font-size:14px !important;}
#offerCompilerMainMount .commercial-project-stepper button > span:last-child {font-size:14px !important;overflow-wrap:anywhere;}
#offerCompilerMainMount .commercial-project-stepper button:disabled {opacity:1;}
#offerCompilerMainMount .commercial-project-stepper [aria-current=step] > span:first-child {background:var(--offer-blue);color:#fff !important;-webkit-text-fill-color:#fff !important;border-color:var(--offer-blue);}
#offerCompilerMainMount .commercial-project-stepper [aria-current=step] > span:last-child {color:var(--offer-blue) !important;-webkit-text-fill-color:var(--offer-blue) !important;}
#offerCompilerMainMount .commercial-multiline-actions button > .offer-icon {width:20px;height:20px;object-fit:contain;}
#offerCompilerMainMount .commercial-multiline-actions button {display:flex;align-items:center;gap:8px;min-height:40px !important;font-size:13px !important;font-weight:500;}
#offerCompilerMainMount [data-commercial-line-delete] {color:#d62e3e !important;border-color:#ffcbd1 !important;}
#offerCompilerMainMount .commercial-line-tabs button {min-height:40px !important;font-size:14px !important;}
#offerCompilerMainMount .commercial-line-summary-row[hidden] {display:none !important;}
#offerCompilerMainMount .commercial-line-summary-row strong {white-space:nowrap;font-size:20px;}
#offerCompilerMainMount .commercial-econ-card {border-radius:10px !important;box-shadow:none !important;}
#offerCompilerMainMount .commercial-econ-card h4 {font-size:19px;}
#offerCompilerMainMount .commercial-econ-accordion > summary {min-height:28px;}
#offerCompilerMainMount .commercial-accordion-title strong {font-size:19px;font-weight:650;text-transform:none;}
#offerCompilerMainMount .commercial-accordion-title > .offer-icon {width:28px;height:28px;object-fit:contain;}
#offerCompilerMainMount .commercial-econ-accordion > summary::after {content:'›';transform:none;}
#offerCompilerMainMount .commercial-econ-accordion[open] > summary::after {transform:rotate(-90deg);}
#offerCompilerMainMount .commercial-extra-cost-summary {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:center;gap:16px;padding-top:14px;}
#offerCompilerMainMount .commercial-extra-cost-summary output {display:block;padding:8px 12px;border:1px solid var(--offer-border);border-radius:6px;background:#f4f8fd;font-size:18px;font-weight:650;}
#offerCompilerMainMount .commercial-extra-cost-summary p {color:var(--offer-muted);font-size:13px;line-height:1.5;margin:0;}
#offerCompilerMainMount .commercial-project-footer {display:flex;align-items:center;gap:16px;min-width:0;margin-top:14px;opacity:1;}
#offerCompilerMainMount .commercial-project-footer > [data-ms-i18n] {flex:1;min-width:0;line-height:1.5;color:var(--offer-muted);}
#offerCompilerMainMount .commercial-project-footer .commercial-save-line > span {font-size:16px !important;}
#offerCompilerMainMount .commercial-footer-info {display:grid;place-items:center;flex:0 0 30px;height:30px;background:var(--offer-blue);color:#fff;font-size:20px;font-weight:700;border-radius:50%;}
#offerCompilerMainMount .commercial-project-footer .commercial-save-line {display:flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-height:46px;padding:10px 24px;background:var(--offer-blue) !important;color:#fff !important;border:1px solid var(--offer-blue);font-size:16px !important;box-shadow:0 3px 8px rgba(23,101,216,.18);}
@media(max-width:1199px) {
    #offerCompilerMainMount .commercial-multiline-panel {grid-template-columns:minmax(0,1fr) minmax(260px,304px);}
    #offerCompilerMainMount .commercial-multiline-actions {grid-column:1;grid-row:4;justify-content:flex-start;}
    #offerCompilerMainMount [data-commercial-line-summary] {grid-column:2;grid-row:3/5;}
    #offerCompilerMainMount .commercial-multiline-head {flex-wrap:wrap;}
    #offerCompilerMainMount .commercial-project-stepper {flex:1 1 100%;margin:8px 0;}
    #offerCompilerMainMount .commercial-extra-cost-summary {grid-template-columns:1fr 2fr;}
    #offerCompilerMainMount .commercial-econ-expenses {grid-template-columns:repeat(3,minmax(0,1fr));}
    #offerCompilerMainMount .commercial-econ-heading {grid-template-columns:minmax(0,1fr);gap:10px;}
    #offerCompilerMainMount .commercial-econ-commission-row {grid-template-columns:repeat(3,minmax(0,1fr));}
    #offerCompilerMainMount .commercial-bottom-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    #offerCompilerMainMount .commercial-master-card {grid-column:1/-1;}
}
@media(max-width:899px) {
    #offerCompilerMainMount .commercial-econ-grid {grid-template-columns:minmax(0,1fr);}
    #offerCompilerMainMount .commercial-econ-expenses {grid-template-columns:repeat(2,minmax(0,1fr));}
    #offerCompilerMainMount .commercial-multiline-head {align-items:flex-start;flex-wrap:wrap;}
    #offerCompilerMainMount .commercial-multiline-panel {grid-template-columns:minmax(0,1fr);}
    #offerCompilerMainMount .commercial-multiline-panel .commercial-line-tabs {grid-column:1;grid-row:3;}
    #offerCompilerMainMount .commercial-multiline-actions {grid-column:1;grid-row:4;justify-content:flex-start;}
    #offerCompilerMainMount [data-commercial-line-summary] {grid-column:1;grid-row:5;}

}
@media(max-width:599px) {
    #offerCompilerMainMount .commercial-project-title > .offer-icon {width:38px;height:38px;}
    #offerCompilerMainMount .commercial-multiline-head strong {font-size:20px !important;}
    #offerCompilerMainMount .commercial-project-stepper button > span:last-child {font-size:11px !important;}
    #offerCompilerMainMount .commercial-project-stepper li:not(:last-child)::after {left:calc(50% + 20px);right:calc(-50% + 20px);}
    #offerCompilerMainMount .commercial-project-footer {flex-wrap:wrap;gap:10px;}
    #offerCompilerMainMount .commercial-project-footer .commercial-save-line {flex:1 1 100%;}
    #offerCompilerMainMount .commercial-extra-cost-summary {grid-template-columns:minmax(0,1fr);}
    #offerCompilerMainMount .commercial-accordion-title strong {font-size:17px;}
    #offerCompilerMainMount {padding:10px !important;}
    #offerCompilerMainMount .commercial-econ-expenses,#offerCompilerMainMount .commercial-econ-commission-row,#offerCompilerMainMount .commercial-bottom-grid {grid-template-columns:minmax(0,1fr);}
    #offerCompilerMainMount .commercial-econ-expense-row {grid-template-columns:repeat(2,minmax(0,1fr));}
    #offerCompilerMainMount .commercial-econ-expense-row > strong {grid-column:1/-1;}
    #offerCompilerMainMount .commercial-econ-kpis {gap:6px;}
    #offerCompilerMainMount .commercial-econ-kpis > div {padding:8px;}
    #offerCompilerMainMount .commercial-econ-kpis strong {font-size:15px;}
    #offerCompilerMainMount .commercial-econ-fields {grid-template-columns:repeat(2,minmax(0,1fr));}
    #offerCompilerMainMount .commercial-service-responsible {grid-column:1/-1;}
    #offerCompilerMainMount .commercial-econ-card label > span {min-height:27px;}
    #offerCompilerMainMount .commercial-service-switch > span {min-height:0;}
    #offerCompilerMainMount :is(.commercial-line-tab,.commercial-line-add,.commercial-multiline-actions button) {min-height:44px !important;}
}
@media(prefers-reduced-motion:reduce) {
    #offerCompilerMainMount .commercial-service-switch > span,#offerCompilerMainMount .commercial-service-switch > span::after,#offerCompilerMainMount .commercial-econ-accordion > summary::after {transition:none;}
}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap),
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) :is(table,tbody) {background:var(--offer-surface) !important;color:var(--offer-text) !important;border-color:var(--offer-border) !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) :is(thead,thead tr,th,td[colspan]) {background:var(--offer-surface-soft) !important;color:var(--offer-text) !important;border-color:var(--offer-border) !important;}
#offerCompilerMainMount .commercial-totals-card .commercial-line-summary-row {background:var(--offer-surface-soft);border:1px solid var(--offer-border);border-radius:8px;}
#offerCompilerMainMount .commercial-totals-card .commercial-line-summary-row.is-grand-total {background:#082c5c;}
#offerCompilerMainMount .commercial-totals-card .commercial-line-summary-row.is-grand-total :is(span,strong) {color:#fff !important;-webkit-text-fill-color:#fff !important;}
/* R4.4: three aligned columns using the existing range children and state label. */
#offerCompilerMainMount .commercial-master-band {display:grid;grid-template-columns:54px 72px minmax(0,1fr);align-items:center;gap:6px;min-width:0;min-height:54px;margin-top:8px;padding:8px;font-variant-numeric:tabular-nums;}
#offerCompilerMainMount .commercial-master-range {display:contents !important;}
#offerCompilerMainMount .commercial-master-range > :is(b,output,i) {grid-column:1;grid-row:1;font-size:12px;font-weight:600;line-height:1.4;}
#offerCompilerMainMount .commercial-master-range > :is(b,output) {padding-right:10px;}
#offerCompilerMainMount .commercial-master-range > i {justify-self:end;}
#offerCompilerMainMount .commercial-master-band.is-danger .commercial-master-range > i {justify-self:start;}
#offerCompilerMainMount .commercial-master-range > input[type=number] {grid-column:2;grid-row:1;width:72px !important;min-width:72px !important;max-width:72px !important;min-height:36px;height:36px;margin:0;padding:6px 4px !important;font-size:13px;text-align:center !important;}
#offerCompilerMainMount .commercial-master-band > strong {grid-column:3;grid-row:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:0;white-space:nowrap !important;line-height:1.4;}
@media(max-width:899px) {
    #offerCompilerMainMount .commercial-master-band {min-height:78px;grid-template-columns:54px 72px minmax(0,1fr);}
    #offerCompilerMainMount .commercial-master-band > strong {grid-column:1/-1;grid-row:2;white-space:normal !important;overflow-wrap:anywhere;font-size:12px;}
}
#offerCompilerMainMount .commercial-quick-actions {min-height:0;}
/* R4.3: compact boundary and header treatment; disclosure DOM/handlers unchanged. */
#offerCompilerMainMount .commercial-table-panel {margin-bottom:0 !important;}
#offerCompilerMainMount .commercial-extra-toggle-r2[aria-expanded=true] {border-color:transparent !important;background:transparent !important;}
@media(max-width:599px) {
    #offerCompilerMainMount .commercial-extra-r2 {padding:8px;}
    #offerCompilerMainMount .commercial-extra-toggle-r2 {width:auto;min-height:44px;}
}
/* R4.2 vector sizing and ordinary surfaces, scoped to this compiler. */
#offerCompilerMainMount .offer-icon {display:inline-block;width:20px;height:20px;flex:0 0 auto;vertical-align:middle;color:inherit;}
#offerCompilerMainMount .commercial-project-title > .offer-icon {color:var(--offer-surface);}
#offerCompilerMainMount .commercial-econ-heading > div:first-child {display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;}
#offerCompilerMainMount .commercial-econ-heading > div:first-child > .offer-icon {width:28px;height:28px;color:var(--offer-primary);grid-row:1/3;}
#offerCompilerMainMount .commercial-econ-heading p {grid-column:2;}
#offerCompilerMainMount :is(.commercial-products-toolbar,.commercial-quick-actions) button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;}
#offerCompilerMainMount :is([data-commercial-action=delete],[data-commercial-line-delete],.commercial-econ-remove) {color:#d62e3e !important;}
#offerCompilerMainMount :is(.commercial-feedback,.commercial-master-guide) {background:var(--offer-surface-soft) !important;color:var(--offer-text) !important;border-color:var(--offer-border) !important;}
#offerCompilerMainMount .commercial-master-card {min-height:0;}
#offerCompilerMainMount .commercial-master-card h2 {color:var(--offer-text) !important;}
#offerCompilerMainMount .commercial-composer-summary {background:transparent !important;}
/* R4.5B: canonical ITEM metadata headings and product-only pearl zebra. */
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tbody tr.commercial-product-odd > td {background:#fff !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tbody tr.commercial-product-even > td {background:#EDF0F4 !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tbody tr > td[data-discount-band] {color:var(--offer-ink) !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tbody td[data-discount-band] input {color:var(--offer-ink) !important;-webkit-text-fill-color:var(--offer-ink) !important;background:#fff !important;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tbody tr.commercial-family-row > td {background:#F8FBFF !important;color:#20344F !important;font-weight:600 !important;padding:7px 10px;}
#offerCompilerMainMount :is(.commercial-table-wrap,.commercial-composer-table-wrap) tbody tr.commercial-separator-row > td {background:#DDE3EA !important;color:#20344F !important;-webkit-text-fill-color:#20344F !important;font-weight:600 !important;letter-spacing:0;border-top:1px solid #C8D1DC !important;padding:6px 10px;line-height:1.3;height:auto;}
/* R4.6: the existing products wrapper owns both scroll axes. */
#offerCompilerMainMount [data-commercial-table-wrap] {
    max-height:min(560px, calc(100vh - 180px));
    max-height:min(560px, calc(100dvh - 180px));
    overflow-y:auto;
}
#offerCompilerMainMount [data-commercial-table-wrap] > table > thead > tr > th {
    position:sticky;
    top:0;
    z-index:2;
}
@media (max-width:1024px) {
    #offerCompilerMainMount [data-commercial-table-wrap] {
        max-height:60vh;
        max-height:60dvh;
    }
}
@media (max-width:600px) {
    #offerCompilerMainMount [data-commercial-table-wrap] {
        max-height:55vh;
        max-height:55dvh;
    }
}
/* OMNIA_OFFER_DESIGN_R4_END */