/* Shared workspace canvas: Earth above the clouds preview. */
/* Interpolate the background's origin with the sidebar, not its final width. */
@property --crm-workspace-left {
    syntax: '<length>';
    inherits: true;
    initial-value: 260px;
}
:root { --crm-workspace-left: var(--crm-sidebar-width); }
html[data-sidebar="compact"] { --crm-workspace-left: var(--crm-sidebar-rail); }
body.login-page { --crm-workspace-left: 0px; }
body.login-page, body:has(.app-content), .app-content,
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView),
#clientView .client-view-header::before,
#purchaseCardView .purchase-card-header, #orderCardView .order-card-header {
    --crm-workspace-image-width: max(calc(100vw - var(--crm-workspace-left)), 177.69dvh);
    background-color: #b8d6ee;
    background-image: url('/icons/workspace-earth-clouds.webp');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: var(--crm-workspace-image-width) auto;
    background-position: calc((100vw + var(--crm-workspace-left) - var(--crm-workspace-image-width)) / 2) center;
}
#purchaseCardView .purchase-card-header, #orderCardView .order-card-header { border: 0; box-shadow: none; }

/* Content starts 12px below the shared header, matching the Clients table. */
#clientView .client-page { margin-top: 12px; }
#clientView .client-overview:not(:has(> :not([hidden]))) { display: none; }
#purchaseCardView .purchase-card { margin-top: 12px; }
/* Keep the card's bottom spacing inside the workspace background. */
#purchaseCardView { min-height: 100dvh; display: flow-root; }
#purchaseCardView[hidden] { display: none; }
/* Templates drawer uses the exact background framing selected from the preview. */
:is(#documentsFopDrawer, #messageTemplatesView, #clientChangesPanel, #clientDirectoryModal, #productDirectoryModal, #stockHistoryPanel, #physicalStockPanel, #purchaseReceiveModal, #purchaseReceiveHistoryModal) > .purchase-receive-card {
    background: #b8d6ee url('/icons/workspace-earth-clouds.webp') 52% center / auto 1404px no-repeat;
}