/*
 * The light front end, on for everyone (it started as an opt-in "compatibility mode" for slower computers and was
 * faster for every account). Loaded last, so it wins; html:root keeps the specificity the opt-in class had.
 *
 *  - no transitions on dialogs, menus and tabs (they appear at once instead of fading over ~300ms) and no
 *    decorative endless animations; loading spinners keep spinning
 *  - no backdrop-filter / blur (the most expensive effect on a weak GPU, repainted on every scroll)
 *  - no decorative shadows on large surfaces (cards, dialogs, menus); ring borders and focus rings stay
 */

/* Transitions off on the components that animate in and out (dialogs, menus, tabs, collapses): they appear at
   once. Plain class selectors only: a universal override cost ~10% extra style recalculation on every page. */
html:root .modal,
html:root .modal-backdrop,
html:root .modal-dialog,
html:root .modal-content,
html:root .fade,
html:root .collapsing,
html:root .collapse,
html:root .dropdown-menu,
html:root .offcanvas,
html:root .offcanvas-backdrop,
html:root .toast,
html:root .tooltip,
html:root .popover,
html:root .tab-pane,
html:root .accordion-button,
html:root .accordion-collapse,
html:root .ui-sheet,
html:root .swal2-popup,
html:root .swal2-container,
html:root .notyf__toast,
html:root .sidebar,
html:root .sidebar-link,
html:root .sidebar-content,
html:root .navbar,
html:root .btn,
html:root .form-control,
html:root .form-select,
html:root .form-check-input,
html:root .nav-link,
html:root .page-link,
html:root .card,
html:root .list-group-item,
html:root .dropdown-item,
html:root .select2-dropdown {
    transition: none !important;
}

/* Blur behind surfaces: the most expensive effect on a weak GPU, repainted while anything moves */
html:root #ai-chat-page .ai-chat-composer-card,
html:root #ai-chat-page .ai-chat-reply-chip,
html:root #ai-chat-page .ai-chat-topbar,
html:root #ai-chat-page .chat-msg.assistant .bubble,
html:root #ai-chat-page.is-landing .ai-chat-topbar,
html:root #ai-chat-page.is-landing .ai-chat-usage,
html:root #pos-settings .pos-settings-save-bar-inner,
html:root #support-page .support-ai-hero__chip,
html:root .cd-dt-loading-overlay,
html:root .demo-workspace-bottom-bar__content,
html:root .modal,
html:root .onboarding-finish-launch__backdrop,
html:root .onboarding-pim-activate-orb__core,
html:root .onboarding-step-loading-overlay,
html:root .onboarding-wizard-header,
html:root .onboarding-wizard-page--pim-fullscreen .onboarding-wizard-header,
html:root .pim-module-overlay,
html:root .spotlight-overlay,
html:root .ui-page-crm-error-monitor .error-container,
html:root .ui-page-crm-error-monitor .error-empty-state,
html:root .ui-page-crm-error-monitor .modern-header,
html:root .ui-page-crm-error-monitor .modern-panel,
html:root .ui-page-crm-error-monitor .table-container,
html:root .ui-page-crm-management-index.md-dash .md-toolbar,
html:root .ui-page-seller-accounting .bookkeeping-hero__pill,
html:root .ui-page-seller-content .asset-upload-progress-overlay,
html:root .ui-page-seller-content .ui-autocomplete.pim-wizard-autocomplete,
html:root .ui-products .product-chart-tooltip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Decorative endless animations (live dots, glows, pulses, shimmer); loading spinners keep turning */
html:root .badge-glow,
html:root div.pulse,
html:root .batch-sync-status--auto .batch-sync-status__ping,
html:root .batch-sync-status--auto .batch-sync-status__ring,
html:root .ui-live-dot,
html:root .ui-page-home-center-home .fch-live__dot,
html:root #batchTemplateGroupsBar .btg-tile__live-dot,
html:root #ai-chat-page .ai-chat-aurora,
html:root #ai-chat-page .ai-chat-aurora-orb--a,
html:root #ai-chat-page .ai-chat-aurora-orb--b,
html:root #ai-chat-page .ai-chat-aurora-orb--c,
html:root #support-page .support-ai-hero::before,
html:root #support-page .support-ai-hero__badge,
html:root #support-page .support-ai-hero__badge::before,
html:root #support-page .support-ai-hero__chip,
html:root #support-page .support-ai-hero__icon,
html:root #support-page .support-ai-hero__icon-wrap::after,
html:root #support-page .support-ai-hero__sparkle,
html:root #exceededUsageModal .upgrade-modal-icon .upgrade-chart-dot,
html:root #exceededUsageModal .upgrade-modal-icon .upgrade-chart-spark,
html:root #exceededUsageModal .upgrade-modal-icon::after,
html:root #exceededUsageModal .upgrade-modal-icon::before,
html:root #posTerminalModal .pos-terminal-pulse,
html:root #posTerminalModal .pos-terminal-pulse::before,
html:root .ui-page-crm-dialer.sales-dialer-page.is-running .sales-dialer-status__dot,
html:root .onboarding-pim-activate-orb__glow,
html:root .onboarding-pim-activate-orb__ring,
html:root .onboarding-pim-activate-orb__spark,
html:root .ui-page-general-offline .offline-art__arc,
html:root .ui-page-general-offline .offline-art__glyph,
html:root .ui-page-general-offline .offline-art__ring,
html:root .skeleton-shimmer,
html:root .ui-skeleton,
html:root .skeleton-card {
    animation: none !important;
}

html:root {
    scroll-behavior: auto !important;
}

/* Decorative shadows on large surfaces (painted over big areas, again while scrolling) */
html:root .card,
html:root .modal-content,
html:root .dropdown-menu,
html:root .popover,
html:root .toast,
html:root .navbar,
html:root .navbar-bg,
html:root .sidebar,
html:root .sidebar-content,
html:root .offcanvas,
html:root .ui-sheet,
html:root .swal2-popup,
html:root .select2-dropdown,
html:root .daterangepicker,
html:root .notyf__toast,
html:root .table-responsive,
html:root .dataTables_wrapper,
html:root .page-header-toolbar {
    box-shadow: none !important;
}
/* A split dialog's wrapper is see-through (overlays.css), so a border there drew a loose line around its panels */
html:root .card,
html:root .modal-content:not(.ui-modal-split),
html:root .dropdown-menu,
html:root .popover,
html:root .swal2-popup {
    border: 1px solid var(--ui-border, rgba(0, 0, 0, .125));
}

/* Without the dialog's shadow and blur, a darker backdrop keeps the dialog clearly in front */
html:root .modal-backdrop.show {
    opacity: .6;
}

/* Bootstrap's slide-in dialogs end in their final state immediately (Bootstrap already hides .fade:not(.show);
   repeating that rule here cost ~30% extra style recalculation) */
html:root .modal.fade .modal-dialog {
    transform: none !important;
}

/* Decorative blur effects (the AI chat glow and the onboarding launch). The support phone number blur is
   intentional and stays. */
html:root #ai-chat-page .ai-chat-aurora-orb,
html:root #ai-chat-page .ai-chat-input-glow--ring::before,
html:root #ai-chat-page .ai-chat-input-glow--soft::before {
    display: none !important;
}
html:root body.onboarding-finish-launch-active .onboarding-wizard-shell {
    filter: none !important;
}


/* Spinners that are present but hidden kept animating on every page (the browser produced frames for them nonstop):
   the network-status alert (opacity 0 until offline), the top-bar search spinner (until a search runs) and the table
   loading overlay (until a table loads). Paused while their container is in the hidden state. */
html:root .network-alert:not(.network-warning):not(.network-success) :is(.spinner-border, .spinner-grow, .fa-spin),
html:root .spotlight-search-icon-spinner:not(.loading),
html:root .spotlight-search-icon-spinner:not(.loading) :is(.spinner-border, .spinner-grow),
html:root .cd-dt-loading-overlay:not(.is-visible) :is(.spinner-border, .spinner-grow, .fa-spin),
html:root .invisible :is(.spinner-border, .spinner-grow, .fa-spin) {
    animation-play-state: paused !important;
}