/* Shared mobile-style JB orbit for startup, page, dialog and table loading. */
.jb-loader,
body .p-progress-spinner,
body .p-datatable-loading-overlay::after {
    position: relative;
    display: inline-block;
    width: 88px;
    height: 72px;
    vertical-align: middle;
    overflow: visible;
}
.jb-loader::after,
body .p-progress-spinner::after,
body .p-datatable-loading-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 0;
    background: url('../images/jb-loading.svg') center / contain no-repeat;
}
body .p-progress-spinner::before,
body .p-progress-spinner-svg,
body .p-datatable-loading-overlay > .p-icon-wrapper,
body .p-datatable-loading-icon { display: none !important; }
body .p-datatable-loading-overlay::after { position: relative; inset: auto; }

/* Blocking loads share one glass treatment, while button-sized progress remains compact. */
body .progress-spinner,
body .loading-overlay:has(.p-progress-spinner),
body .jb-loading-region,
body .p-datatable-loading-overlay {
    background: color-mix(in srgb, var(--jb-bg, var(--portal-startup-bg)) 62%, transparent) !important;
    -webkit-backdrop-filter: blur(8px) saturate(.85);
    backdrop-filter: blur(8px) saturate(.85);
}
/* Dedicated loading regions override legacy 24–64px inline spinner dimensions. */
body .loading-overlay .p-progress-spinner,
body .loading-container .p-progress-spinner,
body .loading-content .p-progress-spinner,
body .preview-spinner .p-progress-spinner,
body .progress-spinner .p-progress-spinner,
body .jb-loading-region .p-progress-spinner {
    width: 104px !important;
    height: 85px !important;
}
/* Widget loaders use the smaller variant; inline status indicators
   and explicitly compact widget rows keep their existing dimensions. */
body .widget-loading:not(.compact) .p-progress-spinner {
    width: 88px !important;
    height: 72px !important;
}
body .loading-overlay > .progress-spinner {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.jb-loading-region {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-radius: inherit;
}
/* Legacy pages own their loading state. Give direct owners a containing block;
   explicit results regions and startup keep their separate existing contracts. */
body :where(ng-component, app-company, app-users, app-customers, app-crews,
    app-time-report-flexible, app-jobclock, app-qb-send, app-qb-mapping,
    app-integration-detail, app-integration-detail-data, app-integration-detail-settings,
    app-integration-detail-import, app-audit, app-joda, jb-sales-dashboard,
    jb-jobclock-reports-mobile, jb-permissions-editor, jb-form-builder,
    jb-scratchpad-sidebar, app-applogs, app-marketing, app-useractivities,
    app-product-updates, app-useractivitiesdetail, app-rag, app-websockets,
    app-mobileapp, app-ai-dashboard, app-rag-overview):has(> .progress-spinner, > .loading-overlay) {
    display: block;
    position: relative;
    min-height: 240px;
}
body .card:has(> .progress-spinner),
body .p-dialog-content:has(.progress-spinner, .loading-overlay) {
    position: relative;
    min-height: 240px;
}
body .progress-spinner,
body .loading-overlay:has(.p-progress-spinner) {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    z-index: 10 !important;
}
body .p-datatable:has(> .p-datatable-loading-overlay) { min-height: 240px; }

app-root > .loading-wrapper > .jb-loader,
body > .loading-wrapper > .jb-loader {
    width: 144px !important;
    height: 118px !important;
}