/*
 * BOMSync canonical Syncfusion SfRibbon (Simplified layout) chrome.
 * Spec: .cursor/rules/bomsync-syncfusion-ribbon.mdc
 * Reference: QuoteLineWorkspace.razor (/manage/orders/quotes/{id}/lines)
 *
 * Requires wrapper: <div class="bomsync-ribbon-shell"> … <SfRibbon CssClass="bomsync-ribbon" …>
 */

.bomsync-ribbon-shell {
    background: var(--bomsync-elevated-surface);
    border: 1px solid var(--bomsync-border-strong);
    border-radius: 8px;
    padding: 0.15rem 0.35rem 0.1rem;
    box-shadow: var(--bomsync-shadow-sm);
}

.bomsync-ribbon-shell .bomsync-ribbon {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Tab row — neutral chrome; no brand-blue tab fills */
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: transparent !important;
    color: #000 !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-tab-header .e-toolbar-item .e-tab-text {
    color: #000 !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: rgb(var(--bomsync-shadow-rgb) / 0.06) !important;
    border-bottom: 2px solid var(--bomsync-border-strong) !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-ribbon-file-menu > .e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-ribbon-file-menu .e-file-menu-btn.e-btn {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-ribbon-file-menu > .e-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-ribbon-file-menu > .e-btn .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-ribbon-file-menu .e-file-menu-btn.e-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-header .e-ribbon-file-menu .e-file-menu-btn.e-btn .e-btn-text {
    color: #000 !important;
}

/* File menu popup — keep native Syncfusion menu behavior (do not restyle popup items like ribbon buttons). */
.bomsync-ribbon-shell .bomsync-ribbon .e-menu-wrapper.e-popup,
.bomsync-ribbon-shell .bomsync-ribbon .e-menu-container.e-popup {
    z-index: 1200;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content {
    min-height: 0;
    padding-top: 0.1rem;
    padding-bottom: 0.05rem;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group {
    border-right: 1px solid var(--bomsync-border-muted);
    padding-right: 0.35rem;
    margin-right: 0.35rem;
    background: transparent !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group:last-child {
    border-right: none;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-header {
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    min-height: 0;
    line-height: 1.1;
    font-size: 0.72rem;
    color: var(--bomsync-text-secondary);
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content {
    padding-bottom: 0.1rem !important;
    background: transparent !important;
}

/* Ribbon item buttons — transparent background, black icon + label (no brand fills) */
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-split-btn-wrapper .e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-split-btn-wrapper .e-dropdown-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group .e-tbar-btn.e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group .e-ribbon-group-overflow-ddb,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-css.e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-dropdown-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-large-item,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-medium-item,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-small-item,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-collection .e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-collection .e-css.e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-collection .e-dropdown-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-css.e-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-dropdown-btn,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-split-btn-wrapper .e-btn {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-split-btn-wrapper .e-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group .e-tbar-btn.e-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-split-btn-wrapper .e-btn .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group .e-tbar-btn.e-btn .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-icons,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-large-item .e-btn-icon,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-large-item .e-btn-text,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-collection .e-icons,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-icons {
    color: #000 !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-split-btn-wrapper .e-btn:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group .e-tbar-btn.e-btn:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-large-item:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-collection .e-btn:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-btn:hover {
    background: rgb(var(--bomsync-shadow-rgb) / 0.08) !important;
    border-color: var(--bomsync-border-muted) !important;
    color: #000 !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn:focus-visible,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn:focus-visible,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn:focus-visible,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-split-btn-wrapper .e-btn:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand-blue) 45%, transparent);
    outline-offset: 1px;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn.e-disabled,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn.e-disabled,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn.e-disabled,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-split-btn-wrapper .e-btn.e-disabled,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn.e-disabled {
    opacity: 0.45;
}

/* Item shells (Fluent2 may paint fills on wrappers, not only .e-btn) */
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-large-item,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-medium-item,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-small-item,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-collection,
.bomsync-ribbon-shell .bomsync-ribbon .e-split-btn-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Primary/secondary classes on ribbon controls — never filled tiles */
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-control.e-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-css.e-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-group-content .e-css.e-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn.e-secondary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn.e-secondary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn.e-primary,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-dropdown-btn.e-secondary {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--bomsync-text-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn.e-primary:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn.e-primary:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn.e-primary:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn.e-secondary:hover,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn.e-secondary:hover {
    background: rgb(var(--bomsync-shadow-rgb) / 0.08) !important;
    border-color: var(--bomsync-border-muted) !important;
    color: var(--bomsync-text-primary) !important;
    filter: none !important;
}

.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn.e-primary:active,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-btn.e-primary.e-active,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn.e-primary:active,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-content .e-css.e-btn.e-primary.e-active,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn:active,
.bomsync-ribbon-shell .bomsync-ribbon .e-ribbon-item .e-btn.e-active {
    background: rgb(var(--bomsync-shadow-rgb) / 0.1) !important;
    border-color: var(--bomsync-border-muted) !important;
    color: var(--bomsync-text-primary) !important;
    filter: none !important;
}

/* Lens IFC viewer — compact ribbon + button label display modes */
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-header .e-tab-header .e-toolbar-item.lens-ifc-ribbon-gear-tab .e-tab-text {
    font-size: 1.05rem;
    line-height: 1;
    min-width: 1.1rem;
    text-align: center;
}

.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-content {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-group-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-group-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    line-height: 1.05 !important;
}

.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-labeled-item,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-large-item,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-medium-item,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-small-item {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
}

.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-labeled-item .e-btn,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-large-item .e-btn,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-medium-item .e-btn,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-small-item .e-btn,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-item .e-btn,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-item .e-dropdown-btn {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    gap: 0.15rem !important;
    line-height: 1.1 !important;
}

.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-labeled-item .e-btn-icon,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-large-item .e-btn-icon,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-item .e-btn-icon {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-labeled-item .e-btn-text,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-large-item .e-btn-text,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-item .e-btn-text,
.lens-ifc-ribbon-shell .lens-ifc-ribbon .e-ribbon-item .e-dropdown-btn .e-btn-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.1 !important;
}

/* Icons + text — ensure Syncfusion large items show both label and glyph */
.lens-ifc-ribbon-shell.lens-ribbon-display-both #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-btn-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-both #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-item-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-both #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-label,
.lens-ifc-ribbon-shell.lens-ribbon-display-both #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-text {
    display: inline !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.lens-ifc-ribbon-shell.lens-ribbon-display-both #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-btn-icon:not(.e-caret) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.lens-ifc-ribbon-shell.lens-ribbon-display-both #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-group-header {
    display: block !important;
}

.lens-ifc-ribbon-shell.lens-ribbon-display-both .lens-ifc-ribbon .e-ribbon-labeled-item,
.lens-ifc-ribbon-shell.lens-ribbon-display-both .lens-ifc-ribbon .e-ribbon-large-item {
    min-height: 2.35rem !important;
    gap: 0.1rem !important;
}

/* Icons only (gear-tab settings group always shows both) */
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-item .e-btn-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-labeled-item .e-btn-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-large-item .e-btn-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-medium-item .e-btn-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-small-item .e-btn-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-item .e-dropdown-btn .e-btn-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-label,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-text,
.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-item-text {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lens-ifc-ribbon-shell.lens-ribbon-display-icons #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-group-header {
    display: none !important;
}

/* Text only (gear-tab settings group always shows both) */
.lens-ifc-ribbon-shell.lens-ribbon-display-text #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-item .e-btn-icon:not(.e-caret),
.lens-ifc-ribbon-shell.lens-ribbon-display-text #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-labeled-item .e-btn-icon:not(.e-caret),
.lens-ifc-ribbon-shell.lens-ribbon-display-text #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-large-item .e-btn-icon:not(.e-caret),
.lens-ifc-ribbon-shell.lens-ribbon-display-text #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-medium-item .e-btn-icon:not(.e-caret),
.lens-ifc-ribbon-shell.lens-ribbon-display-text #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-small-item .e-btn-icon:not(.e-caret),
.lens-ifc-ribbon-shell.lens-ribbon-display-text #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-item .e-dropdown-btn .e-btn-icon:not(.e-caret) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lens-ifc-ribbon-shell.lens-ribbon-display-text #lens-ifc-viewer-ribbon .e-ribbon-group:not(.lens-ifc-ribbon-settings-group) .e-ribbon-group-header {
    display: none !important;
}