/* _content/Lib360.Shared/Components/CustomReconnectingOverlay.razor.rz.scp.css */
/* Simple square loader */
.simple-loader[b-itlromtli6] {
    display: inline-block;
    width: 60px;
    height: 60px;
    position: relative;
    border: 6px solid #dc3545;
    animation: loader-b-itlromtli6 2s infinite ease;
    background: white;
    overflow: hidden;
}

.simple-loader .loader-text[b-itlromtli6] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    color: white;
    font-weight: bold;
    font-size: 26px;
    z-index: 2;
    pointer-events: none;
    animation: text-counter-rotate-b-itlromtli6 2s infinite ease;
}

.simple-loader .loader-inner[b-itlromtli6] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #dc3545;
    animation: loader-inner-b-itlromtli6 2s infinite ease-in;
    z-index: 1;
}

@keyframes loader-b-itlromtli6 {
    0% {
        transform: rotate(0deg);
    }
    
    25% {
        transform: rotate(180deg);
    }
    
    50% {
        transform: rotate(180deg);
    }
    
    75% {
        transform: rotate(360deg);
    }
    
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loader-inner-b-itlromtli6 {
    0% {
        height: 0%;
    }
    
    25% {
        height: 0%;
    }
    
    50% {
        height: 100%;
    }
    
    75% {
        height: 100%;
    }
    
    100% {
        height: 0%;
    }
}

@keyframes text-counter-rotate-b-itlromtli6 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    
    25% {
        transform: translate(-50%, -50%) rotate(-180deg);
    }
    
    50% {
        transform: translate(-50%, -50%) rotate(-180deg);
    }
    
    75% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
    
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* _content/Lib360.Shared/Components/Dashboard/Components/ProjectTable.razor.rz.scp.css */
/* MudTable is a child component, so most rules below need ::deep to reach into its markup.
   The host/body/footer wrapper elements are authored directly here though, and take plain
   scoped selectors like any other element in this component's own template. */
.project-table-host[b-c51vyc9w5l] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.project-table-body[b-c51vyc9w5l] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.project-table-host[b-c51vyc9w5l]  .project-table {
    animation: fade-in-b-c51vyc9w5l 0.5s ease-out;
    height: 100%;
}

.project-table-footer[b-c51vyc9w5l] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    height: 50px;
    padding: 8px 16px;
    box-sizing: border-box;
    background-color: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-table-lines);
}

.project-table-footer-count[b-c51vyc9w5l] {
    color: var(--mud-palette-text-primary);
    font-size: 14px;
}

.project-table-footer-nav[b-c51vyc9w5l] {
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes fade-in-b-c51vyc9w5l {
    from { opacity: 0; }
}

/* The leading columns don't scale with density - only row height and padding do. The spaces
   table's preview column reuses the arrow width so the thumbnail tracks the project icon. */
[b-c51vyc9w5l] .project-table {
    --project-table-grab-width: 25px;
    --project-table-select-width: 40px;
    --project-table-arrow-width: 40px;
    --project-table-arrow-pad: 5px;
    /* The icon is centred in its column, so its centre sits at half the column width in from
       either edge, regardless of density. */
    --project-table-icon-center-inset: calc(var(--project-table-arrow-width, 40px) / 2);
}

/* Default: former compact density (Mud Dense + 50px rows) */
[b-c51vyc9w5l] .project-table.project-table--default {
    --project-table-row-height: 50px;
    --project-table-header-height: 50px;
    --project-table-btn-padding: 8px;
    --project-table-cell-padding-block: 6px;
    --project-table-cell-padding-inline: 16px;
    --project-table-preview-size: 30px;
}

/* Dense: tight row height; controls scaled via rules below */
[b-c51vyc9w5l] .project-table.project-table--dense {
    --project-table-row-height: 22px;
    --project-table-header-height: 22px;
    --project-table-btn-padding: 0px;
    --project-table-cell-padding-block: 0px;
    --project-table-cell-padding-inline: 6px;
    --project-table-control-size: 22px;
    --project-table-arrow-pad: 2px;
    --project-table-preview-size: 16px;
}

/* Medium: dense controls, roomier rows. Applied on top of --dense. */
[b-c51vyc9w5l] .project-table.project-table--medium {
    --project-table-row-height: 34px;
    --project-table-header-height: 34px;
    --project-table-btn-padding: 2px;
    --project-table-cell-padding-block: 4px;
    --project-table-cell-padding-inline: 10px;
    --project-table-control-size: 24px;
    --project-table-preview-size: 22px;
}

[b-c51vyc9w5l] .project-table .mud-table-cell {
    padding-block: var(--project-table-cell-padding-block);
    padding-inline: var(--project-table-cell-padding-inline);
}

/* !important, scoped to :last-child only: MudBlazor's own dense-mode stylesheet has a
   same-specificity `.mud-table-cell:last-child` rule that otherwise wins the cascade tie
   by load order, pinning the last cell's right padding to 16px regardless of density and
   breaking its alignment with the spaces-table's last cell below it. Scoping to :last-child
   keeps this from also clobbering the leading columns' own !important padding (arrow-td,
   select-td, grab-handle-td, space-preview-cell) - none of those are ever the last cell. */
[b-c51vyc9w5l] .project-table .mud-table-cell:last-child {
    padding-block: var(--project-table-cell-padding-block) !important;
    padding-inline: var(--project-table-cell-padding-inline) !important;
}

/* Table Layout - Force fixed column widths */
[b-c51vyc9w5l] .project-table table {
    width: 100% !important;
    max-height: 100%;
    overflow-y: auto;
}

[b-c51vyc9w5l] .project-table {
    max-height: 100%;
    overflow-y: auto;
    /* Reserves the scrollbar's width permanently (e.g. expanding a project's spaces can push
       content past the page-sized height) so columns don't shift left when it appears. */
    scrollbar-gutter: stable;
}

[b-c51vyc9w5l] .project-table > div {
    max-height: 100%;
    overflow-x: unset !important;
    overflow-y: unset !important;
}

[b-c51vyc9w5l] .project-table > div > table {
    max-height: 100%;
    overflow-y: auto;
}

[b-c51vyc9w5l] .project-table thead tr {
    height: var(--project-table-header-height) !important;
}

[b-c51vyc9w5l] .project-table thead .mud-table-cell {
    height: var(--project-table-header-height) !important;
    min-height: var(--project-table-header-height) !important;
    max-height: var(--project-table-header-height) !important;
    overflow: hidden;
    vertical-align: middle;
    box-sizing: border-box;
    padding-block: 0 !important;
    background-color: var(--mud-palette-background-gray) !important;
    border-top: 1px solid var(--mud-palette-table-lines);
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

[b-c51vyc9w5l] .selection-header-toolbar {
    min-height: var(--project-table-header-height);
    max-height: var(--project-table-header-height);
    height: var(--project-table-header-height);
    overflow: hidden;
    padding-inline: var(--project-table-cell-padding-inline) !important;
}

[b-c51vyc9w5l] .selection-header-toolbar .mud-stack {
    height: 100%;
    min-height: 0;
    align-items: center;
}

[b-c51vyc9w5l] .selection-header-toolbar .mud-text {
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

[b-c51vyc9w5l] .selection-header-toolbar .mud-divider-vertical {
    align-self: center;
}

[b-c51vyc9w5l] .project-table.project-table--default .selection-header-toolbar .mud-stack {
    gap: 8px !important;
}

[b-c51vyc9w5l] .project-table.project-table--default .selection-header-toolbar .mud-divider-vertical {
    height: 24px;
    max-height: 24px;
}

[b-c51vyc9w5l] .project-table.project-table--dense .selection-header-toolbar .mud-stack {
    gap: 2px !important;
}

[b-c51vyc9w5l] .project-table.project-table--dense .selection-header-toolbar .mud-text {
    font-size: 11px;
}

[b-c51vyc9w5l] .project-table.project-table--dense .selection-header-toolbar .mud-divider-vertical {
    height: 12px;
    max-height: 12px;
}

[b-c51vyc9w5l] .selection-header-toolbar button {
    padding: var(--project-table-btn-padding) !important;
}

[b-c51vyc9w5l] .project-name-content button {
    padding: var(--project-table-btn-padding) !important;
}

[b-c51vyc9w5l] .modified-text {
    white-space: nowrap;
}

[b-c51vyc9w5l] .action-button-container button {
    padding: var(--project-table-btn-padding) !important;
}

[b-c51vyc9w5l] .space-action-container button {
    padding: var(--project-table-btn-padding) !important;
}

[b-c51vyc9w5l] .more-button {
    padding: var(--project-table-btn-padding) !important;
}

/* Hide placeholder rows from RowTemplate completely */
[b-c51vyc9w5l] .project-table tbody > tr:not(:has(td[colspan])):has(td[style*="display: none"]) {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
}

[b-c51vyc9w5l] .cursor {
    cursor: pointer;
    /* Without this a touch tap that drifts a pixel selects the name text instead of firing @onclick. */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

[b-c51vyc9w5l] .project-name-content .inherited-share-icon {
    padding: 6px !important;
}

[b-c51vyc9w5l] .folder-content .inherited-share-icon {
    padding: 6px !important;
}

/* Header Columns - Fixed Widths */
[b-c51vyc9w5l] .grab-header {
    padding: 0px !important;
    min-height: var(--project-table-header-height);
    height: var(--project-table-header-height);
    width: var(--project-table-grab-width, 25px) !important;
    min-width: var(--project-table-grab-width, 25px) !important;
    max-width: var(--project-table-grab-width, 25px) !important;
}

[b-c51vyc9w5l] .select-header {
    padding: 0px 8px !important;
    min-height: var(--project-table-header-height);
    height: var(--project-table-header-height);
    width: var(--project-table-select-width, 40px) !important;
    min-width: var(--project-table-select-width, 40px) !important;
    max-width: var(--project-table-select-width, 40px) !important;
}

[b-c51vyc9w5l] .expand-header {
    padding: 0px !important;
    min-height: var(--project-table-header-height);
    height: var(--project-table-header-height);
    width: var(--project-table-arrow-width, 40px) !important;
    min-width: var(--project-table-arrow-width, 40px) !important;
    max-width: var(--project-table-arrow-width, 40px) !important;
}

/* Body columns. These classes sit on the <col> in both tables' ColGroup as well as the cells,
   so a column's width has one source and the two tables stay aligned. */
[b-c51vyc9w5l] .grab-handle-td {
    padding: 0px !important;
    width: var(--project-table-grab-width, 25px) !important;
    min-width: var(--project-table-grab-width, 25px) !important;
    max-width: var(--project-table-grab-width, 25px) !important;
    vertical-align: middle;
}

[b-c51vyc9w5l] .grab-handle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: var(--project-table-row-height);
    width: 25px;
    padding-left: 8px;
    box-sizing: border-box;
}

[b-c51vyc9w5l] .row-icon-container {
    display:flex;
    justify-content: center;
}

[b-c51vyc9w5l] .created-col {
    display: none;
}

[b-c51vyc9w5l] .select-td {
    padding: 0px 8px !important;
    width: var(--project-table-select-width, 40px) !important;
    min-width: var(--project-table-select-width, 40px) !important;
    max-width: var(--project-table-select-width, 40px) !important;
}

[b-c51vyc9w5l] .arrow-td {
    padding-left: var(--project-table-arrow-pad, 5px) !important;
    padding-right: var(--project-table-arrow-pad, 5px) !important;
    width: var(--project-table-arrow-width, 40px) !important;
    min-width: var(--project-table-arrow-width, 40px) !important;
    max-width: var(--project-table-arrow-width, 40px) !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

[b-c51vyc9w5l] .arrow-td button {
    padding: var(--project-table-btn-padding) !important;
}

[b-c51vyc9w5l] .hide-on-mobile {
    display: table-cell;
}

@keyframes spin-b-c51vyc9w5l {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

[b-c51vyc9w5l] .draggable-project-row {
    cursor: pointer;
    transition: opacity 0.5s;
    width: 100%;
    transform: translate3d(0, 0, 0);
}

[b-c51vyc9w5l] .draggable-project-row:active {
    cursor: pointer;
}

[b-c51vyc9w5l] .drag-handle {
    opacity: 0.3;
    margin: 0 !important;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    [b-c51vyc9w5l] .draggable-project-row:hover .drag-handle {
        opacity: 1;
    }
}

[b-c51vyc9w5l] .project-name-content {
    display: flex;
    align-items:center;
    gap: 8px;
}

[b-c51vyc9w5l] .spinning-icon .mud-icon-root {
    animation: spin-b-c51vyc9w5l 1s linear infinite;
}

[b-c51vyc9w5l] .action-button-container.force-visible,
[b-c51vyc9w5l] .space-action-container.force-visible {
    opacity: 1 !important;
}

[b-c51vyc9w5l] .project-table tbody tr:has(.action-button-container.force-visible) .action-buttons .action-button-container,
[b-c51vyc9w5l] .spaces-table tbody tr:has(.space-action-container.force-visible) .space-actions .space-action-container {
    opacity: 1;
}

[b-c51vyc9w5l] .space-table-cell {
    padding: 0px !important;
}

[b-c51vyc9w5l] .selected-row {
    background-color: rgba(225, 9, 21, 0.08);
    box-shadow: inset 3px 0 0 0 #e10915;
}

[b-c51vyc9w5l] .project-name-span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

[b-c51vyc9w5l] .folder-name-span {
    white-space: nowrap;
    overflow: hidden;
}

/* Touch devices can't hover; a :hover rule on a click target (or its ancestor) makes iOS need 2 taps: one to hover, one to click. */
@media (hover: hover) {
    [b-c51vyc9w5l] .selected-row:hover {
        background-color: rgba(225, 9, 21, 0.12) !important;
    }

    [b-c51vyc9w5l] .non-select-row:hover .folder-name-span {
        color: #e10915;
    }

    [b-c51vyc9w5l] .project-name-span:hover {
        color: #e10915;
    }

    [b-c51vyc9w5l] .folder-name-span:hover {
        color: #e10915;
    }

    [b-c51vyc9w5l] .space-name-cell:hover .space-name-span {
        color: #e10915;
    }
}

[b-c51vyc9w5l] .project-table tbody tr {
    height: var(--project-table-row-height) !important;
}

[b-c51vyc9w5l] .project-table {
    width: 100%;
}

[b-c51vyc9w5l] .project-table tbody tr td {
    height: var(--project-table-row-height) !important;
    vertical-align: middle;
}

[b-c51vyc9w5l] .project-table.project-table--dense .select-header,
[b-c51vyc9w5l] .project-table.project-table--dense .select-td {
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;
    vertical-align: middle;
    text-align: center;
}

[b-c51vyc9w5l] .project-table.project-table--dense .expand-header {
    padding-inline: var(--project-table-arrow-pad, 5px) !important;
}

[b-c51vyc9w5l] .project-table.project-table--dense .grab-handle-cell {
    width: 18px;
    min-height: 0;
    height: 100%;
    padding-left: 2px;
}

[b-c51vyc9w5l] .project-table.project-table--dense .grab-handle-cell .mud-icon-root {
    font-size: 16px;
    line-height: 1;
}

[b-c51vyc9w5l] .project-table.project-table--dense .project-name-content > .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
    align-self: center;
    line-height: 1;
}

[b-c51vyc9w5l] .project-table.project-table--dense .project-name-content > .mud-tooltip-root .mud-icon-root {
    font-size: 16px;
    line-height: 1;
}

[b-c51vyc9w5l] .project-table.project-table--dense .project-name-content,
[b-c51vyc9w5l] .project-table.project-table--dense .folder-content {
    gap: 2px;
    height: 100%;
    min-height: 0;
}

[b-c51vyc9w5l] .project-table.project-table--dense .project-name-content .inherited-share-icon,
[b-c51vyc9w5l] .project-table.project-table--dense .folder-content .inherited-share-icon,
[b-c51vyc9w5l] .project-table.project-table--dense .project-name-content button.shared-icon,
[b-c51vyc9w5l] .project-table.project-table--dense .folder-content button.shared-icon {
    padding: 0 !important;
}

[b-c51vyc9w5l] .project-table.project-table--dense .mud-icon-button,
[b-c51vyc9w5l] .project-table.project-table--dense .mud-button-root.mud-icon-button {
    width: var(--project-table-control-size);
    height: var(--project-table-control-size);
    min-width: var(--project-table-control-size);
    min-height: var(--project-table-control-size);
    padding: 0;
}

[b-c51vyc9w5l] .project-table.project-table--dense .mud-checkbox {
    margin: 0;
    line-height: 1;
}

[b-c51vyc9w5l] .project-table.project-table--dense .mud-checkbox > .mud-icon-button {
    width: var(--project-table-row-height);
    height: var(--project-table-row-height);
    min-width: var(--project-table-row-height);
    min-height: var(--project-table-row-height);
    padding: 0;
}

[b-c51vyc9w5l] .project-table.project-table--dense .mud-checkbox .mud-icon-button-label {
    padding: 0 !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-c51vyc9w5l] .project-table.project-table--dense .mud-chip {
    height: 18px;
    padding-inline: 4px;
}

[b-c51vyc9w5l] .project-table.project-table--dense .spaces-table .space-preview-cell {
    padding-block: 0 !important;
}

[b-c51vyc9w5l] .project-table.project-table--dense tbody tr td {
    min-height: var(--project-table-row-height) !important;
    max-height: var(--project-table-row-height) !important;
    overflow: hidden;
    padding-block: 0 !important;
}

[b-c51vyc9w5l] .folder-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-c51vyc9w5l] .folder-name-cell {
    font-weight: 500;
    padding-left: 5px !important;
}

[b-c51vyc9w5l] .spaces-container {
    padding: 0 !important;
    background-color: var(--mud-palette-background-grey);
}

[b-c51vyc9w5l] .spaces-table {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 1px;
    background-color: transparent;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* The placeholder leading cells are empty, so auto layout would collapse them; fixed layout
   makes the <col> widths authoritative and keeps this table's indent equal to the parent's. */
[b-c51vyc9w5l] .spaces-table .mud-table-root {
    table-layout: fixed;
}

[b-c51vyc9w5l] .mud-table-root > .mud-table-body:last-child > .mud-table-row:last-child > .mud-table-cell, [b-c51vyc9w5l] .mud-table-root > .mud-table-foot:last-child > .mud-table-row:last-child > .mud-table-cell {
    border-bottom: 1px solid white;
}
[b-c51vyc9w5l] .spaces-table .mud-table-container {
    background-color: transparent;
}

[b-c51vyc9w5l] .spaces-table thead {
    background-color: transparent;
}

[b-c51vyc9w5l] .project-table tbody tr:has(.spaces-container):hover {
    background-color: transparent !important;
}

[b-c51vyc9w5l] .project-table tbody tr:has(.spaces-container):hover td {
    background-color: transparent !important;
}
    
[b-c51vyc9w5l] .spaces-table tbody tr {
    height: var(--project-table-row-height);
    background-color: var(--mud-palette-surface);
}

/* The name cell is left out so it falls through to the same MudBlazor padding the project
   name cell gets - our density rule is a class more specific here than over there, so
   including it would indent space names differently from project names. */
[b-c51vyc9w5l] .project-table .spaces-table .mud-table-cell:not(.space-name-cell) {
    padding-block: var(--project-table-cell-padding-block);
    padding-inline: var(--project-table-cell-padding-inline);
}

[b-c51vyc9w5l] .spaces-table tbody tr:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Padded so the content box is symmetric about the icon's centre line (twice the inset, less
   the column width), which centres the thumbnail under the project icon whatever its width. */
[b-c51vyc9w5l] .space-preview-cell {
    padding-block: 4px !important;
    padding-left: 0 !important;
    padding-right: calc(2 * var(--project-table-icon-center-inset) - var(--project-table-arrow-width, 40px)) !important;
    width: var(--project-table-arrow-width, 40px) !important;
    min-width: var(--project-table-arrow-width, 40px) !important;
    max-width: var(--project-table-arrow-width, 40px) !important;
}

/* MudTooltip's own root is display: inline-block, sized to its content - so it shrinks
   to the SVG's own rendered width and the flex-centering inside SpacePreviewTooltip has
   no extra room to center within. Force that root to fill the cell instead. */
[b-c51vyc9w5l] .space-preview-cell .mud-tooltip-root {
    display: flex;
    width: 100%;
    justify-content: center;
}

[b-c51vyc9w5l] .space-preview-thumb {
    height: var(--project-table-preview-size, 30px);
    padding-top: 2px;
    display: flex;
    justify-content: center;
}

[b-c51vyc9w5l] .space-preview-thumb-svg {
    height: var(--project-table-preview-size, 30px) !important;
}

[b-c51vyc9w5l] .space-name-cell {
    font-weight: 500;
}

[b-c51vyc9w5l] .space-action-container {
    text-align: right;
    transition: opacity 0.1s ease-in-out;
}

[b-c51vyc9w5l] .space-action-spacer {
    visibility: hidden;
    pointer-events: none;
}

[b-c51vyc9w5l] .action-button-container {
    text-align: right;
    white-space: nowrap;
    transition: opacity 0.1s ease-in-out;
}

/* Touch devices can't hover, so keep action buttons visible instead of tap-to-reveal (needs a real pointer, or iOS needs 2 taps: one to hover, one to click). */
@media (hover: hover) {
    [b-c51vyc9w5l] .space-action-container {
        opacity: 0;
    }

    [b-c51vyc9w5l] .spaces-table tbody tr:hover .space-actions .space-action-container {
        opacity: 1;
    }

    [b-c51vyc9w5l] .action-button-container {
        opacity: 0;
    }

    [b-c51vyc9w5l] .project-table tbody tr:hover .action-buttons .action-button-container {
        opacity: 1;
    }
}

[b-c51vyc9w5l] .header {
    font-size: 14px;
    line-height: var(--project-table-header-height);
}

[b-c51vyc9w5l] .project-name-content button.shared-icon {
    padding: 6px !important;
}

[b-c51vyc9w5l] .folder-content button.shared-icon {
    padding: 6px !important;
}

[b-c51vyc9w5l] .shared-item:not(.selected-row) {
    background-color: rgba(33, 150, 243, 0.03) !important;
}

[b-c51vyc9w5l] .shared-item:not(.selected-row) + .space-table-cell .spaces-table tbody tr {
    background-color: rgba(33, 150, 243, 0.03) !important;
}

[b-c51vyc9w5l] .shared-item:not(.selected-row) + .space-table-cell .spaces-table tbody tr {
    background-color: rgba(33, 150, 243, 0.03) !important;
}

@media (hover: hover) {
    [b-c51vyc9w5l] .shared-item:not(.selected-row):hover {
        background-color: rgba(33, 150, 243, 0.08) !important;
    }

    [b-c51vyc9w5l] .shared-item:not(.selected-row) + .space-table-cell .spaces-table tbody tr:hover {
        background-color: rgba(33, 150, 243, 0.08) !important;
    }
}

@media (max-width: 960px) {
    [b-c51vyc9w5l] .hide-on-mobile {
        display: none !important;
    }
    [b-c51vyc9w5l] .project-table {
        min-width: 100%;
    }

    [b-c51vyc9w5l] .project-name-content {
        gap:2px !important;
    }

    [b-c51vyc9w5l] .project-name-content button {
        padding: 4px !important;
    }

    [b-c51vyc9w5l] .space-actions {
        width: 120px;
    }

    [b-c51vyc9w5l] .project-table colgroup {
        display: none;
    }

    [b-c51vyc9w5l] .project-name-column {
        width: auto !important;
    }

    [b-c51vyc9w5l] .folder-name-cell {
        width: auto !important;
    }
    
    [b-c51vyc9w5l] .spaces-table colgroup {
        display: none;
    }

    [b-c51vyc9w5l] .spaces-table tbody tr td:last-child {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    [b-c51vyc9w5l] .space-name-cell {
        width: auto !important;
    }

    [b-c51vyc9w5l] .action-button-container,
    [b-c51vyc9w5l] .space-action-container {
        opacity: 1;
    }
}

@media (max-width: 600px) {
    [b-c51vyc9w5l] .project-table {
        font-size: 0.875rem;
    }
}

[b-c51vyc9w5l] .project-table .mud-checkbox .mud-icon-button.mud-default-text {
    color: var(--mud-palette-text-disabled);
}
/* _content/Lib360.Shared/Components/Dashboard/Pages/Dashboard.razor.rz.scp.css */
.projects-page[b-r7q6xiyx5w] {
    min-height: calc(100dvh - var(--mud-appbar-height));
    height: 100%;
}

[b-r7q6xiyx5w] .dashboard-container {
    height: 100%;
}

[b-r7q6xiyx5w] .dashboard-container > div {
    height: 100%;
}

[b-r7q6xiyx5w] .see-through-area {
    background: transparent;
}

/* MudDrawer positions itself absolutely against this container's height, so the container
   needs a real (not just min-) height for the drawer to size against - otherwise it falls back
   to measuring further up the tree and ends up taller than .dashboard-layout's actual content. */
[b-r7q6xiyx5w] .dashboard-drawer-container {
    display: flex;
    position: relative;
    /* .projects-page/.dashboard-container already resolve to the correct on-screen height
       (100dvh minus the app bar) via the height:100% chain above - re-deriving it here with
       another vh calc (as the old .dashboard-layout rule did) double-subtracted and left a gap. */
    height: 100%;
}

[b-r7q6xiyx5w] .dashboard-layout {
    display: flex;
    flex: 1;
    min-width: 0;
}

[b-r7q6xiyx5w] .dashboard-sidebar {
    background-color: rgba(1,1,1, 0.04);
    border-right: 1.25px solid var(--mud-palette-divider);
    /* The toggle circle deliberately pokes out past this edge - don't let ClipMode clip it too. */
    overflow: visible;
    /* MudBlazor's default drawer z-index (1100) is for temporary/overlay drawers that need to sit
       above page content. This one is ClipMode.Always (permanently docked, never overlays anything),
       so it doesn't need that tier - and keeping it let this drawer's stacking context win out over
       a dialog's scrim in some cases, leaving the sidebar undimmed (and its faint dividers looking
       bright/white by contrast) while a dialog was open. */
    z-index: 1;
}

[b-r7q6xiyx5w] .dashboard-sidebar .mud-drawer-content {
    height: 100%;
}

[b-r7q6xiyx5w] .sidebar-section {
    padding-inline: 4px;
}

[b-r7q6xiyx5w] .sidebar-paper {
    height: 100%;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

[b-r7q6xiyx5w] .content-paper {
    flex: 1;
    min-height: 0px;
}

[b-r7q6xiyx5w] .main-stack-content {
    height: 100%;
}

[b-r7q6xiyx5w] .sidebar-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Floating circle toggle, half-overlapping the drawer's right edge at mid-height - sits above the
   sidebar's own buttons without taking a slot in their layout, so expanding/collapsing never
   shifts them. Static on hover/focus by design - no color, ripple, or elevation change. */
[b-r7q6xiyx5w] .sidebar-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    width: 26px;
    height: 26px;
    padding: 0;
    /* Solid white. (--mud-palette-background-grey does not exist in this theme - verified via
       getComputedStyle, it resolves to an empty string - so a var() referencing it is invalid and
       silently falls back to transparent, which is why earlier attempts stayed transparent.)
       !important: MudBlazor's own .mud-icon-button rule sets a transparent background with two
       combined classes, which otherwise outranks this single-class selector regardless of order. */
    background-color: #fff !important;
    border: 1.25px solid var(--mud-palette-divider);
    box-shadow: none;
    transform: translate(50%, -50%) rotate(var(--rotate, 0deg));
}

[b-r7q6xiyx5w] .sidebar-toggle-btn .mud-icon-root {
    font-size: 1.4rem;
}

[b-r7q6xiyx5w] .sidebar-toggle-btn:hover,
[b-r7q6xiyx5w] .sidebar-toggle-btn:focus,
[b-r7q6xiyx5w] .sidebar-toggle-btn:active {
    background-color: #fff !important;
}

[b-r7q6xiyx5w] .sidebar-toggle-btn .mud-ripple,
[b-r7q6xiyx5w] .sidebar-toggle-btn .mud-icon-button-overlay {
    display: none;
}

/* Desktop sidebar is fixed open - no collapse toggle there. Matches the Lg (1280) cutoff in
   Dashboard.razor.cs's NotifyBrowserViewportChangeAsync. */
@media (min-width: 1280px) {
    [b-r7q6xiyx5w] .sidebar-toggle-btn {
        display: none;
    }
}

[b-r7q6xiyx5w] .breadcrumb-paper {
    width: 100%;
    padding: 2px 2px;
    background-color: var(--mud-palette-surface);
}

[b-r7q6xiyx5w] .breadcrumb-header-stack {
    width: 100%;
}

[b-r7q6xiyx5w] .breadcrumb-trail {
    flex: 1;
    min-width: 0;
}

[b-r7q6xiyx5w] .breadcrumb-current {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

[b-r7q6xiyx5w] .project-count-text {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}

[b-r7q6xiyx5w] .breadcrumb-actions {
    flex-shrink: 0;
    padding-right: 16px;
}

[b-r7q6xiyx5w] .breadcrumb-action-btn.mud-button-root {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 0.75rem;
}

[b-r7q6xiyx5w] .breadcrumb-action-btn .mud-button-icon-start {
    font-size: 1rem;
}

[b-r7q6xiyx5w] .navigation-tree-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px 0;
    border-top: 1px solid var(--mud-palette-divider) !important;
    animation: fade-in-b-r7q6xiyx5w 0.5s ease-out;
}

/* Collapsed sidebar: New Project + top-level destinations, as a vertical icon rail. Gap and
   button height tighten under Dense/Medium the same way ProjectNavigationTree's row gap and
   row height do (see its --nav-item-gap/--nav-item-min-height) - width is left alone so the
   rail's own footprint doesn't shift with density. */
[b-r7q6xiyx5w] .mobile-nav-rail {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 4px 0;
}

[b-r7q6xiyx5w] .mobile-nav-rail.mobile-nav-rail--dense {
    gap: 2px;
}

[b-r7q6xiyx5w] .mobile-nav-rail.mobile-nav-rail--medium {
    gap: 3px;
}

[b-r7q6xiyx5w] .mobile-nav-rail-icon {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

[b-r7q6xiyx5w] .mobile-nav-rail.mobile-nav-rail--dense .mobile-nav-rail-icon {
    height: 22px;
    min-height: 22px;
}

[b-r7q6xiyx5w] .mobile-nav-rail.mobile-nav-rail--medium .mobile-nav-rail-icon {
    height: 30px;
    min-height: 30px;
}

/* Full-width rectangle + left bar, matching the expanded tree's selected-row style
   (ProjectNavigationTree.razor's .mud-treeview-item-selected) rather than the button's own
   round shape. */
[b-r7q6xiyx5w] .mobile-nav-rail-icon.active {
    color: #e10915;
    background-color: rgba(225, 9, 21, 0.08);
    box-shadow: inset 3px 0 0 0 #e10915;
    border-radius: 0;
    align-self: stretch;
}

/* Same two dividers as the expanded tree: one below New Project (its own border-top there),
   one above Shared With Me (ProjectNavigationTree's tree-item-divider-above). A dedicated
   full-width line rather than a border on the icon button itself, which only spanned the
   button's own ~40px and barely read as a divider in a wider rail. */
[b-r7q6xiyx5w] .mobile-nav-rail-divider {
    flex-shrink: 0;
    width: 100%;
    height: 1px;
    margin: 4px 0;
    background-color: var(--mud-palette-divider);
}

[b-r7q6xiyx5w] .sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 8px 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

[b-r7q6xiyx5w] .sidebar-footer-line {
    display: block;
    color: #000;
    line-height: 1.4;
}

@keyframes fade-in-b-r7q6xiyx5w {
    from { opacity: 0; }
}

[b-r7q6xiyx5w] .fade-in {
    animation: fade-in-b-r7q6xiyx5w 0.3s ease-out;
}

[b-r7q6xiyx5w] .content-fade-out {
    animation: fade-out-b-r7q6xiyx5w 0.2s ease-out forwards;
}

@keyframes fade-out-b-r7q6xiyx5w {
    to { opacity: 0; }
}

[b-r7q6xiyx5w] .loading-indicator {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

[b-r7q6xiyx5w] .dashboard-sidebar .project-navigation .mud-treeview {
    padding-left: 0;
}

[b-r7q6xiyx5w] .content-area {
    flex-grow: 1;
    min-width: 0;
    min-height: 0px;
}

[b-r7q6xiyx5w] .empty-state {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

[b-r7q6xiyx5w] .folder-row:where(:not(.selected-row):not(.shared-item)) {
    background-color: var(--mud-palette-background-grey) !important;
    font-weight: 500;
}

/* Touch devices can't hover; a :hover rule on a click target (or its ancestor) makes iOS need 2 taps: one to hover, one to click. */
@media (hover: hover) {
    [b-r7q6xiyx5w] .folder-row:where(:not(.selected-row):not(.shared-item)):hover {
        background-color: var(--mud-palette-action-default-hover) !important;
    }
}

[b-r7q6xiyx5w] .drag-target {
    background-color: rgba(0,100,150,0.1) !important;
    outline: 1px dashed var(--mud-palette-primary);
    outline-offset: -1px;
}


[b-r7q6xiyx5w] .folder-drag-over {
    background-color: rgba(0,100,150,0.2) !important;
    outline: 1px solid var(--mud-palette-primary);
    outline-offset: -1px;
}


@media (max-width: 960px) {
    [b-r7q6xiyx5w] .action-button-container {
        display:none;
    }

    /* Breadcrumb trail, project count and the create-project/subfolder buttons no longer fit in one
       row at this width - wrap them instead of letting the buttons clip off-screen. */
    [b-r7q6xiyx5w] .breadcrumb-header-stack {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    [b-r7q6xiyx5w] .breadcrumb-actions {
        padding-right: 0;
    }
}
/* _content/Lib360.Shared/Components/Layout/AppBar/AppBar.razor.rz.scp.css */
/*
 * App bar responsive breakpoints (single source of truth).
 * CSS does not allow var() in @media, so keep the values below in sync with the @media (max-width: ...) rules.
 */
.appbar-root[b-majty171wh] {
    --appbar-bp-sm: 1275px;            /* small: compact padding, compact tabs */
    --appbar-bp-space-shorten: 1025px; /* when to shorten space name with ellipsis */
    --appbar-bp-space-hide: 950px;     /* when to hide space name entirely */
    --appbar-bp-xs: 850px;             /* very small: smaller logo, hide project button + arrow */
    --appbar-bp-logo-hide: 650px;      /* when to hide logo (same as xxs) */
    --appbar-bp-xxs: 650px;            /* extra small: hide undo/redo + logo */
    --appbar-bp-sidebar-stack: 960px;  /* below this the dashboard sidebar stacks above the
                                           content instead of sitting beside it (Dashboard.razor.css) */
}

/* Brand logo button: square image, no MudButton corner rounding. */
.appbar-root[b-majty171wh]  .appbar-brand-button,
.appbar-root[b-majty171wh]  .appbar-brand-button .mud-image {
    border-radius: 0 !important;
}

/* Dealer/master logo: fit within the app bar's height AND a capped width, so a wide source image
   can't grow past the point where it'd overlap the view switcher before the logo-hide breakpoint
   kicks in. height/width: auto (rather than a fixed height) + object-fit: contain lets the browser
   shrink to whichever bound - height or width - the source aspect ratio hits first, rather than
   always filling the height and letting width run free. Also fades in once its image has actually
   loaded (see AppBar.razor's onload handler) rather than on mount - fading in on mount alone
   animates an empty box while the image is still downloading, which looks like no animation
   happened at all. */
.appbar-root[b-majty171wh]  .appbar-logo {
    height: auto;
    width: auto;
    max-height: 40px;
    max-width: 100px;
    object-fit: contain;
    opacity: 0;
    transition: opacity 300ms ease-in;
}
.appbar-root[b-majty171wh]  .appbar-logo.appbar-logo-loaded {
    opacity: 1;
}

/* Keep app bar height consistent when content is hidden (e.g. undo/redo at xxs) */
.appbar-root[b-majty171wh]  .mud-appbar,
.appbar-root[b-majty171wh]  .mud-toolbar-appbar {
    min-height: var(--mud-appbar-height);
}

/* Compact padding (icons stay full size) when viewport is narrow. */
@media (max-width: 1275px) { /* --appbar-bp-sm */
    /* Icon buttons: compact padding only */
    .appbar-root[b-majty171wh]  .mud-appbar .mud-icon-button {
        padding: 4px !important;
    }
    .appbar-root[b-majty171wh]  .mud-appbar .mud-button .mud-button-icon {
        margin-inline-end: 4px;
    }
    /* View switcher tabs: compact padding */
    .appbar-root[b-majty171wh]  #view-tab-container .mud-tab {
        min-width: 2.5rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

/* Shorten space name with ellipsis (tooltip still shows full name). */
@media (max-width: 1025px) { /* --appbar-bp-space-shorten */
    .appbar-root[b-majty171wh]  #space-title-text {
        max-width: 6ch !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .appbar-root[b-majty171wh]  #space-title-button {
        min-width: unset;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Hide space name entirely (tooltip still works). */
@media (max-width: 950px) { /* --appbar-bp-space-hide */
    .appbar-root[b-majty171wh]  #space-title-text {
        display: none !important;
    }
}

/* Very small screens: smaller logo, hide project button + arrow; back button shows only arrow */
@media (max-width: 850px) { /* --appbar-bp-xs */
    .appbar-root[b-majty171wh]  .mud-appbar .appbar-back-home-icon {
        display: none !important;
    }
    .appbar-root[b-majty171wh]  .mud-appbar .appbar-back-button {
        min-width: unset !important;
        padding: 4px 8px !important;
    }
    /* Make logo smaller (hidden at --appbar-bp-xxs with undo/redo) */
    .appbar-root[b-majty171wh]  .appbar-logo {
        height: auto !important;
        width: auto !important;
        max-height: 36px !important;
        max-width: 90px !important;
    }
    .appbar-root[b-majty171wh]  .appbar-project-and-arrow {
        display: none !important;
    }
}

/* Extra small screens: hide undo/redo and logo */
@media (max-width: 650px) { /* --appbar-bp-xxs, --appbar-bp-logo-hide */
    .appbar-root[b-majty171wh]  .appbar-undo-redo {
        display: none !important;
    }
    .appbar-root[b-majty171wh]  .appbar-logo {
        display: none !important;
    }
}

.appbar-root[b-majty171wh]  .appbar-undo-redo-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Validation indicator: sits just right of the view switcher. When issues exist, a thin bar
   under the icon grows and fades on a slow cycle, in step with a subtle scale on the icon
   itself - reads as a status indicator rather than a notification halo. */
.appbar-root[b-majty171wh]  .appbar-validation-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 8px;
}

.appbar-root[b-majty171wh]  .appbar-validation-wrap .mud-icon-button {
    position: relative;
    transition: transform 160ms ease;
}

/* Anchored with top: 50% + a fixed offset, not bottom - the wrap is a flex item of the app
   bar's toolbar and stretches to the toolbar's full height (even though its own align-items
   only centers its children), so a wrap-relative "bottom" lands far past the visible icon.
   "top: 50%" still lines up with the icon's own visual center regardless of that stretched
   height, since that's the same midpoint align-items: center uses to place the icon itself. */
.appbar-root[b-majty171wh]  .appbar-validation-wrap.has-issues::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 20px;
    width: 0;
    height: 3px;
    border-radius: 1.5px;
    background: var(--appbar-validation-pulse-color, var(--mud-palette-warning));
    transform: translateX(-50%);
    animation: appbar-validation-bar-b-majty171wh 2.6s ease-in-out infinite;
    pointer-events: none;
}

.appbar-root[b-majty171wh]  .appbar-validation-wrap.has-issues .mud-icon-button:hover {
    transform: scale(1.08);
}

.appbar-root[b-majty171wh]  .appbar-validation-wrap.has-issues:hover::after {
    animation-play-state: paused;
}

@keyframes appbar-validation-bar-b-majty171wh {
    0%, 100% { width: 12px; opacity: 0.5; }
    50%      { width: 32px; opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .appbar-root[b-majty171wh]  .appbar-validation-wrap.has-issues::after { animation: none; }
}
/* Brand logo's leading column: fixed to the sidebar's width (less the toolbar's own 8px
   gutter) so whatever comes after it in normal flow - the search box - starts flush with
   the sidebar's right edge, without needing to know the logo's own width. */
.appbar-root[b-majty171wh]  .appbar-brand-zone {
    width: calc(var(--sidebar-width, 280px) - 8px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Dashboard search box: fixed comfortable width, shrinking on narrow bars. Left flush
   against .appbar-brand-zone (above) rather than centered via position/transform, so it
   inherits the toolbar's own flex centering instead of fighting it. */
.appbar-root[b-majty171wh]  .appbar-search {
    flex: 0 0 320px;
    background-color: var(--mud-palette-surface);
    border-radius: 4px;
}

/* Match the nav tree (MudBlazor body2) rather than the input default of subtitle1. */
.appbar-root[b-majty171wh]  .appbar-search .mud-input-slot {
    padding-block: 7px;
    font-size: 0.875rem;
    line-height: 1.43;
    letter-spacing: 0.01071em;
}

@media (max-width: 850px) { /* --appbar-bp-xs */
    .appbar-root[b-majty171wh]  .appbar-search {
        flex-basis: 160px;
    }
}

/* Below --appbar-bp-sidebar-stack the sidebar stacks above the content instead of sitting
   beside it, so there's no sidebar edge to line up with - fall back to flowing after the logo. */
@media (max-width: 960px) { /* --appbar-bp-sidebar-stack */
    .appbar-root[b-majty171wh]  .appbar-brand-zone {
        width: auto;
    }

    .appbar-root[b-majty171wh]  .appbar-search {
        margin-left: 1rem;
    }
}
/* _content/Lib360.Shared/Components/Layout/AppBar/ProjectSpaceField.razor.rz.scp.css */
.project-space-field[b-l2i3dnkbnp] {
    margin-left: 1rem;
    margin-right: 1rem;
    width: 28rem;
}

.appbar-project-and-arrow[b-l2i3dnkbnp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.project-name-field[b-l2i3dnkbnp]{

    width: 10rem;
}

.space-name-field[b-l2i3dnkbnp]{
    width: 17rem;
}
/* _content/Lib360.Shared/Components/Layout/AppBar/SyncState.razor.rz.scp.css */
#sync-icon-container[b-sy73cpcffo] {
    height: 1.5rem;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
/* _content/Lib360.Shared/Components/Layout/AppBar/ViewSwitcher.razor.rz.scp.css */
.icon-container[b-rmnya1ve3g] {
    color: black;
    width: 36px;
    height: 36px;
}

/* Center the view switcher in the app bar (works at any width) */
#view-tab-container[b-rmnya1ve3g] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Indicator position comes from js/Shared/viewTabIndicator.js, and animates on transform only so a
   busy main thread (3D scene init) can't stutter it - MudBlazor animates "left", which relayouts, and
   sets left/width/transition inline, hence !important. */
#view-tab-container[b-rmnya1ve3g]  .mud-tab-slider {
    left: 0 !important;
    width: var(--view-tab-w, 0px) !important;
    transform: translateX(var(--view-tab-x, 0px));
    transition: transform .2s cubic-bezier(0.64, 0.09, 0.08, 1) !important;
    will-change: transform;
}
/* _content/Lib360.Shared/Components/Views/3D/SharedScene3D.razor.rz.scp.css */
.shared-scene-info[b-u58qpaep0r] {
    position: fixed;
    top: 0.75rem;
    right: 1rem;
    z-index: 100;
    text-align: right;
    pointer-events: none;
    user-select: none;
    color: rgba(0, 0, 0, 0.72);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.6);
}

.shared-scene-info-title[b-u58qpaep0r] {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
}

.shared-scene-info-space[b-u58qpaep0r] {
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
}

.shared-scene-info-version[b-u58qpaep0r] {
    font-size: 0.75rem;
    line-height: 1.3;
    opacity: 0.85;
    white-space: nowrap;
}
/* _content/Lib360.Shared/Components/Views/BOM/TableCell.razor.rz.scp.css */
td[b-z7mwm72tr7] {
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
    font-size: 0.8125rem;
    line-height: 1.3;
}

td.header-cell[b-z7mwm72tr7] {
    background-color: #f5f5f5;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #424242;
    padding: 6px 8px;
}

td.subtotal-cell[b-z7mwm72tr7] {
    background-color: #fafafa;
    font-weight: 600;
    border-top: 2px solid #9e9e9e;
}
/* _content/Lib360.Shared/Components/Views/BOM/TableRow.razor.rz.scp.css */
tr[b-dmainkzeao] {
    border-bottom: 1px solid #e0e0e0;
}

tr.header-row[b-dmainkzeao] {
    background-color: #f5f5f5;
}

tr.subtotal-row[b-dmainkzeao] {
    background-color: #fafafa;
    border-top: 2px solid #9e9e9e;
}

tr:hover:not(.header-row):not(.subtotal-row)[b-dmainkzeao] {
    background-color: #f9f9f9;
}
/* _content/Lib360.Shared/Components/Views/DWG/Components/DwgBody.razor.rz.scp.css */
.dwg-main[b-pnvyici6xb] {
    height: 100%;
    overflow: auto;
    padding: 25px 0;
}
.dwg-canvas[b-pnvyici6xb] {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.dwg-stage[b-pnvyici6xb] {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* Crossfade stack (prev + current) */
.dwg-sheet-stack[b-pnvyici6xb] {
    width: 100%;
    --avail-h: 90dvh;
    /* Available width inside the canvas, accounting for the drawer and some breathing room */
    --avail-w: calc(100vw - var(--dwg-drawer-offset, 0px) - 48px);
    height: var(--avail-h);
    position: relative;
    overflow: hidden;
}

/* Transition tuning.
   Note: this is a CSS-isolated file, so don't rely on :root for CSS variables. */
.dwg-root[b-pnvyici6xb] {
    /* Disabled for now (instant swap) */
    --dwg-page-anim-duration: 0ms;
    --dwg-page-anim-ease: linear;
    --dwg-page-slide: 0px;
}

.dwg-sheet-layer[b-pnvyici6xb] {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    will-change: opacity;
}

/* True crossfade so it doesn't feel like a flash */
.dwg-sheet-layer.is-current[b-pnvyici6xb] {
    animation: none !important;
}

/* All sheets stay mounted; only the active drawer page is visible/interactive. */
.dwg-sheet-layer.is-background[b-pnvyici6xb] {
    visibility: hidden;
    pointer-events: none;
}

.dwg-sheet-layer.is-prev[b-pnvyici6xb] {
    animation: none !important;
}

@keyframes dwg-page-fade-in-b-pnvyici6xb {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dwg-page-fade-out-b-pnvyici6xb {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Carousel feel: small slide depends on direction */
.dwg-sheet-stack.dir-next[b-pnvyici6xb] {
    --dwg-enter-x: var(--dwg-page-slide, 26px);
    --dwg-exit-x: calc(var(--dwg-page-slide, 26px) * -1);
}

.dwg-sheet-stack.dir-prev[b-pnvyici6xb] {
    --dwg-enter-x: calc(var(--dwg-page-slide, 26px) * -1);
    --dwg-exit-x: var(--dwg-page-slide, 26px);
}

@media (prefers-reduced-motion: reduce) {
    .dwg-sheet-layer[b-pnvyici6xb] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* The actual paper */
.dwg-sheet-inner[b-pnvyici6xb] {
    aspect-ratio: var(--sheet-ar);
    /* Fit sheet within both width and height constraints */
    width: min(var(--avail-w), calc(var(--avail-h) * var(--sheet-ratio)));
    /* Give the sheet an explicit height so children can use % heights (CSS-only scaling fallback). */
    height: min(var(--avail-h), calc(var(--avail-w) / var(--sheet-ratio)));
    background: white;
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    container-type: size;

    /* Convert millimeters (page model) to px in this rendered sheet. Inherits to all placements. */
    --dwg-mm-to-px: calc(100cqh / var(--dwg-page-h-mm, 215.9));
}

.dwg-sheet-inner[b-pnvyici6xb]::after {
    content: "";
    position: absolute;
    /* Inset guide by the requested page margin. */
    inset:
        calc(100% * var(--dwg-page-margin-mm, 6) / var(--dwg-page-h-mm, 215.9))
        calc(100% * var(--dwg-page-margin-mm, 6) / var(--dwg-page-w-mm, 279.4));
    pointer-events: none;
    z-index: 3; /* above placements + rubberband overlay */

    /* Page margin guide: solid black line */
    border: 1px solid #000;
    opacity: 1;
    box-sizing: border-box;
}

.dwg-sheet-page[b-pnvyici6xb] {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding:
        /* top/bottom based on page height */
        calc(100% * var(--dwg-page-margin-mm, 6) / var(--dwg-page-h-mm, 215.9))
        /* left/right based on page width */
        calc(100% * var(--dwg-page-margin-mm, 6) / var(--dwg-page-w-mm, 279.4));
}


.dwg-sheet-header[b-pnvyici6xb] {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid #000;
    background: linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0.00));
}

.dwg-sheet-body[b-pnvyici6xb] {
    flex: 1;
    /* Important: the sheet grid is our coordinate system for placements (mm -> %).
       Padding here would offset the visual top-left from (0,0). Keep it at 0. */
    padding: 0;
    background-image:
        radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: -2px -2px;
    position: relative;
}

/* Keep some breathing room for the placeholder text (non-interactive). */
.dwg-sheet-body[b-pnvyici6xb] >  .mud-typography {
    padding: 16px;
}

.dwg-sheet-body--adding[b-pnvyici6xb] {
    cursor: crosshair;
    touch-action: none;
}

/* Radial Copy follow: override --adding crosshair while ghost tracks pointer */
.dwg-sheet-body--adding.dwg-sheet-body--copy-follow[b-pnvyici6xb] {
    cursor: default;
}

.dwg-sheet-images-layer[b-pnvyici6xb] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

/*
 * 3D loading veil: defined here (under [data-dwg-sheet-grid]) with :has() on each .dwg-sheet-3d-shell so every placement
 * is independent. DwgImage.razor.css scoped rules like ".dwg-sheet-placed-3d.is-loaded ~ .dwg-sheet-3d-loading[b-xx]" attach
 * [b-xx] only to the veil node — on the first navigation that can match the wrong sibling chain until cache warms up.
 */
[data-dwg-sheet-grid] .dwg-sheet-3d-shell > .dwg-sheet-3d-loading[b-pnvyici6xb] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: none;
}

[data-dwg-sheet-grid] .dwg-sheet-3d-shell:has(> .dwg-sheet-placed-3d.is-loaded) > .dwg-sheet-3d-loading[b-pnvyici6xb],
[data-dwg-sheet-grid] .dwg-sheet-3d-shell:has(> .dwg-sheet-placed-3d.dwg-3d-cache-unresolved) > .dwg-sheet-3d-loading[b-pnvyici6xb] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

[data-dwg-sheet-grid] .dwg-sheet-3d-shell:has(> .dwg-sheet-placed-3d.is-loaded) > .dwg-sheet-3d-loading[b-pnvyici6xb] {
    transition: opacity 120ms ease 90ms, visibility 0ms linear 210ms;
}

[data-dwg-sheet-grid] .dwg-sheet-3d-shell:has(> .dwg-sheet-placed-3d.dwg-3d-cache-unresolved) > .dwg-sheet-3d-loading[b-pnvyici6xb] {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-dwg-sheet-grid] .dwg-sheet-3d-shell:has(> .dwg-sheet-placed-3d.is-loaded) > .dwg-sheet-3d-loading[b-pnvyici6xb] {
        transition: none;
    }
}

/* SVG layer for GenericRadialMenu; pointer-events none so placements stay clickable until the menu shows items. */
.dwg-radial-overlay[b-pnvyici6xb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    overflow: visible;
    pointer-events: none;
}

/*
 * JS-built add-placement preview (dwg.interaction.js) lives under [data-dwg-sheet-grid] without Blazor scoped attributes.
 * Normal placements use .dwg-sheet-placement-inner / .dwg-sheet-3d-shell min-height:32px — that inflates a 0×0
 * rubber-band and shows a full-size 3D bitmap before the user drags. Strip min-size; visibility toggled in JS until w,h ≥ 2.
 */
[data-dwg-sheet-grid] .dwg-sheet-placement.dwg-add-placement-preview[b-pnvyici6xb] {
    min-width: 0;
    min-height: 0;
}

[data-dwg-sheet-grid] .dwg-sheet-placement.dwg-add-placement-preview .dwg-sheet-placement-inner[b-pnvyici6xb],
[data-dwg-sheet-grid] .dwg-sheet-placement.dwg-add-placement-preview .dwg-sheet-3d-shell[b-pnvyici6xb] {
    min-width: 0;
    min-height: 0;
}

@media (max-width: 900px) {
    .dwg-stage[b-pnvyici6xb] {
        --peek: 18px;
        --gap: 12px;
    }
}
/* _content/Lib360.Shared/Components/Views/DWG/Components/DwgDrawer.razor.rz.scp.css */
.dwg-pager-text[b-mtj0it6kj2] {
    min-width: 140px;
    text-align: center;
}

.dwg-pager-text-drawer[b-mtj0it6kj2] {
    min-width: 0;
}

.dwg-pages-drawer[b-mtj0it6kj2] {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.dwg-fabs[b-mtj0it6kj2] {
    position: fixed;
    /* Same vertical rhythm as Toolbar.razor.css (1rem) but from below the Mud app bar. */
    top: calc(var(--mud-appbar-height) + 1rem);
    left: 12px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Toolbar.razor.css uses absolute + 1rem offsets; neutralize so placement matches legacy FABs. */
.dwg-fabs[b-mtj0it6kj2]  .tool-bar {
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
}

.dwg-fab-btn[b-mtj0it6kj2] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.dwg-fab-btn:hover[b-mtj0it6kj2] {
    background: var(--mud-palette-primary-darken);
}


.dwg-pages[b-mtj0it6kj2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 4px 8px;
}

.dwg-page-card[b-mtj0it6kj2] {
    appearance: none;
    box-sizing: border-box;
    border: 2px solid transparent;
    background: transparent;
    text-align: left;
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms cubic-bezier(.22, .8, .2, 1);
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dwg-drag-handle[b-mtj0it6kj2] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: grab;
    opacity: 0.75;
    user-select: none;
    touch-action: none;
}

.dwg-drag-handle:hover[b-mtj0it6kj2] {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

.dwg-page-card:active .dwg-drag-handle[b-mtj0it6kj2] {
    cursor: grabbing;
}

.dwg-drag-handle :global(svg)[b-mtj0it6kj2] {
    width: 22px;
    height: 22px;
}

.dwg-page-preview[b-mtj0it6kj2],
.dwg-page-mini[b-mtj0it6kj2] {
    flex: 1 1 auto;
}

/* Drop anywhere on card: invisible hit areas for before/after */
.dwg-drop-hit[b-mtj0it6kj2] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
}

.dwg-drop-hit.is-before[b-mtj0it6kj2] { top: 0; height: 50%; }
.dwg-drop-hit.is-after[b-mtj0it6kj2] { bottom: 0; height: 50%; }

.dwg-page-card.is-drop-before[b-mtj0it6kj2]::before,
.dwg-page-card.is-drop-after[b-mtj0it6kj2]::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    background: rgba(225, 9, 21, 0.95);
    border-radius: 999px;
    z-index: 4;
    box-shadow: 0 2px 10px rgba(225, 9, 21, 0.25);
}

/* Create visual "room" for insertion */
.dwg-page-card.is-drop-before[b-mtj0it6kj2] { margin-top: 18px; }
.dwg-page-card.is-drop-after[b-mtj0it6kj2] { margin-bottom: 18px; }

.dwg-page-card.is-drop-before[b-mtj0it6kj2]::before { top: -14px; }
.dwg-page-card.is-drop-after[b-mtj0it6kj2]::after { bottom: -14px; }

/* Add/reorder micro-animations */
.dwg-page-card.is-flash-add .dwg-page-preview[b-mtj0it6kj2],
.dwg-page-card.is-flash-add .dwg-page-mini[b-mtj0it6kj2] {
    transform-origin: 50% 35%;
    animation: dwg-page-add-pop-b-mtj0it6kj2 420ms cubic-bezier(.22, .8, .2, 1) both;
}

.dwg-page-card.is-flash-move .dwg-page-preview[b-mtj0it6kj2],
.dwg-page-card.is-flash-move .dwg-page-mini[b-mtj0it6kj2] {
    animation: dwg-page-move-pulse-b-mtj0it6kj2 520ms cubic-bezier(.22, .8, .2, 1) both;
}

@keyframes dwg-page-add-pop-b-mtj0it6kj2 {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes dwg-page-move-pulse-b-mtj0it6kj2 {
    0% { transform: translateY(0) scale(1); box-shadow: none; }
    40% { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
    100% { transform: translateY(0) scale(1); box-shadow: none; }
}

.dwg-page-card:hover[b-mtj0it6kj2] {
    background-color: rgba(0, 0, 0, 0.04);
}

.dwg-page-card:active[b-mtj0it6kj2] {
    transform: translateY(1px);
}

.dwg-page-card:disabled[b-mtj0it6kj2] {
    cursor: default;
    opacity: 0.6;
}

.dwg-page-card.is-active[b-mtj0it6kj2] {
    border-color: #E10915;
    background-color: transparent;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* Mini: red ring lives on .dwg-page-mini only; suppress outer .is-active border/shadow (avoids double ring). */
.dwg-page-card.is-mini.is-active[b-mtj0it6kj2] {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/*
 * Mini chip: scoped attribute can land on .dwg-page-mini; keep border here so it always paints.
 */
.dwg-page-card.is-mini .dwg-page-mini[b-mtj0it6kj2] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: border-color 220ms ease, box-shadow 220ms ease, color 180ms ease, opacity 180ms ease;
}

.dwg-page-card.is-mini.is-active .dwg-page-mini[b-mtj0it6kj2] {
    border-color: #E10915;
    box-shadow: 0 4px 14px rgba(225, 9, 21, 0.2);
}

/* :disabled on the button dims the whole control; keep the active mini chip fully legible. */
.dwg-page-card.is-mini.is-active:disabled[b-mtj0it6kj2] {
    opacity: 1;
}

.dwg-page-card.is-mini[b-mtj0it6kj2] {
    padding: 0;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Mini rail: cards span the full 40px inner width, so drop the side padding. */
.dwg-pages.is-mini[b-mtj0it6kj2] {
    padding-left: 0;
    padding-right: 0;
}

.dwg-page-card.is-edit[b-mtj0it6kj2] {
    cursor: default;
}

.dwg-page-delete-wrap[b-mtj0it6kj2] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.dwg-page-delete[b-mtj0it6kj2] {
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.16);
}

.dwg-page-delete :global(svg)[b-mtj0it6kj2] {
    width: 22px;
    height: 22px;
}

.dwg-page-mini[b-mtj0it6kj2] {
    font-weight: 700;
    opacity: 0.85;
}

.dwg-page-preview[b-mtj0it6kj2] {
    width: 100%;
    aspect-ratio: var(--sheet-ar);
    border-radius: 0;
    border: 1px solid rgba(0,0,0,0.12);
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    overflow: hidden;
    position: relative;
    transition: box-shadow 220ms ease, transform 220ms cubic-bezier(.22, .8, .2, 1);
}

.dwg-page-card.is-active .dwg-page-preview[b-mtj0it6kj2] {
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
    transform: scale(1.01);
}

.dwg-page-preview-inner[b-mtj0it6kj2] {
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
}

/* Match DwgBody: placements live in the sheet body between header/footer inside page margins. */
.dwg-page-preview-sheet[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding:
        calc(100% * var(--dwg-page-margin-mm, 6) / var(--dwg-page-h-mm, 215.9))
        calc(100% * var(--dwg-page-margin-mm, 6) / var(--dwg-page-w-mm, 279.4));
}

.dwg-page-preview-header-spacer[b-mtj0it6kj2] {
    flex: 0 0 auto;
    height: calc(100% * var(--dwg-header-h-mm, 6) / var(--dwg-page-h-mm, 215.9));
}

.dwg-page-preview-footer-spacer[b-mtj0it6kj2] {
    flex: 0 0 auto;
    height: calc(100% * var(--dwg-footer-h-mm, 20) / var(--dwg-page-h-mm, 215.9));
}

.dwg-page-preview-sheet-body[b-mtj0it6kj2] {
    flex: 1;
    min-height: 0;
    position: relative;
    padding: 0;
}

.dwg-page-preview-placements[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.dwg-page-preview-placements-inner[b-mtj0it6kj2] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.dwg-page-preview-placement[b-mtj0it6kj2] {
    position: absolute;
    overflow: hidden;
    background: transparent;
}

.dwg-page-preview-placed-text[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    /* Scale with the preview placement box (avoid fixed px text). */
    padding: clamp(0.5px, min(3cqw, 3cqh), 2px);
    overflow: hidden;
    font-size: clamp(1.5px, min(14cqw, 14cqh), 7px);
    line-height: 1.15;
    color: rgba(30, 30, 30, 0.9);
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    z-index: 1; /* above ::before skeleton */
}

/* Content should render above the always-on skeleton. */
.dwg-page-preview-img-wrap[b-mtj0it6kj2],
.dwg-page-preview-placed-svg[b-mtj0it6kj2],
.dwg-page-preview-placed-skeleton[b-mtj0it6kj2],
.dwg-page-preview-placed-3d[b-mtj0it6kj2],
.dwg-page-preview-3d-shell[b-mtj0it6kj2] {
    position: relative;
    z-index: 1;
}

/* Match sheet DwgImage: container queries + boundary content transforms for rotated previews. */
.dwg-page-preview-img-wrap[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dwg-page-preview-boundary-box[b-mtj0it6kj2] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    container-type: size;
}

/* Skeleton: only within the meet-fit box (% width/height), not the full placement. */
.dwg-page-preview-boundary-box[b-mtj0it6kj2]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #b8b8bc; /* match sheet skeleton tone */
    opacity: 0;
    animation: dwg-preview-skel-fill-fade-in 750ms ease-out forwards;
    transition: opacity 340ms ease;
}

/* Shimmer sweep — same as DwgImagePickerDialog / customStyles.css (dwg-shimmer). */
.dwg-page-preview-boundary-box[b-mtj0it6kj2]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateX(-100%);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation:
        dwg-skeleton-shimmer-fade-in 700ms ease-out forwards,
        dwg-shimmer 1.25s ease-in-out infinite 520ms;
    transition: opacity 340ms ease;
}

/* Hide skeleton once real content is present. */
.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-3d.is-loaded)[b-mtj0it6kj2]::before,
.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-3d.dwg-3d-cache-unresolved)[b-mtj0it6kj2]::before,
.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-svg)[b-mtj0it6kj2]::before,
.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-text)[b-mtj0it6kj2]::before {
    opacity: 0;
    animation: none;
}

.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-3d.is-loaded)[b-mtj0it6kj2]::after,
.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-3d.dwg-3d-cache-unresolved)[b-mtj0it6kj2]::after,
.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-svg)[b-mtj0it6kj2]::after,
.dwg-page-preview-boundary-box:has(.dwg-page-preview-placed-text)[b-mtj0it6kj2]::after {
    opacity: 0;
    animation: none;
}

/* Ensure boundary content paints above skeleton. */
.dwg-page-preview-boundary-content[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}


.dwg-page-preview-placement[data-dwg-rotation="90"] .dwg-page-preview-boundary-content[b-mtj0it6kj2] {
    inset: unset;
    top: 0;
    left: 0;
    width: 100cqh;
    height: 100cqw;
    transform: translate(100cqw, 0) rotate(90deg);
    transform-origin: 0 0;
}

.dwg-page-preview-placement[data-dwg-rotation="270"] .dwg-page-preview-boundary-content[b-mtj0it6kj2] {
    inset: unset;
    top: 0;
    left: 0;
    width: 100cqh;
    height: 100cqw;
    transform: translate(0, 100cqh) rotate(270deg);
    transform-origin: 0 0;
}

.dwg-page-preview-placement[data-dwg-rotation="180"] .dwg-page-preview-boundary-content[b-mtj0it6kj2] {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

.dwg-page-preview-placement[data-dwg-rotation="90"] .dwg-page-preview-placed-3d[b-mtj0it6kj2],
.dwg-page-preview-placement[data-dwg-rotation="180"] .dwg-page-preview-placed-3d[b-mtj0it6kj2],
.dwg-page-preview-placement[data-dwg-rotation="270"] .dwg-page-preview-placed-3d[b-mtj0it6kj2] {
    object-fit: fill;
}

.dwg-page-preview-3d-shell[b-mtj0it6kj2] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: transparent;
}

.dwg-page-preview-3d-shell .dwg-page-preview-placed-3d[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dwg-page-preview-3d-shell .dwg-page-preview-missing-overlay[b-mtj0it6kj2],
.dwg-page-preview-boundary-content > .dwg-page-preview-missing-overlay[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    background: rgba(245, 245, 245, 0.97);
}

.dwg-page-preview-placed-3d[b-mtj0it6kj2] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left top;
    opacity: 0;
    transition: opacity 180ms ease;
}

.dwg-page-preview-placed-3d.is-loaded[b-mtj0it6kj2] {
    opacity: 1;
}

/* 3D loading veil in drawer previews (mirrors sheet behavior). */
.dwg-page-preview-3d-shell > .dwg-page-preview-3d-loading[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: none;
}

.dwg-page-preview-3d-skeleton[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #b8b8bc;
    opacity: 0;
    animation: dwg-preview-3d-skeleton-fade-in-b-mtj0it6kj2 750ms ease-out forwards;
}

@keyframes dwg-preview-3d-skeleton-fade-in-b-mtj0it6kj2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.25;
    }
}

.dwg-page-preview-3d-shell:has(> .dwg-page-preview-placed-3d.is-loaded) > .dwg-page-preview-3d-loading[b-mtj0it6kj2],
.dwg-page-preview-3d-shell:has(> .dwg-page-preview-placed-3d.dwg-3d-cache-unresolved) > .dwg-page-preview-3d-loading[b-mtj0it6kj2] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dwg-page-preview-3d-shell:has(> .dwg-page-preview-placed-3d.is-loaded) > .dwg-page-preview-3d-loading[b-mtj0it6kj2] {
    transition: opacity 120ms ease 90ms, visibility 0ms linear 210ms;
}

.dwg-page-preview-placed-svg[b-mtj0it6kj2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 0;
}

.dwg-page-preview-placed-svg :global(svg)[b-mtj0it6kj2] {
    width: 100%;
    height: 100%;
    display: block;
}

.dwg-page-preview-placed-skeleton[b-mtj0it6kj2] {
    width: 100%;
    height: 100%;
    /* Grey + shimmer: .dwg-page-preview-boundary-box::before / ::after */
    background: rgba(0, 0, 0, 0.04);
}

.dwg-page-preview-label[b-mtj0it6kj2] {
    font-size: 1.0rem;
    font-weight: 700;
    opacity: 0.65;
    transition: color 180ms ease, opacity 180ms ease;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

/* Active page: make the number red too */
.dwg-page-card.is-active .dwg-page-preview-label[b-mtj0it6kj2],
.dwg-page-card.is-active .dwg-page-mini[b-mtj0it6kj2] {
    color: #E10915;
    opacity: 1;
}

.dwg-page-preview-center[b-mtj0it6kj2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dwg-page-delete-center[b-mtj0it6kj2] {
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.dwg-page-delete-center :global(svg)[b-mtj0it6kj2] {
    width: 26px;
    height: 26px;
}

.dwg-drag-handle.is-delete[b-mtj0it6kj2] {
    cursor: pointer;
    opacity: 1;
}

.dwg-drag-handle.is-delete:hover[b-mtj0it6kj2] {
    background: rgba(225, 9, 21, 0.06);
}

.dwg-page-name[b-mtj0it6kj2] {
    margin-top: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0.85;
}

@media (max-width: 900px) {
    .dwg-stage[b-mtj0it6kj2] {
        --peek: 18px;
        --gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dwg-page-preview-boundary-box[b-mtj0it6kj2]::before {
        animation: none;
        opacity: 0.22;
    }

    .dwg-page-preview-boundary-box[b-mtj0it6kj2]::after {
        animation: none;
        transform: none;
        opacity: 0;
    }

    .dwg-page-preview-3d-skeleton[b-mtj0it6kj2] {
        animation: none;
        opacity: 0.25;
    }
}

/* _content/Lib360.Shared/Components/Views/DWG/Components/DwgFooter.razor.rz.scp.css */
.dwg-footer[b-ufz9rfictj] {
    /* CSS-only: footer is a fixed mm band relative to sheet height. */
    height: calc(100% * var(--dwg-footer-h-mm, 20) / var(--dwg-page-h-mm, 215.9));
    flex: 0 0 auto;
    padding: 0;
    border-top: 1px solid #000;
    background: white;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* Enable container query units (cqh/cqw) for scaling content. */
    container-type: size;
}

.dwg-footer-inner[b-ufz9rfictj] {
    position: absolute;
    inset: 0;
    padding: 7cqh 4cqw;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 5cqh;
}

.dwg-footer-dealer[b-ufz9rfictj] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 5cqh;
    opacity: 1;
}

.dwg-footer-left[b-ufz9rfictj],
.dwg-footer-right[b-ufz9rfictj] {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 40cqh; /* reserve space to avoid layout pop */
}

.dwg-footer-left[b-ufz9rfictj] { justify-content: flex-start; }
.dwg-footer-right[b-ufz9rfictj] { justify-content: flex-end; }

.dwg-footer-logo[b-ufz9rfictj],
.dwg-footer-rubbermaid[b-ufz9rfictj] {
    /* Bigger by default; constrained by footer container. */
    max-height: 72cqh;
    object-fit: contain;
}

.dwg-footer-logo[b-ufz9rfictj] {
    max-width: 46cqw;
}

.dwg-footer-rubbermaid[b-ufz9rfictj] {
    max-width: 46cqw;
}

.dwg-footer-center[b-ufz9rfictj] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4cqh;
    line-height: 1.15;
    color: rgba(0, 0, 0, 0.82);
    text-align: left;
    justify-self: center;
    max-width: min(520px, 100%);
}

.dwg-footer-title[b-ufz9rfictj] {
    font-weight: 600;
    font-size: 11cqh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dwg-footer-address[b-ufz9rfictj] {
    font-size: 9cqh;
    white-space: pre-line;
    overflow: visible;
}

.dwg-footer-phone[b-ufz9rfictj] {
    font-size: 9cqh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dwg-footer-right[b-ufz9rfictj] {
    position: absolute;
    right: 4cqw;
    top: 50%;
    transform: translateY(-50%);
}
/* _content/Lib360.Shared/Components/Views/DWG/Components/DwgHeader.razor.rz.scp.css */
.dwg-header[b-2kuemump2r] {
    /* CSS-only: header is a fixed mm band relative to sheet height. */
    height: calc(100% * var(--dwg-header-h-mm, 6) / var(--dwg-page-h-mm, 215.9));
    flex: 0 0 auto;
    padding: 0;
    background: white;
    border-bottom: 1px solid #000;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* Enable container query units (cqh/cqw) for scaling content. */
    container-type: size;
}

.dwg-header-inner[b-2kuemump2r] {
    position: absolute;
    inset: 0;
    padding: 0 4cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqw;
    min-width: 0;
}

.dwg-header-title[b-2kuemump2r] {
    font-weight: 600;
    font-size: 34cqh;
    line-height: 1.05;
    color: rgba(0, 0, 0, 0.84);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

.dwg-header-versions[b-2kuemump2r] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: 28cqh;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.84);
    white-space: nowrap;
}

.dwg-header-version-sep[b-2kuemump2r] {
    user-select: none;
}

/* _content/Lib360.Shared/Components/Views/DWG/Components/DwgImage.razor.rz.scp.css */
.dwg-sheet-placement[b-xemoswesft] {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
    overflow: hidden;
    background: transparent;
    border: none;
    user-select: none;
    -webkit-user-select: none;
}

.dwg-sheet-placement[b-xemoswesft]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    border-radius: 0;

    /* Default (not selected): light grey dashed outline */
    background:
        /* top */
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.22) 0 6px,
            transparent 6px 14px
        ) top left / 100% 1px no-repeat,
        /* bottom */
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.22) 0 6px,
            transparent 6px 14px
        ) bottom left / 100% 1px  no-repeat,
        /* left */
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.22) 0 6px,
            transparent 6px 14px
        ) top left / 1px 100% no-repeat,
        /* right */
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.22) 0 6px,
            transparent 6px 14px
        ) top right / 1px 100% no-repeat;
}

/* Hover: same dashed outline as selected (grey default → red) */
.dwg-sheet-placement:hover:not(.is-selected)[b-xemoswesft]::before {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) top left / 100% 1px no-repeat,
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) bottom left / 100% 1px  no-repeat,
        repeating-linear-gradient(
            0deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) top left / 1px 100% no-repeat,
        repeating-linear-gradient(
            0deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) top right / 1px 100% no-repeat;
}

.dwg-sheet-placement.is-selected[b-xemoswesft] {
    /* Selected container is drawn via ::before for consistent dash spacing */
    border: none;
    outline: none;
    overflow: visible !important; /* allow the extruded dashed outline + handles to render */
    --dwg-selection-inset: 0px;
}

.dwg-sheet-placement.is-selected[b-xemoswesft]::before {
    inset: calc(-1 * var(--dwg-selection-inset)); /* slight offset outside container */
    /* Selected: red dashed outline (same pattern as default) */
    background:
        /* top */
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) top left / 100% 1px no-repeat,
        /* bottom */
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) bottom left / 100% 1px  no-repeat,
        /* left */
        repeating-linear-gradient(
            0deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) top left / 1px 100% no-repeat,
        /* right */
        repeating-linear-gradient(
            0deg,
            rgba(255, 0, 0, 0.50) 0 6px,
            transparent 6px 14px
        ) top right / 1px 100% no-repeat;
}

.dwg-image-container[b-xemoswesft] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    isolation: isolate;
}

.dwg-image-boundary-box[b-xemoswesft] {
    position: absolute;
    box-sizing: border-box;
    z-index: 4;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Enables 100cqw / 100cqh on .dwg-image-boundary-content for quarter-turn W/H swap + translate. */
    container-type: size;
}

.dwg-image-boundary-box.is-boundary-hidden[b-xemoswesft] {
    /* Do NOT hide: this element contains the image markup. */
    display: block;
}

.dwg-image-boundary-box.is-boundary-visible[b-xemoswesft] {
    display: block;
    /* Inner “meet” / fit rect (style sets width/height % on this node). */
    --dwg-boundary-color: rgba(0, 160, 60, 0.95);
    --dwg-boundary-dash: 6px;
    --dwg-boundary-gap: 4px;
    --dwg-boundary-stroke: 2px;
}

.dwg-image-boundary-box.is-boundary-visible[b-xemoswesft]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;

    /* dashed outline on all 4 edges, consistent dash/gap */
    background:
        repeating-linear-gradient(
            90deg,
            var(--dwg-boundary-color) 0 var(--dwg-boundary-dash),
            transparent var(--dwg-boundary-dash) calc(var(--dwg-boundary-dash) + var(--dwg-boundary-gap))
        ) top left / 100% var(--dwg-boundary-stroke) no-repeat,
        repeating-linear-gradient(
            90deg,
            var(--dwg-boundary-color) 0 var(--dwg-boundary-dash),
            transparent var(--dwg-boundary-dash) calc(var(--dwg-boundary-dash) + var(--dwg-boundary-gap))
        ) bottom left / 100% var(--dwg-boundary-stroke)  no-repeat,
        repeating-linear-gradient(
            0deg,
            var(--dwg-boundary-color) 0 var(--dwg-boundary-dash),
            transparent var(--dwg-boundary-dash) calc(var(--dwg-boundary-dash) + var(--dwg-boundary-gap))
        ) top left / var(--dwg-boundary-stroke) 100% no-repeat,
        repeating-linear-gradient(
            0deg,
            var(--dwg-boundary-color) 0 var(--dwg-boundary-dash),
            transparent var(--dwg-boundary-dash) calc(var(--dwg-boundary-dash) + var(--dwg-boundary-gap))
        ) top right / var(--dwg-boundary-stroke) 100% no-repeat;
}

/* 3D loading veil layout + fade: see DwgBody.razor.css ([data-dwg-sheet-grid] … :has()) — avoids Blazor scoped sibling bugs. */
.dwg-sheet-3d-shell .dwg-image-boundary-content[b-xemoswesft] {
    background: transparent;
}

.dwg-image-boundary-content[b-xemoswesft] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/*
 * Quarter turns: axis-aligned bounding box of rotated content matches the green meet box (top-left anchored).
 * 90/270: inner layer is placement-height × placement-width (cqh × cqw), then translate + rotate.
 * 180: same inset box, rotate in place around center.
 * CSS rotate(θ) uses x' = cos(θ)x − sin(θ)y, y' = sin(θ)x + cos(θ)y (y-down). For 90° the AABB needs
 * translate(100cqw, 0); for 270° it needs translate(0, 100cqh) — do not swap these.
 * For "translate(...) rotate(...)", transforms apply right-to-left: rotate first, then translate.
 */
.dwg-sheet-placement[data-dwg-rotation="90"] .dwg-image-boundary-content[b-xemoswesft] {
    inset: unset;
    top: 0;
    left: 0;
    width: 100cqh;
    height: 100cqw;
    transform: translate(100cqw, 0) rotate(90deg);
    transform-origin: 0 0;
}

.dwg-sheet-placement[data-dwg-rotation="270"] .dwg-image-boundary-content[b-xemoswesft] {
    inset: unset;
    top: 0;
    left: 0;
    width: 100cqh;
    height: 100cqw;
    transform: translate(0, 100cqh) rotate(270deg);
    transform-origin: 0 0;
}

.dwg-sheet-placement[data-dwg-rotation="180"] .dwg-image-boundary-content[b-xemoswesft] {
    /* Half-turn in place: AABB stays the meet box; no translate or W/H swap. */
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

/* Stretch bitmap to the pre-rotate meet rect so the rotated pixels fill the dashed box (matches reference at 0° footprint). */
.dwg-sheet-placement[data-dwg-rotation="90"] .dwg-sheet-placed-img[b-xemoswesft],
.dwg-sheet-placement[data-dwg-rotation="180"] .dwg-sheet-placed-img[b-xemoswesft],
.dwg-sheet-placement[data-dwg-rotation="270"] .dwg-sheet-placed-img[b-xemoswesft] {
    object-fit: fill;
}

.dwg-placement-handles[b-xemoswesft] {
    position: absolute;
    /* Match the selected outline box so handles sit on the dashed line */
    inset: calc(-1 * var(--dwg-selection-inset, 0px));
    pointer-events: auto;
    z-index: 12;
}

.dwg-handle[b-xemoswesft] {
    position: absolute;
    width: 14px;
    height: 14px;
    background: transparent;
    border: 2px solid rgba(115, 115, 122, 0.92);
    border-radius: 999px;
    box-sizing: border-box;
    cursor: default;
    transform: translate(-50%, -50%);
}

/* Center handles on container corners/edges */
/* Handles are centered on the selection outline box (see .dwg-placement-handles inset). */
.dwg-handle.is-nw[b-xemoswesft] { left: 0; top: 0; }
.dwg-handle.is-n[b-xemoswesft]  { left: 50%; top: 0; }
.dwg-handle.is-ne[b-xemoswesft] { left: 100%; top: 0; }
.dwg-handle.is-e[b-xemoswesft]  { left: 100%; top: 50%; }
.dwg-handle.is-se[b-xemoswesft] { left: 100%; top: 100%; }
.dwg-handle.is-s[b-xemoswesft]  { left: 50%; top: 100%; }
.dwg-handle.is-sw[b-xemoswesft] { left: 0; top: 100%; }
.dwg-handle.is-w[b-xemoswesft]  { left: 0; top: 50%; }

/* All handles are circles (no rectangles) */

/* Larger grippers when selected */
.dwg-sheet-placement.is-selected .dwg-handle[b-xemoswesft] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-radius: 999px;
}

.dwg-sheet-placement.is-selected .dwg-handle.is-nw[b-xemoswesft] { left: 0; top: 0; }
.dwg-sheet-placement.is-selected .dwg-handle.is-n[b-xemoswesft]  { left: 50%; top: 0; }
.dwg-sheet-placement.is-selected .dwg-handle.is-ne[b-xemoswesft] { left: 100%; top: 0; }
.dwg-sheet-placement.is-selected .dwg-handle.is-e[b-xemoswesft]  { left: 100%; top: 50%; }
.dwg-sheet-placement.is-selected .dwg-handle.is-se[b-xemoswesft] { left: 100%; top: 100%; }
.dwg-sheet-placement.is-selected .dwg-handle.is-s[b-xemoswesft]  { left: 50%; top: 100%; }
.dwg-sheet-placement.is-selected .dwg-handle.is-sw[b-xemoswesft] { left: 0; top: 100%; }
.dwg-sheet-placement.is-selected .dwg-handle.is-w[b-xemoswesft]  { left: 0; top: 50%; }

.dwg-handle.is-n[b-xemoswesft],
.dwg-handle.is-s[b-xemoswesft] {
    cursor: ns-resize;
}
.dwg-handle.is-e[b-xemoswesft],
.dwg-handle.is-w[b-xemoswesft] {
    cursor: ew-resize;
}
.dwg-handle.is-nw[b-xemoswesft],
.dwg-handle.is-se[b-xemoswesft] {
    cursor: nwse-resize;
}
.dwg-handle.is-ne[b-xemoswesft],
.dwg-handle.is-sw[b-xemoswesft] {
    cursor: nesw-resize;
}

.dwg-sheet-placement-inner[b-xemoswesft] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 32px;
}

.dwg-sheet-3d-shell[b-xemoswesft] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 32px;
    overflow: hidden;
    background: #fff;
}

.dwg-sheet-3d-shell .dwg-sheet-placed-3d[b-xemoswesft] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dwg-sheet-3d-shell .dwg-sheet-3d-missing-placeholder[b-xemoswesft] {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    background: rgba(245, 245, 245, 0.97);
    text-align: center;
}

/* Fills the meet box (in-flow height would collapse when the SVG is position:absolute). */
.dwg-sheet-svg-shell[b-xemoswesft] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #fff;
}

.dwg-sheet-svg-shell > .dwg-sheet-svg-asset-loading[b-xemoswesft] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.dwg-sheet-3d-missing-text[b-xemoswesft] {
    color: var(--mud-palette-text-secondary, #616161);
    line-height: 1.25;
    max-width: 100%;
}

.dwg-sheet-3d-skeleton[b-xemoswesft] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #d7d7db;
}

.dwg-sheet-3d-skeleton[b-xemoswesft]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation:
        dwg-skeleton-shimmer-fade-in 680ms ease-out forwards,
        dwg-shimmer 1.25s ease-in-out infinite 500ms;
}

@media (prefers-reduced-motion: reduce) {
    .dwg-sheet-3d-skeleton[b-xemoswesft]::after {
        animation: none;
        transform: none;
    }

    [data-dwg-sheet-grid] .dwg-sheet-placed-svg[b-xemoswesft] {
        animation: none;
        opacity: 1;
    }
}

.dwg-sheet-placed-img[b-xemoswesft] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
    background: #fff;
    user-select: none;
    -webkit-user-select: none;

    /* Prevent "flash" when JS assigns src; JS adds .is-loaded on load. */
    opacity: 0;
    transition: opacity 180ms ease;
    will-change: opacity;
}

.dwg-sheet-placed-img.is-loaded[b-xemoswesft] {
    opacity: 1;
}

/* 2D: quick fade when markup is present — independent of 3D load (no data-dwg-3d-ready gating). */
[data-dwg-sheet-grid] .dwg-sheet-placed-svg[b-xemoswesft] {
    animation: dwg-asset-fade-in-b-xemoswesft 240ms ease-out forwards;
}

.dwg-sheet-placed-svg[b-xemoswesft] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background: #fff;
    line-height: 0;
}

/* While the SVG is fading in, show a temporary dashed boundary box. */
.dwg-sheet-placed-svg[b-xemoswesft]::before {
    content: none;
}

.dwg-sheet-placed-svg[b-xemoswesft]  svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

@keyframes dwg-asset-fade-in-b-xemoswesft {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dwg-asset-boundary-fade-out-b-xemoswesft {
    from { opacity: 1; }
    to { opacity: 0; }
}

.dwg-sheet-placed-text[b-xemoswesft] {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    /* Keep padding proportional to paper mm so wrapping stays stable as sheet scales. */
    padding: calc(var(--dwg-text-note-pad-mm, 1.5) * var(--dwg-mm-to-px-y, 1px));
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    /* Font size is defined in paper millimeters (A4/Letter aware), scaled to px by JS via --dwg-mm-to-px-y. */
    font-size: calc(var(--dwg-text-note-font-mm, 5.0) * var(--dwg-mm-to-px-y, 1px));
    line-height: 1.25;
    color: rgba(20, 20, 20, 0.95);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 2px;
}

/* Pending placement: invisible until JS reveals it on first click */
.dwg-placement--pending[b-xemoswesft] {
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
}

/* Explicit replace-target highlight while "Change image" picker is open. */
.dwg-sheet-placement.dwg-placement--replace-target[b-xemoswesft]::before {
    opacity: 1;
    border-color: #e53935;
    box-shadow:
        0 0 0 1px rgba(229, 57, 53, 0.5),
        0 0 0 3px rgba(229, 57, 53, 0.2);
}

/* _content/Lib360.Shared/Components/Views/DWG/Pages/ViewDWG.razor.rz.scp.css */
.dwg-root[b-vg8hs4rzst] {
    width: 100%;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

/* Shell: drawer + body live in MudDrawerContainer; loading overlay is a later sibling so it stacks over the mini drawer too. */
.dwg-dwg2-view-root[b-vg8hs4rzst] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dwg-dwg2-view-root > .dwg-dwg2-drawer-container[b-vg8hs4rzst] {
    flex: 1;
    min-height: 0;
    width: 100%;
}

.dwg-loading-overlay[b-vg8hs4rzst] {
    /* ZIndex also set on MudOverlay; keep CSS aligned for any inner scrim. */
    z-index: 14000;
}

.dwg-loading-card[b-vg8hs4rzst] {
    border-radius: 10px;
    min-width: 220px;
}


/* Narrow screens: the open pages drawer overlays the sheet instead of pushing it. The body keeps
   laying out against the 56px rail; !important beats the inline --dwg-drawer-offset from RootStyle. */
@media (max-width: 960px) {
    .dwg-dwg2-view-root[b-vg8hs4rzst] {
        --dwg-drawer-offset: 56px !important;
    }

    /* MudDrawerContainer pushes the body via margin-left on its content child when the mini drawer opens. */
    .dwg-dwg2-view-root[b-vg8hs4rzst]  .dwg-main {
        margin-left: 56px !important;
    }

    .dwg-dwg2-view-root[b-vg8hs4rzst]  .dwg-pages-drawer.mud-drawer--open {
        z-index: 1300;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.18);
    }
}
/* _content/Lib360.Shared/Components/Views/Elevation/Elevation.razor.rz.scp.css */
*[b-k0wzn63m52] {
    pointer-events: none;
}

.mouse-selection[b-k0wzn63m52] {
    pointer-events: auto;
}

svg text[b-k0wzn63m52] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no-scale rect[b-k0wzn63m52],
.no-scale circle[b-k0wzn63m52],
.no-scale path[b-k0wzn63m52],
.no-scale polygon[b-k0wzn63m52],
.no-scale line[b-k0wzn63m52] {
    shape-rendering: auto !important;
}
/* _content/Lib360.Shared/Components/Views/Elevation/Toolbars/DesignZoneSwitcher.razor.rz.scp.css */
/* Bottom-centre design-zone switcher: prev / current zone / next, plus the full zone list.
   Auto-hides like the 3D viewpoint panel it mirrors. */
.dz-switcher[b-qk7b372nzh] {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 2;
    /* Not a hit target itself - only the revealed panel is, so the hidden toolbar takes no clicks
       off the canvas beneath it. */
    pointer-events: none;
}

.dz-switcher-panel[b-qk7b372nzh] {
    position: relative;
    opacity: 0;
    pointer-events: none;
    /* The 3D viewpoint panel's fade (viewer3DUI.viewPointControl.js). */
    transition: opacity 0.3s ease-in-out;
}

/* .hover-reveal-visible is written by hoverRevealPanel.js (pointer proximity, then a linger before
   it hides); an open list pins the panel wherever the pointer is. Two owners on two elements - the
   wrapper's class attribute is Blazor's, the panel's is the JS module's - so neither can undo the
   other's write. */
.dz-switcher-panel.hover-reveal-visible[b-qk7b372nzh],
.dz-switcher-open .dz-switcher-panel[b-qk7b372nzh] {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .dz-switcher-panel[b-qk7b372nzh] {
        transition: none;
    }
}

/* Scoped from .dz-switcher-panel, not from the MudButtonGroup's own class: the scope attribute
   only lands on elements this component renders itself, never on a child component's root. */
.dz-switcher-panel[b-qk7b372nzh]  .mud-button-root {
    border: none !important;
}

/* The 3D dropdown's metrics (.viewer3d-dropdown-main-button, viewer3dUI.css), so the two toolbars
   read as the same control. */
.dz-switcher-panel[b-qk7b372nzh]  .dz-switcher-label {
    width: 7rem;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    white-space: nowrap;
}

/* The zone list, opening upward out of the panel. */
.dz-switcher-list[b-qk7b372nzh] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 12rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #A9A9A9;
    border-radius: 6px;
    /* Flush with the panel: a gap is a hole in the hover chain (see @onmouseleave). */
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* .viewer3d-dropdown-item's metrics and hover, for the same reason. */
.dz-switcher-item[b-qk7b372nzh] {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    white-space: nowrap;
    cursor: pointer;
}

.dz-switcher-item:last-child[b-qk7b372nzh] {
    border-bottom: none;
}

.dz-switcher-item:hover[b-qk7b372nzh] {
    background: rgba(0, 0, 0, 0.06);
}

/* Same red bar the toolbars use for the active tool (.toolbar-btn-selected). */
.dz-switcher-item-selected[b-qk7b372nzh] {
    box-shadow: inset 2px 0 0 0 var(--mud-palette-error, rgb(225, 9, 21));
    font-weight: 500;
}
/* _content/Lib360.Shared/Components/Views/Elevation/Toolbars/ElevationToolbar.razor.rz.scp.css */
.elevation-toolbar-wrapper[b-xkd1g6jut9] {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    pointer-events: none;
    width: fit-content;
    /* Repeated clicks on a button otherwise drag-select the surrounding text. */
    user-select: none;
}

/* System type button and the horizontal comp toolbar share the first row. */
.elevation-toolbar-top-row[b-xkd1g6jut9] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

/* MudStack's own row gap (12px) sits between the button card and the panel slot div even when that
   slot is empty or its content is taken out of flow (see the .panel-animate rule below) - without
   this it pads the right side of every toolbar, panel or not. */
.elevation-toolbar-wrapper[b-xkd1g6jut9]  .tool-bar > .d-flex {
    gap: 0;
}

/* Dimmed while the system type row expands over it. The animation covers the other case - swapping
   system type replaces this element outright, so there's no opacity to transition from. */
.top-row-toolbar[b-xkd1g6jut9] {
    transition: opacity .2s ease-out;
    animation: preset-fade-in-b-xkd1g6jut9 .25s ease-out;
}

@keyframes preset-fade-in-b-xkd1g6jut9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.top-row-toolbar.dimmed[b-xkd1g6jut9] {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-in;
}

.elevation-toolbar-wrapper[b-xkd1g6jut9]  .system-type-menu,
.elevation-toolbar-wrapper[b-xkd1g6jut9]  .tool-bar {
    pointer-events: none;
    width: fit-content;
}

.elevation-toolbar-wrapper[b-xkd1g6jut9]  .mud-card,
.elevation-toolbar-wrapper[b-xkd1g6jut9]  .panel-animate,
.elevation-toolbar-wrapper[b-xkd1g6jut9]  .split-button-card {
    pointer-events: auto;
}

.elevation-toolbar-wrapper[b-xkd1g6jut9]  .tool-bar .mud-card {
    height: auto;
    width: fit-content;
}

.elevation-toolbar-wrapper[b-xkd1g6jut9]  .tool-bar {
    position: relative;
    left: auto;
    top: auto;
}

/* A toolbar's Panels slot (e.g. the Objects panel) would otherwise sit in the same flex row as its
   button group, growing that row's height and pushing every toolbar below it down the column. Taking
   it out of flow keeps every toolbar's position fixed regardless of which one has a panel open, and
   top:0 against the now-relative .tool-bar is what keeps the panel's top aligned with its own
   toolbar's top rather than the wrapper's. */
.elevation-toolbar-wrapper[b-xkd1g6jut9]  .panel-animate {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 0.5rem;
    z-index: 3;
}

/* Icon strokes are authored as "1" meaning one screen pixel, but the viewBoxes disagree (123x104
   for the elevation part icons, 24x24 for the newer ones), so without this the 123-wide ones scale
   down ~5x and render sub-pixel grey. Covers the whole wrapper, not just .tool-bar, so the system
   type menu gets it too. Same rule lives in Toolbar.razor.css for the Plan/DWG toolbars. */
.elevation-toolbar-wrapper[b-xkd1g6jut9]  svg :is(path, line, circle, ellipse, rect, polygon, polyline) {
    vector-effect: non-scaling-stroke;
}

/* Narrow screens: the preset card scrolls horizontally instead of running under the property toolbar
   on the right. Its width snaps to whole buttons plus 40% of one so the cut-off icon reads as "more". */
@media (max-width: 960px) {
    .elevation-toolbar-top-row[b-xkd1g6jut9] {
        --preset-btn-w: 40px;
        /* Viewport less the side margins, the property toolbar, the system-type button and its gap. */
        --preset-avail: calc(100vw - 3rem - var(--top-right-button-width, 48px) - 42px - 1rem);
    }

    .elevation-toolbar-wrapper[b-xkd1g6jut9]  .top-row-toolbar .tool-bar {
        width: auto;
    }

    .elevation-toolbar-wrapper[b-xkd1g6jut9]  .top-row-toolbar .split-button-card {
        width: calc(round(down, var(--preset-avail) - 2px - var(--preset-btn-w) * 0.4, var(--preset-btn-w)) + var(--preset-btn-w) * 0.4 + 2px);
        max-width: fit-content;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .elevation-toolbar-wrapper[b-xkd1g6jut9]  .top-row-toolbar .split-button-card::-webkit-scrollbar {
        display: none;
    }

    .elevation-toolbar-wrapper[b-xkd1g6jut9]  .top-row-toolbar .toolbar-button-group {
        flex-wrap: nowrap;
    }

    .elevation-toolbar-wrapper[b-xkd1g6jut9]  .top-row-toolbar .mud-tooltip-root {
        flex: 0 0 var(--preset-btn-w);
        justify-content: center;
        scroll-snap-align: start;
    }
}
/* _content/Lib360.Shared/Components/Views/Elevation/Toolbars/Object3DPanel.razor.rz.scp.css */
/* Settings view: same divided-row rhythm as the item list, label + hint on the left, control on the right. */
.o3d-settings[b-py423zeibl] {
    display: flex;
    flex-direction: column;
}

.o3d-setting[b-py423zeibl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.o3d-setting + .o3d-setting[b-py423zeibl] {
    border-top: 1px solid #ECECEC;
}

.o3d-setting-text[b-py423zeibl] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}

.o3d-setting-label[b-py423zeibl] {
    font-size: 0.8125rem;
    color: #4A4A4A;
}

.o3d-setting-hint[b-py423zeibl] {
    font-size: 0.75rem;
    line-height: 1.3;
    color: #9E9E9E;
}

/* Mud components render their own root, so these need ::deep to reach past the scope attribute. */
.o3d-settings[b-py423zeibl]  .o3d-setting-control {
    flex: 0 0 auto;
    margin: 0;
}

.o3d-settings[b-py423zeibl]  .o3d-setting-number {
    width: 5.5rem;
}
/* _content/Lib360.Shared/Components/Views/Elevation/Toolbars/SystemTypeTopRightMenu.razor.rz.scp.css */
.system-type-menu[b-m5g00msnym] {
    flex-shrink: 0;
    /* Anchor point for the expanded icon row. */
    position: relative;
    /* Above the preset toolbar sharing this row, which the expanded row overlaps. */
    z-index: 3;
}

/* Full-screen click-away, painted under the expanded row. pointer-events is re-enabled because the
   toolbar wrapper turns it off for everything but the cards. */
.system-type-clickaway[b-m5g00msnym] {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
}

/* The card widens in place, so its rounded right edge travels rightward with the content. Sits above
   the preset toolbar it grows over. */
.system-type-card[b-m5g00msnym] {
    flex-wrap: nowrap;
}

/* Definite, generous width so the card's shrink-to-fit isn't capped by the collapsed footprint, and
   so the reveal's 0fr track still resolves against a definite size. */
.system-type-layer[b-m5g00msnym] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 2;
    pointer-events: none;
}

/* Reserves the collapsed size only; never seen, never focusable. */
.system-type-spacer[b-m5g00msnym] {
    visibility: hidden;
    pointer-events: none;
}

/* Anchor for the overlaid chevron. */
.system-type-trigger[b-m5g00msnym] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* An animatable 0fr -> 1fr grid track: the card's width follows the revealed content without the
   content width having to be known in CSS. */
.system-type-reveal[b-m5g00msnym] {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns .2s ease-in;
}

.system-type-card.open .system-type-reveal[b-m5g00msnym] {
    grid-template-columns: 1fr;
    transition: grid-template-columns .25s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.system-type-reveal-inner[b-m5g00msnym] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    /* Trails the width slightly so buttons don't smear out of the clipped edge. */
    opacity: 0;
    transition: opacity .12s ease-in;
}

.system-type-card.open .system-type-reveal-inner[b-m5g00msnym] {
    opacity: 1;
    transition: opacity .2s ease-out .05s;
}

/* Nothing to click while collapsed - the track is 0-wide but the buttons still overflow it. */
.system-type-card:not(.open) .system-type-reveal[b-m5g00msnym] {
    pointer-events: none;
}

/* Sits over the trigger button's right edge rather than widening the card. */
.system-type-menu[b-m5g00msnym]  .system-type-chevron {
    position: absolute;
    right: -3px;
    top: 50%;
    width: .875rem;
    height: .875rem;
    margin-top: -.4375rem;
    /* Clicks and hovers belong to the button underneath. */
    pointer-events: none;
    opacity: .6;
    transition: transform .2s ease, opacity .2s ease;
}

.system-type-trigger:hover[b-m5g00msnym]  .system-type-chevron {
    opacity: 1;
}

.system-type-menu[b-m5g00msnym]  .system-type-chevron.open {
    transform: rotate(180deg);
}

/* Separates the trigger from the expanded list. */
.system-type-divider[b-m5g00msnym] {
    align-self: stretch;
    width: 1px;
    margin: 4px 2px 4px 0;
    background: #A9A9A9;
    flex-shrink: 0;
}

/* Selected treatment: see .system-type-selected in customStyles.css. */

/* Grouped buttons: square throughout, so only the card's own right edge is rounded. */
.system-type-reveal-inner[b-m5g00msnym]  .toolbar-button-group .mud-icon-button {
    border-radius: 0;
}

.system-type-reveal-inner[b-m5g00msnym]  .toolbar-button-group .mud-icon-button.system-type-last {
    border-radius: 0 6px 6px 0;
}

/* Match the footprint these buttons had inside the old text MudButtonGroup, which overrode
   MudBlazor's standalone icon-button padding and glyph size. */
.system-type-menu[b-m5g00msnym]  .mud-icon-button {
    border: none !important;
    padding: 6px 8px;
    /* MudIconButton is a circle by default; square it off so hover/ripple fills the button. */
    border-radius: 6px;
}

.system-type-menu[b-m5g00msnym]  .mud-icon-button .mud-icon-root {
    font-size: 1.516rem;
}

/* Ripple spans the whole button rather than the small centred circle. */
.system-type-menu[b-m5g00msnym]  .mud-icon-button.mud-ripple-icon:after {
    transform: scale(10, 10);
}

.system-type-menu[b-m5g00msnym]  .mud-icon-button.mud-ripple-icon:active:after {
    transform: scale(0, 0);
    opacity: .1;
    transition: 0s;
}
/* _content/Lib360.Shared/Components/Views/Plan/Plan.razor.rz.scp.css */
*[b-4jndv7yn85] {
    pointer-events: none;
}

.mouse-selection[b-4jndv7yn85] {
    pointer-events: auto;
}

svg text[b-4jndv7yn85] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no-scale rect[b-4jndv7yn85],
.no-scale circle[b-4jndv7yn85],
.no-scale path[b-4jndv7yn85],
.no-scale polygon[b-4jndv7yn85],
.no-scale line[b-4jndv7yn85] {
    shape-rendering: auto !important;
}
/* _content/Lib360.Shared/Components/Views/Plan/Toolbars/BottomLeftMenu.razor.rz.scp.css */
/* _content/Lib360.Shared/Components/Views/Plan/Toolbars/PlanToolbar.razor.rz.scp.css */

/* _content/Lib360.Shared/Components/Views/Shared/PdfPreviewOverlay.razor.rz.scp.css */
/* MudPaper is a child component so isolated CSS cannot reach it; its sizing stays inline in the .razor. */
.pdf-preview-body[b-1cuzuor0uj] {
    min-height: 0;
    flex: 1 1 auto;
    position: relative;
}

.pdf-preview-viewer[b-1cuzuor0uj] {
    width: 100%;
    height: 100%;
    min-height: 560px;
}
/* _content/Lib360.Shared/Components/Views/Shared/PropertiesWindows/ColourPickerField.razor.rz.scp.css */
/* Sized and right-aligned to match the material swatch beside a select (.option-swatch in
   GenericPropertiesWindow.razor) - --option-swatch-size is set globally on :root there. */
.colour-picker-field[b-f3mb7rnfq0] {
	position: relative;
	width: var(--option-swatch-size, 2rem);
	height: var(--option-swatch-size, 2rem);
	margin-left: auto;
}

.colour-picker-field-swatch[b-f3mb7rnfq0] {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid var(--mud-palette-lines-inputs);
	border-radius: 3px;
	cursor: pointer;
	/* The button's own background is the value being edited, so no theme background here. */
	background-clip: padding-box;
}

.colour-picker-field-swatch:hover[b-f3mb7rnfq0] {
	border-color: var(--mud-palette-action-default);
}

.colour-picker-field-swatch:disabled[b-f3mb7rnfq0] {
	cursor: default;
	opacity: 0.5;
}

.colour-picker-field-popover[b-f3mb7rnfq0] {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Overlaid onto MudColorPicker's own 32px toolbar row (.mud-picker-color-toolbar) rather than
   added as a separate row, so it reads as one more toolbar button. */
.colour-picker-field-eyedropper[b-f3mb7rnfq0] {
	position: absolute;
	top: 0;
	left: 2px;
	z-index: 1;
	height: 32px;
	display: flex;
	align-items: center;
}
/* _content/Lib360.Shared/Components/Views/Shared/PropertiesWindows/SliderNumericField.razor.rz.scp.css */
/* Deliberately global, not scoped to .slider-numeric-field: MudPopover's content is rendered by a
   central MudPopoverProvider elsewhere in the DOM, not as a physical descendant of this component's
   own markup, so an ancestor-scoped "X ::deep Y" selector never matches it. This affects every
   MudSlider in the app, not just this one - an acceptable trade since there's no other slider that
   wants the default oversized thumb. */

/* MudBlazor sizes the thumb per Size via ".mud-slider.mud-slider-{size} .mud-slider-input::-webkit-
   slider-thumb" (e.g. medium: height/width 4px, transform: scale(5, 5) -> a rendered 20px circle) -
   three classes deep, so it outranks a plain ".mud-slider-input::-webkit-slider-thumb" override by CSS
   specificity alone, regardless of load order. !important is the only way to actually win here; a click
   or hover anywhere in that rendered box hits it too, so shrinking it shrinks the hit area along with it -
   there's no separate "hit area" control for a native range input's thumb. */
[b-95h70ri3k5] .mud-slider-input::-webkit-slider-thumb {
	height: 8px !important;
	width: 8px !important;
	transform: none !important;
	/* WebKit centers the thumb on the track using this element's own margin-top, tuned by MudBlazor
	   for its native 14px thumb (margin-top: -6px) - shrinking the thumb without retuning this leaves
	   it sitting above the track instead of centered on it. */
	margin-top: -3px !important;
}

[b-95h70ri3k5] .mud-slider-input::-moz-range-thumb {
	height: 8px !important;
	width: 8px !important;
	transform: none !important;
}

/* MudBlazor adds a colored halo (box-shadow) around the thumb on hover/focus/active - on top of the
   shrunk size above, that ring is what makes the thumb read as oversized while hovering or dragging.
   The :active rule sets it with !important, so overriding it needs !important too. */
[b-95h70ri3k5] .mud-slider-input:hover::-webkit-slider-thumb,
[b-95h70ri3k5] .mud-slider-input:focus-visible::-webkit-slider-thumb,
[b-95h70ri3k5] .mud-slider-input:active::-webkit-slider-thumb {
	box-shadow: none !important;
}

[b-95h70ri3k5] .mud-slider-input:hover::-moz-range-thumb,
[b-95h70ri3k5] .mud-slider-input:focus-visible::-moz-range-thumb,
[b-95h70ri3k5] .mud-slider-input:active::-moz-range-thumb {
	box-shadow: none !important;
}

.slider-numeric-field[b-95h70ri3k5] {
	width: 5.5rem;
	margin-left: auto;
	text-align: right;
}

.slider-numeric-field-value[b-95h70ri3k5] {
	color: var(--mud-palette-text-secondary);
}
/* _content/Lib360.Shared/Components/Views/Shared/PropertiesWindows/SliderTrack.razor.rz.scp.css */
.property-slider-track[b-kol4fjiuk0] {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 18px;
	padding: 0 0.125rem;
}

/* Thin full-width base line and a thicker coloured fill drawn over it, both independent of the
   native <input>'s own track - a single native track has no cross-browser way to be two different
   thicknesses along its length. Both are purely decorative (pointer-events: none): the invisible
   input, layered on top, is what's actually draggable. */
.property-slider-rail[b-kol4fjiuk0] {
	position: absolute;
	left: 0.125rem;
	right: 0.125rem;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	border-radius: 1px;
	background: #d0d0d0;
	pointer-events: none;
}

.property-slider-fill[b-kol4fjiuk0] {
	position: absolute;
	left: 0.125rem;
	top: 50%;
	transform: translateY(-50%);
	height: 3px;
	border-radius: 1.5px;
	background: var(--mud-palette-error, rgb(225, 9, 21));
	pointer-events: none;
}

/* Copied from .viewer3d-slider (viewer3dUI.css) - the 3D view's own settings-panel sliders - so a
   property-window slider's thumb reads as the same control. Not shared directly: viewer3dUI.css
   styles plain JS-built markup, and this is a native <input> rendered by a Blazor component, so
   keeping its own copy here matches how DesignZoneSwitcher.razor.css mirrors other viewer3d-*
   metrics. The track itself is fully transparent - see .property-slider-rail/-fill above. */
.property-slider-input[b-kol4fjiuk0] {
	position: relative;
	width: 100%;
	height: 18px;
	margin: 0;
	background: transparent;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.property-slider-input[b-kol4fjiuk0]::-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);
}

.property-slider-input[b-kol4fjiuk0]::-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);
}

.property-slider-input[b-kol4fjiuk0]::-webkit-slider-runnable-track {
	background: transparent;
	height: 18px;
}

.property-slider-input[b-kol4fjiuk0]::-moz-range-track {
	background: transparent;
	height: 18px;
}

.property-slider-input[b-kol4fjiuk0]::-moz-range-progress {
	background: transparent;
}

.property-slider-input:focus[b-kol4fjiuk0] {
	outline: none;
}

.property-slider-input:focus[b-kol4fjiuk0]::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(225, 9, 21, 0.25);
}

.property-slider-input:focus[b-kol4fjiuk0]::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(225, 9, 21, 0.25);
}

.property-slider-input:disabled[b-kol4fjiuk0] {
	cursor: not-allowed;
}

.property-slider-input:disabled[b-kol4fjiuk0]::-webkit-slider-thumb {
	opacity: 0.5;
	cursor: not-allowed;
}

.property-slider-input:disabled[b-kol4fjiuk0]::-moz-range-thumb {
	opacity: 0.5;
	cursor: not-allowed;
}

.property-slider-track:has(.property-slider-input:disabled) .property-slider-rail[b-kol4fjiuk0],
.property-slider-track:has(.property-slider-input:disabled) .property-slider-fill[b-kol4fjiuk0] {
	opacity: 0.5;
}

/* The Room Light colour-temperature slider reads as a single gradient bar rather than a filled progress
   track, so the fill is hidden and the rail itself carries this static warm/cool gradient. */
.property-slider-track.colour-gradient-track[b-kol4fjiuk0] {
	height: 22px;
}

.property-slider-track.colour-gradient-track .property-slider-rail[b-kol4fjiuk0] {
	left: 0;
	right: 0;
	height: 100%;
	border-radius: 11px;
	/* An explicit plateau (44%-56%) around the neutral-white midpoint, rather than a single point a
	   linear-gradient's evenly-spaced default stops would give it - that made white too thin a target
	   to land the thumb on. */
	background: linear-gradient(to right, #ff9d2e 0%, #ffd699 15%, #ffffff 44%, #ffffff 56%, #dceeff 85%, #8ec9ff 100%);
}

.property-slider-track.colour-gradient-track .property-slider-fill[b-kol4fjiuk0] {
	display: none;
}

.property-slider-track.colour-gradient-track .property-slider-input[b-kol4fjiuk0]::-webkit-slider-thumb {
	background: #ffffff;
	border: 2px solid #b0b0b0;
}

.property-slider-track.colour-gradient-track .property-slider-input[b-kol4fjiuk0]::-moz-range-thumb {
	background: #ffffff;
	border: 2px solid #b0b0b0;
}
/* _content/Lib360.Shared/Components/Views/Shared/Toolbars/CatalogPanel.razor.rz.scp.css */
/* Palette is the app's toolbar vocabulary: #A9A9A9 card border at 6px radius, #4A4A4A label text. */
/* Fixed width so the card doesn't resize when moving between levels with different label lengths -
   long names truncate instead (full name in the tooltip). */
.catalog-panel[b-w1cdx2on3s] {
    width: 16rem;
    padding: 4px;
    background: #fff;
    border: 1px solid #A9A9A9;
    border-radius: 6px;
    overflow: hidden;
}

.catalog-restore[b-w1cdx2on3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #4A4A4A;
    background: #fff;
    border: 1px solid #A9A9A9;
    border-radius: 6px;
    cursor: pointer;
}

.catalog-restore:hover[b-w1cdx2on3s] {
    background: #F2F2F2;
}

.catalog-header[b-w1cdx2on3s] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 2px 6px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ECECEC;
}

.catalog-header-title[b-w1cdx2on3s] {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #4A4A4A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ::deep so HeaderActions buttons rendered by the host panel pick this up too. */
.catalog-header[b-w1cdx2on3s]  .catalog-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: #4A4A4A;
    cursor: pointer;
}

.catalog-header[b-w1cdx2on3s]  .catalog-icon-btn:hover {
    background: #EFEFEF;
}

.catalog-header-divider[b-w1cdx2on3s] {
    flex: 0 0 auto;
    width: 1px;
    height: 1rem;
    margin: 0 2px;
    background: #DADADA;
}

.catalog-list[b-w1cdx2on3s] {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
    /* Explicit, because overflow-y:auto would otherwise compute overflow-x to auto too and can show a
       stray horizontal scrollbar. */
    overflow-x: hidden;
}

.catalog-list[b-w1cdx2on3s]  .catalog-empty {
    padding: 7px 8px;
    font-size: 0.8125rem;
    color: #9E9E9E;
}

/* The only motion in the panel: a short fade of the header title and the body when the view changes.
   It starts part-visible rather than from 0 so it reads as a settle, not a blink. */
.catalog-fade[b-w1cdx2on3s] {
    animation: catalog-fade-in-b-w1cdx2on3s 140ms ease-out;
}

@keyframes catalog-fade-in-b-w1cdx2on3s {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-fade[b-w1cdx2on3s] {
        animation: none;
    }
}
/* _content/Lib360.Shared/Components/Views/Shared/Toolbars/CatalogSearch.razor.rz.scp.css */
/* Borderless, with just a bottom rule - it reads as the list's first row rather than a boxed field.
   Padding, gap and icon slot match .catalog-tile so the icon lines up with the tile icons below. */
.catalog-search[b-eq5gevmkuy] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 2rem;
    padding: 0 4px 0 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid #ECECEC;
    color: #B0B0B0;
    transition: border-color 120ms ease-out, color 120ms ease-out;
}

.catalog-search:focus-within[b-eq5gevmkuy] {
    border-bottom-color: #A9A9A9;
    color: #4A4A4A;
}

.catalog-search-icon[b-eq5gevmkuy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
}

.catalog-search-icon[b-eq5gevmkuy]  svg {
    width: 0.875rem;
    height: 0.875rem;
}

.catalog-search-input[b-eq5gevmkuy] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    color: #4A4A4A;
    background: none;
    border: none;
    outline: none;
}

.catalog-search-input[b-eq5gevmkuy]::placeholder {
    color: #B0B0B0;
}

.catalog-search-clear[b-eq5gevmkuy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    color: #9E9E9E;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.catalog-search-clear:hover[b-eq5gevmkuy] {
    background: #EFEFEF;
    color: #4A4A4A;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-search[b-eq5gevmkuy] {
        transition: none;
    }
}
/* _content/Lib360.Shared/Components/Views/Shared/Toolbars/CatalogTile.razor.rz.scp.css */
.catalog-tile[b-jrnrmmkh1s] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    /* Reset: this is a <button> so the whole row is one click target and reads as one to a screen
       reader, but it must not inherit the browser's button chrome or centred text. */
    font: inherit;
    text-align: left;
    color: #4A4A4A;
    background: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Rows are separated by a rule rather than each carrying its own border - one card (the panel) with
   divided rows, not a stack of cards. */
.catalog-tile + .catalog-tile[b-jrnrmmkh1s] {
    border-top: 1px solid #ECECEC;
}

.catalog-tile:hover:not(:disabled)[b-jrnrmmkh1s] {
    background: #F2F2F2;
}

.catalog-tile:disabled[b-jrnrmmkh1s] {
    cursor: default;
    opacity: 0.5;
}

/* Fixed slot so labels stay aligned whatever each icon's own proportions. */
.catalog-tile-icon[b-jrnrmmkh1s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.75rem;
    color: rgb(92, 92, 92);
}

.catalog-tile-label[b-jrnrmmkh1s] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shrinks before the label does, so the result's own name keeps priority. */
.catalog-tile-detail[b-jrnrmmkh1s] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
    font-size: 0.75rem;
    color: #9E9E9E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-tile-chevron[b-jrnrmmkh1s] {
    display: inline-flex;
    flex: 0 0 auto;
    color: #B0B0B0;
}
/* _content/Lib360.Shared/Components/Views/Shared/Toolbars/Toolbar.razor.rz.scp.css */
.panel-animate[b-pr6jjj2fr5] {
    transition: all 0.3s ease;
    animation: fadeSlideInLeft-b-pr6jjj2fr5 0.3s ease forwards;
}

@keyframes fadeSlideInLeft-b-pr6jjj2fr5 {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.tool-bar[b-pr6jjj2fr5] {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 2;
}

.tool-bar[b-pr6jjj2fr5]  .mud-card {
    border: 1px solid #A9A9A9;
    border-radius: 6px;
}

.toolbar-icon-btn-wrap[b-pr6jjj2fr5] {
    position: relative;
    display: inline-flex;
}

/* Icon strokes are authored as "1" meaning one screen pixel, but the viewBoxes disagree: the
   elevation part icons are 123x104 while the newer ones are 24x24, so the former scale down ~5x
   and their strokes would render sub-pixel grey. non-scaling-stroke makes stroke-width mean
   screen px for both, so an icon can keep stroke-width:1 whatever its viewBox. */
.tool-bar[b-pr6jjj2fr5]  svg :is(path, line, circle, ellipse, rect, polygon, polyline) {
    vector-effect: non-scaling-stroke;
}

/* No dividers between grouped buttons - the card border alone frames the group.
   ::deep must sit right after .tool-bar (the last selector segment actually scoped to this
   component) - "toolbar-button-group" is only a Class passed into the child MudButtonGroup, so it
   never carries this component's scope attribute and can't anchor a scope match itself. */
.tool-bar[b-pr6jjj2fr5]  .toolbar-button-group .mud-icon-button {
    border: none !important;
}

/* Selected tool: see .toolbar-btn-selected in customStyles.css. */
/* _content/Lib360.Shared/Components/Views/Shared/Toolbars/ViewControl.razor.rz.scp.css */
.view-control[b-0lco4snnt6] {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
}