/* Viewer3D UI Styles */

/*
 * Viewer UI responsive breakpoint (single source of truth).
 * CSS does not allow var() in @container, so keep the value below in sync with the @container rules.
 */
.viewer3DUI {
    overflow: visible;
    /* The breakpoint measures the viewer, not the viewport - it shrinks while the Babylon Inspector is open. */
    container-type: inline-size;

    --viewer3d-bp-narrow: 900px; /* below this the bottom edge can't hold all three toolbars */

    --viewer3d-slider-col: 7.5rem; /* shared length of every slider on a settings pane */
    --viewer3d-pane-content: 19rem; /* 20rem flyout panel less its 0.5rem padding either side */
}

/* Panel Styles */
/* Matches the Blazor split-button-card look (customStyles.css) - a crisp border instead of a
   drop shadow, so JS-built toolbars read as the same family as the Blazor ones. */
.viewer3d-panel {
    background: #ffffff;
    border: 1px solid #A9A9A9;
    border-radius: 6px;
    box-shadow: none;
    min-width: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.viewer3d-panel-internal {
    visibility: inherit;
    background: inherit;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/*    margin-bottom: 5px;*/
}

.viewer3d-panel-content {
    padding: 8px 0;
}

.viewer3d-panel-footer {
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 12px 16px;
    margin: 16px -16px -16px -16px;
    border-radius: 0 0 8px 8px;
}

.viewer3d-panel-collapsed {
    max-height: 50px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.viewer3d-panel-expanded {
    max-height: none;
    transition: max-height 0.3s ease;
}

.viewer3d-panel-floating {
    position: absolute;
    z-index: 1000;
    min-width: 250px;
    max-width: 400px;
}

.viewer3d-panel-docked {
    position: relative;
    flex: 1;
    margin: 0;
}

/* Viewpoint panel - centred on the bottom edge, between the two corner toolbars. */
.viewer3d-viewpoint-panel {
    /* Fixed minimum: the panel is never narrower than the controls it holds. They are
       icon-sized already, so letting flex squeeze them only pushes the icons out of their
       buttons - the panel changes shape instead, see the narrow-viewer rules below. */
    min-width: max-content;
}

.viewer3d-viewpoint-panel > * {
    flex-shrink: 0;
}

/*
 * Narrow viewer.
 *
 * The bottom edge normally carries three panels: the bottom-left toolbar (11rem, pinned to
 * the corner), the centred viewpoint panel (28.25rem) and the bottom-right toolbar (3.5rem).
 * Since the viewpoint panel is centred it loses the deeper corner's width at *both* ends, so
 * the row needs ~870px of viewer to survive. Below the breakpoint they swap places instead of
 * competing for the middle: the bottom-left toolbar moves up to the top edge, and the
 * viewpoint panel drops into the corner it vacated, wrapped onto two rows.
 */
@container (max-width: 900px) { /* --viewer3d-bp-narrow */

    .viewer3d-viewpoint-panel {
        flex-wrap: wrap;
        justify-content: center;
        /* 16rem holds the four navigation controls (prev / view / cogwheel / next = 14.5rem)
           on the first row and pushes the mode toggle + add/delete onto a second one. */
        min-width: 16rem;
        max-width: 16rem;
        /* Into the bottom-left corner the toolbar just left, so nothing has to be centred
           around the corners any more. Undoes the left: 50% / translateX(-50%) centring. */
        left: 1rem !important;
        transform: none !important;
    }

    /* Positions are inline styles from createDynamicPanel's options, hence !important. */
    .viewer3d-toolbar-bottom-left,
    .viewer3d-toolbar-bottom-left-flyout {
        bottom: auto !important;
        /* Clear of the top-left select-mode button: it sits at 1rem and is ~2.625rem wide (a
           single flush 2.5rem button plus its 1px border) now that panels/buttons carry no
           padding, so 4.25rem leaves the same 0.5rem gap the bottom-right toolbar and mouse
           toggle use, without wasting the extra space the old, padded button size needed. */
        left: 4.25rem !important;
    }

    .viewer3d-toolbar-bottom-left {
        top: 1rem !important;
    }

    /* Flyouts open downwards from under the toolbar rather than upwards from above it. 4.25rem
       mirrors the clearance the toolbar itself has over the top edge. */
    .viewer3d-toolbar-bottom-left-flyout {
        top: 4.25rem !important;
    }

    /* The read-only shared viewer builds no select-mode button (nor a share button), so up
       there the corner is free and the toolbar takes it. */
    .viewer3DUI:not(:has(> #topLeft)) .viewer3d-toolbar-bottom-left,
    .viewer3DUI:not(:has(> #topLeft)) .viewer3d-toolbar-bottom-left-flyout {
        left: 1rem !important;
    }
}

/* Button Styles */
.viewer3d-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #ffffff;
    color: rgba(0, 0, 0, 0.537);
    font-size: 24px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}

.viewer3d-btn-col-start {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.viewer3d-btn-col-end {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.viewer3d-btn-row-start {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.viewer3d-btn-row-end {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.viewer3d-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: transparent;
}

.viewer3d-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.viewer3d-btn-primary {
    background: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

.viewer3d-btn-primary:hover {
    background: #0056b3;
    border-color: #0056b3;
}

.viewer3d-btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.viewer3d-btn-secondary:hover {
    background: #545b62;
    border-color: #545b62;
}

.viewer3d-btn-success {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

.viewer3d-btn-success:hover {
    background: #1e7e34;
    border-color: #1e7e34;
}

.viewer3d-btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.viewer3d-btn-danger:hover {
    background: #c82333;
    border-color: #c82333;
}

.viewer3d-btn-warning {
    background: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.viewer3d-btn-warning:hover {
    background: #e0a800;
    border-color: #e0a800;
}

.viewer3d-btn-info {
    background: #17a2b8;
    border-color: #17a2b8;
    color: #ffffff;
}

.viewer3d-btn-info:hover {
    background: #138496;
    border-color: #138496;
}

.viewer3d-btn-small {
    padding: 4px 12px;
    font-size: 12px;
    min-height: 28px;
}

.viewer3d-btn-large {
    padding: 12px 24px;
    font-size: 16px;
    min-height: 48px;
}

.viewer3d-btn-icon {
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
}

.viewer3d-btn-icon-only {
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
}

.viewer3d-btn-disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.viewer3d-btn-disabled .material-symbols-outlined {
    opacity: 0.45;
}

.viewer3d-btn-inactive,
.viewer3d-btn:disabled {
    cursor: not-allowed;
    color: rgba(0, 0, 0, 0.35);
}

.viewer3d-btn-inactive .material-symbols-outlined,
.viewer3d-btn:disabled .material-symbols-outlined {
    opacity: 0.45;
}

.viewer3d-dropdown-main-button.viewer3d-btn-inactive,
.viewer3d-dropdown-main-button:disabled {
    color: rgba(0, 0, 0, 0.35) !important;
    cursor: not-allowed;
}

.viewer3d-btn-loading {
    position: relative;
    color: transparent;
}

.viewer3d-btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* viewer3d.setXrCover: between the canvas (and its z-index 100 overlay) and #viewer3DUI (1000). */
.viewer3d-xr-cover {
    position: absolute;
    inset: 0;
    z-index: 500;
    background: #ffffff;
}

/* The VR button while a session starts or ends (viewer3DUI.misc.setVrState). */
.viewer3d-btn-busy .viewer3d-icon-tint {
    animation: spin 1s linear infinite;
}

/* Button Groups */
.viewer3d-btn-group {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
}

.viewer3d-btn-group .viewer3d-btn {
    border-radius: 0;
    margin: 0;
    border-right: none;
}

.viewer3d-btn-group .viewer3d-btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.viewer3d-btn-group .viewer3d-btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-right: 1px solid #d0d0d0;
}

.viewer3d-btn-group .viewer3d-btn-primary:last-child {
    border-right-color: #007bff;
}

.viewer3d-btn-group .viewer3d-btn-secondary:last-child {
    border-right-color: #6c757d;
}


/* Item Container Styles */
.viewer3d-item-container {
/*    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0; 
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;*/
}

.viewer3d-save-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 4px;
    /*padding: 4px;*/
}

/* Make vertical slider - minimal change */
.viewer3d-slider.viewer3d-slider-vertical {
    writing-mode: vertical-lr;
    height: 100%;
    width: 6px;
}

/* Slider Styles */
/* .viewer3d-slider-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
} */

.viewer3d-slider-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viewer3d-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #d0d0d0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/*
 * Shared column layout for every control row, so labels line up on the left and the sliders
 * are all the same length and flush to the right regardless of what else shares the row.
 * The width override beats the labels' legacy inline 15rem, which otherwise makes each
 * slider a different length depending on its row's other contents.
 */
.viewer3d-save-container > .viewer3d-slider-label,
.viewer3d-save-container > .viewer3d-color-label {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

.viewer3d-save-container > .viewer3d-slider {
    flex: 0 0 var(--viewer3d-slider-col);
    width: var(--viewer3d-slider-col);
}

/* Centred in the pane, on the same x for every row: pinned to the right edge it reads as
   detached from its label. 9px is half the checkbox. */
.viewer3d-save-container > .viewer3d-checkbox {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: calc(var(--viewer3d-pane-content) / 2 - 9px);
}

/* Sliders and colour swatches carry their own disabled state; the label beside them has to
   follow it, and a disabled swatch is hidden outright so it doesn't look clickable. */
.viewer3d-save-container:has(> .viewer3d-slider:disabled) > .viewer3d-slider-label {
    color: rgba(0, 0, 0, 0.35);
}

.viewer3d-save-container:has(> .viewer3d-color-picker:disabled) {
    visibility: hidden;
}

.viewer3d-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mud-palette-error, rgb(225, 9, 21));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.viewer3d-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mud-palette-error, rgb(225, 9, 21));
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.viewer3d-slider::-webkit-slider-track {
    background: #d0d0d0;
    border-radius: 3px;
    height: 6px;
}

.viewer3d-slider::-moz-range-track {
    background: #d0d0d0;
    border-radius: 3px;
    height: 6px;
}

.viewer3d-slider:focus {
    outline: none;
}

.viewer3d-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(225, 9, 21, 0.25);
}

.viewer3d-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(225, 9, 21, 0.25);
}

/* Disabled slider styles */
.viewer3d-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.viewer3d-slider:disabled::-webkit-slider-thumb {
    opacity: 0.5;
    cursor: not-allowed;
}

.viewer3d-slider:disabled::-moz-range-thumb {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Disabled color picker styles */
.viewer3d-color-picker:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.viewer3d-slider-value {
    font-size: 12px;
    font-weight: 600;
    color: #007bff;
    text-align: center;
    background: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    min-width: 40px;
    display: inline-block;
}

/* Slider variants */
/* .viewer3d-slider-container.viewer3d-slider-primary .viewer3d-slider::-webkit-slider-thumb {
    background: #007bff;
}

.viewer3d-slider-container.viewer3d-slider-success .viewer3d-slider::-webkit-slider-thumb {
    background: #28a745;
}

.viewer3d-slider-container.viewer3d-slider-warning .viewer3d-slider::-webkit-slider-thumb {
    background: #ffc107;
}

.viewer3d-slider-container.viewer3d-slider-danger .viewer3d-slider::-webkit-slider-thumb {
    background: #dc3545;
}

.viewer3d-slider-container.viewer3d-slider-info .viewer3d-slider::-webkit-slider-thumb {
    background: #17a2b8;
} */

/* Checkbox Styles */
/* .viewer3d-checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
} */

/* Drawn rather than native so it matches the MudCheckBox look: grey fill, white tick. */
.viewer3d-checkbox {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.54);
    border-radius: 3px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.viewer3d-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 40%; /* the rotated tick's optical centre sits below its geometric one */
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.viewer3d-checkbox-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    user-select: none;
    margin-bottom: 4px;
}

.viewer3d-checkbox:focus,
.viewer3d-checkbox:focus-visible {
    outline: none;
}

/* Transparent border, not the same grey again: the translucent border would otherwise stack
   over the translucent fill and read as a near-black ring. */
.viewer3d-checkbox:checked {
    background: rgba(0, 0, 0, 0.54);
    border-color: transparent;
}

.viewer3d-checkbox:disabled {
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.26);
}

.viewer3d-checkbox:disabled:checked {
    background: rgba(0, 0, 0, 0.26);
    border-color: transparent;
}

/* Checkbox variants */
/* .viewer3d-checkbox-container.viewer3d-checkbox-primary .viewer3d-checkbox {
    accent-color: #007bff;
}

.viewer3d-checkbox-container.viewer3d-checkbox-success .viewer3d-checkbox {
    accent-color: #28a745;
}

.viewer3d-checkbox-container.viewer3d-checkbox-warning .viewer3d-checkbox {
    accent-color: #ffc107;
}

.viewer3d-checkbox-container.viewer3d-checkbox-danger .viewer3d-checkbox {
    accent-color: #dc3545;
}

.viewer3d-checkbox-container.viewer3d-checkbox-info .viewer3d-checkbox {
    accent-color: #17a2b8;
}

/* Disabled state */
.viewer3d-checkbox-container.viewer3d-checkbox-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.viewer3d-checkbox-container.viewer3d-checkbox-disabled .viewer3d-checkbox {
    cursor: not-allowed;
}

.viewer3d-checkbox-container.viewer3d-checkbox-disabled .viewer3d-checkbox-label {
    cursor: not-allowed;
}

/* Color Picker Styles */
/* .viewer3d-color-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
} */

.viewer3d-color-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
}

/* Every swatch is the same fixed size, whatever its row is wide. */
.viewer3d-save-container > .viewer3d-color-picker {
    flex: 0 0 3rem;
    width: 3rem;
}

/* The border is on the input itself so a white swatch still reads as a control. */
.viewer3d-color-picker {
    width: 100%;
    height: 100%;
    border: 1px solid #A9A9A9;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    padding: 2px;
}

.viewer3d-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    border-radius: 2px;
}

.viewer3d-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

.viewer3d-color-picker::-moz-color-swatch {
    border: none;
    border-radius: 2px;
}

.viewer3d-color-preview {
    width: 100%;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.viewer3d-color-value {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-align: center;
    font-family: 'Courier New', monospace;
    background: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    min-width: 60px;
    display: inline-block;
}

.viewer3d-color-picker:focus,
.viewer3d-color-picker:focus-visible {
    outline: none;
}

/* Color picker variants */
/* .viewer3d-color-container.viewer3d-color-primary .viewer3d-color-value {
    color: #007bff;
}

.viewer3d-color-container.viewer3d-color-success .viewer3d-color-value {
    color: #28a745;
}

.viewer3d-color-container.viewer3d-color-warning .viewer3d-color-value {
    color: #ffc107;
}

.viewer3d-color-container.viewer3d-color-danger .viewer3d-color-value {
    color: #dc3545;
}

.viewer3d-color-container.viewer3d-color-info .viewer3d-color-value {
    color: #17a2b8;
}

/* Disabled state */
.viewer3d-color-container.viewer3d-color-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.viewer3d-color-container.viewer3d-color-disabled .viewer3d-color-picker {
    cursor: not-allowed;
}

/* Collapsible Panel Styles */
.viewer3d-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
/*    margin: -16px -16px 16px -16px;*/
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}

.viewer3d-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.viewer3d-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.viewer3d-collapse-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.viewer3d-collapse-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.viewer3d-collapse-btn .material-symbols-outlined {
    font-size: 20px;
    color: #666;
    transition: transform 0.2s ease;
}

.viewer3d-panel-content-wrapper {
    transition: all 0.3s ease;
}

.viewer3d-panel-collapsed .viewer3d-panel-content-wrapper {
    display: none;
}

.viewer3d-panel-collapsed .viewer3d-collapse-btn .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Card-style panel header (matches MudCardHeader on the Blazor panels: title left, icon
   actions right). The negative margins cancel the flyout panel's own 0.5rem padding so the
   header sits flush against the panel border. */
.viewer3d-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 3rem;
    padding: 0 0.25rem 0 0.75rem;
    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
    background: #ffffff;
    border-radius: 6px 6px 0 0;
}

/* Matches MudText Typo.subtitle1, the Layers panel header. */
.viewer3d-card-header-title,
.viewer3d-dialog-title {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.00938em;
    color: #333;
    white-space: nowrap;
}

.viewer3d-card-header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Sized like a medium MudIconButton: 24px glyph + 8px padding. */
.viewer3d-card-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.537);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.viewer3d-card-header-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* A light's delete button stays visible but disabled at the one-light floor, rather than
   disappearing outright - shows the action exists without letting the layout shift. */
.viewer3d-card-header-btn:disabled {
    color: rgba(0, 0, 0, 0.26);
    cursor: default;
}

.viewer3d-card-header-btn:disabled:hover {
    background-color: transparent;
}

.viewer3d-card-header-btn .material-symbols-outlined {
    font-size: 24px;
    line-height: 1;
}

/* Tab strip on a settings pane. Matches the Blazor properties window's tabs: an equal share of the
   pane each, a bottom rule across the strip and the active tab's own rule in the accent red over it.
   The negative margins cancel the pane's 0.5rem padding so the rule spans the full width. */
.viewer3d-tab-bar {
    display: flex;
    margin: 0 -0.5rem 0.5rem -0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.viewer3d-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: rgba(0, 0, 0, 0.537);
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.viewer3d-tab:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.viewer3d-tab.active {
    color: #333;
    border-bottom-color: var(--mud-palette-error, rgb(225, 9, 21));
}

.viewer3d-tab-stack {
    display: grid;
    visibility: inherit;
}

/* Stacked, not hidden: an inactive tab still occupies the cell, which is what holds the pane at the
   height of its tallest tab. visibility (rather than display) is what the panels inside inherit. */
.viewer3d-tab-content {
    grid-area: 1 / 1;
    visibility: hidden;
}

.viewer3d-tab-content.active {
    visibility: inherit;
}

/* Dialogs. Text colour is set once on the content panel and inherited, so the title, the
   section labels and the wall rows all read as the same grey as the rest of the app. */
.viewer3d-dialog-content {
    color: rgba(0, 0, 0, 0.537);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.viewer3d-dialog-title {
    margin: 0 0 1rem 0;
}

.viewer3d-dialog-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius: 3px;
    font-size: 13px;
    user-select: none;
}

.viewer3d-dialog-confirm,
.viewer3d-dialog-cancel {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 14px;
}

.viewer3d-dialog-confirm {
    background: var(--mud-palette-primary, rgb(92, 92, 92));
    border: 1px solid var(--mud-palette-primary, rgb(92, 92, 92));
    color: #ffffff;
}

.viewer3d-dialog-confirm:hover {
    background: var(--mud-palette-primary-darken, rgb(70, 70, 70));
    border-color: var(--mud-palette-primary-darken, rgb(70, 70, 70));
}

.viewer3d-dialog-cancel {
    background: #ffffff;
    border: 1px solid #ddd;
}

/* Toggle Group Styles */
.viewer3d-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.viewer3d-toggle-buttons-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
}

.viewer3d-toggle-group-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.viewer3d-toggle-button {
    flex: 1;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin: 2px 0;
    min-width: 0;
}

.viewer3d-toggle-button:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.viewer3d-toggle-button.selected {
    background: #007bff;
    color: #ffffff;
    border-color: #007bff;
}

.viewer3d-toggle-button.selected:hover {
    background: #0056b3;
    border-color: #0056b3;
}

/* Disabled toggle button styles */
.viewer3d-toggle-button.disabled,
.viewer3d-toggle-button:disabled {
    cursor: not-allowed;
    background: #f5f5f5;
    color: #999;
    border-color: #ddd;
}

.viewer3d-toggle-button.disabled .material-symbols-outlined,
.viewer3d-toggle-button:disabled .material-symbols-outlined {
    opacity: 0.45;
}

.viewer3d-toggle-button.disabled:hover,
.viewer3d-toggle-button:disabled:hover {
    background: #f5f5f5;
    color: #999;
    border-color: #ddd;
}

.viewer3d-toggle-button.disabled.selected,
.viewer3d-toggle-button:disabled.selected {
    background: #ccc;
    color: #666;
    border-color: #ccc;
}

.viewer3d-toggle-button.disabled.selected:hover,
.viewer3d-toggle-button:disabled.selected:hover {
    background: #ccc;
    color: #666;
    border-color: #ccc;
}

/* Inline (label-before-buttons) toggle group, themed like the Blazor toolbar button groups:
   joined buttons, red outline + red text when selected, grey fill on hover. */
.viewer3d-toggle-group-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Matches .viewer3d-save-container so the label lines up with the slider labels. */
    margin: 4px;
}

.viewer3d-toggle-group-inline .viewer3d-toggle-group-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.viewer3d-toggle-buttons-grouped {
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0;
    border: 1px solid #A9A9A9;
    border-radius: 6px;
}

.viewer3d-toggle-buttons-grouped .viewer3d-toggle-button {
    margin: 0;
    padding: 4px 12px;
    background: #ffffff;
    border: none;
    border-radius: 0;
    color: #333;
}

/* Icon variant: the inline width/height are the whole button, so no text padding on top. */
.viewer3d-toggle-buttons-grouped .viewer3d-toggle-button-icon {
    box-sizing: border-box;
    padding: 0;
}

/*
 * End caps and dividers hang off the container's direct children, not off the buttons: a
 * button with a tooltip is wrapped in a tooltip host, so :first-child/:last-child and the
 * sibling combinator would only ever see one button per wrapper.
 */
.viewer3d-toggle-buttons-grouped > * {
    flex: 0 0 auto;
}

.viewer3d-toggle-buttons-grouped > *:first-child,
.viewer3d-toggle-buttons-grouped > *:first-child .viewer3d-toggle-button {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.viewer3d-toggle-buttons-grouped > *:last-child,
.viewer3d-toggle-buttons-grouped > *:last-child .viewer3d-toggle-button {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.viewer3d-toggle-buttons-grouped > * + * {
    border-left: 1px solid #A9A9A9;
}

.viewer3d-toggle-buttons-grouped .viewer3d-toggle-button:hover {
    background: #e0e0e0;
    border-color: #A9A9A9;
}

/* Selected treatment lives in customStyles.css (.viewer3d-toggle-button.selected). */

/* Animation for smooth collapse/expand */
.viewer3d-panel-content-wrapper {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.viewer3d-panel-collapsed .viewer3d-panel-content-wrapper {
    max-height: 0;
    opacity: 0;
}

.viewer3d-panel:not(.viewer3d-panel-collapsed) .viewer3d-panel-content-wrapper {
    max-height: 500px; /* Adjust based on your content */
    opacity: 1;
}

/* Make UI elements clickable while allowing panning through empty areas */
.viewer3d-btn,
.viewer3d-panel,
.viewer3d-slider,
.viewer3d-checkbox,
.viewer3d-color-picker,
.viewer3d-toggle-group,
.viewer3d-toggle-button,
.viewer3d-save-container {
    pointer-events: auto;
}

/* Ensure panels and their children are clickable */
.viewer3d-panel * {
    pointer-events: auto;
}

/* Make sure buttons and interactive elements work */
.viewer3d-btn *,
.viewer3d-slider *,
.viewer3d-checkbox *,
.viewer3d-color-picker * {
    pointer-events: auto;
}

/* Dropdown Styles */
.viewer3d-dropdown-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 7rem;
    min-width: 7rem;
    max-width: 7rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.viewer3d-dropdown-label {
    font-size: 14px;
    font-weight: 500;
    display: block;
    color: rgba(0, 0, 0, 0.87);
    margin-bottom: 4px;
}

.viewer3d-dropdown-button-container {
    display: flex;
    border: none;
    border-radius: 4px;
    background: transparent;
    overflow: hidden;
    box-shadow: none;
    transition: none;
    width: 7rem;
    min-width: 7rem;
    max-width: 7rem;
}

.viewer3d-dropdown-button-container:hover {
    border: none;
    box-shadow: none;
}

.viewer3d-dropdown-main-button {
    flex: 1;
    border: none !important;
    background: #ffffff !important;
    color: rgba(0, 0, 0, 0.87) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: left !important;
    width: 7rem;
    height: 36px;
    min-width: 7rem;
    max-width: 7rem;
    min-height: 36px;
    max-height: 36px;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 8px 16px !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer3d-dropdown-main-button:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: transparent !important;
}

.viewer3d-dropdown-main-button:focus {
    background: rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}

.viewer3d-dropdown-main-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.viewer3d-dropdown-arrow-button {
    border: none !important;
    background: #ffffff !important;
    color: rgba(0, 0, 0, 0.537) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    min-width: 36px;
    padding: 8px !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

.viewer3d-dropdown-arrow-button:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: transparent !important;
}

.viewer3d-dropdown-arrow-button:focus {
    background: rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}

.viewer3d-dropdown-arrow-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.viewer3d-dropdown-arrow-button .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.viewer3d-dropdown-list {
    position: absolute;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    max-height: 200px;
    overflow-y: auto;
}

.viewer3d-dropdown-list-down {
    top: 100%;
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-top: -1px;
}

.viewer3d-dropdown-list-up {
    bottom: 100%;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
}

.viewer3d-dropdown-item {
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    min-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer3d-dropdown-item:last-child {
    border-bottom: none;
}

.viewer3d-dropdown-item:hover,
.viewer3d-dropdown-item.hover {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.87);
}

.viewer3d-dropdown-item:active {
    background: rgba(0, 0, 0, 0.12);
}

/* Ensure dropdown elements are clickable */
.viewer3d-dropdown-container * {
    pointer-events: auto;
}

/* Tooltips */
.viewer3d-tooltip-host {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    vertical-align: top;
    pointer-events: auto;
}

.viewer3d-has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 3000;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(55, 55, 55, 0.96);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.viewer3d-tooltip-host.viewer3d-has-tooltip.viewer3d-tooltip-visible::after {
    opacity: 1;
    visibility: visible;
}

/* --viewer3d-tooltip-shift is set per-host on hover (resolveShift) to keep a centred
   tooltip on a corner button from hanging off the window edge. */
.viewer3d-has-tooltip[data-tooltip-placement="top"]::after {
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(calc(-50% + var(--viewer3d-tooltip-shift, 0px)));
}

.viewer3d-has-tooltip[data-tooltip-placement="bottom"]::after {
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(calc(-50% + var(--viewer3d-tooltip-shift, 0px)));
}

.viewer3d-has-tooltip[data-tooltip-placement="left"]::after {
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}

.viewer3d-has-tooltip[data-tooltip-placement="right"]::after {
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}

.viewer3d-panel,
.viewer3d-toggle-buttons-container,
.viewer3d-tooltip-host {
    overflow: visible;
}

/* Loaded .svgs */
.viewer3d-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .viewer3d-icon img,
    .viewer3d-icon svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .viewer3d-icon .material-symbols-outlined {
        font-size: 24px;
        line-height: 1;
    }

    /* factory.createSvgIcon's tint option: the SVG's shape, painted in the button's currentColor. */
    .viewer3d-icon .viewer3d-icon-tint {
        width: 24px;
        height: 24px;
        display: block;
        background-color: currentColor;
        -webkit-mask: var(--viewer3d-icon) center / contain no-repeat;
        mask: var(--viewer3d-icon) center / contain no-repeat;
    }