/*
 * FlexCC design language applied to MainCRM's Bootstrap 5 / OneUI surfaces.
 *
 * flx-tokens.css holds the vocabulary (a verbatim copy of FlexCC's tokens.css).
 * This file is the only MainCRM-specific part: it maps those tokens onto the
 * classes OneUI actually ships, so the two products read as one system.
 *
 * Load order matters - this must come after oneui.min.css.
 *
 * Everything is scoped to .flx-theme on #page-container, so the whole skin can
 * be switched off by removing one class rather than reverting a stylesheet.
 *
 * Dark mode: MainCRM puts .dark-mode on #page-container, which is also where
 * .flx-theme lives, so the dark token block in flx-tokens.css applies to the
 * same element and cascades to everything inside it.
 */

/* ------------------------------------------------------------------ */
/* 1. Bootstrap variable remap                                         */
/*    OneUI reads these for most components, so redefining them here   */
/*    carries the palette into places this file never names.           */
/* ------------------------------------------------------------------ */

.flx-theme {
    --bs-body-font-family: var(--flx-font-family-base);
    --bs-body-font-size: var(--flx-font-size-base);
    --bs-body-line-height: var(--flx-line-height-normal);
    --bs-body-bg: var(--flx-bg-page);
    --bs-body-color: var(--flx-text-primary);

    --bs-primary: var(--flx-primary);
    --bs-primary-rgb: 0, 125, 251;
    --bs-secondary: var(--flx-text-secondary);
    --bs-success: var(--flx-success);
    --bs-danger: var(--flx-danger);
    --bs-warning: var(--flx-warning);
    --bs-info: var(--flx-info);

    --bs-link-color: var(--flx-primary);
    --bs-link-hover-color: var(--flx-primary-hover);

    --bs-border-color: var(--flx-border);
    --bs-border-color-translucent: var(--flx-border);
    --bs-border-radius: var(--flx-radius-md);
    --bs-border-radius-sm: var(--flx-radius-sm);
    --bs-border-radius-lg: var(--flx-radius-lg);
    --bs-border-radius-xl: var(--flx-radius-xl);
    --bs-border-radius-pill: var(--flx-radius-pill);

    --bs-box-shadow-sm: var(--flx-shadow-1);
    --bs-box-shadow: var(--flx-shadow-2);
    --bs-box-shadow-lg: var(--flx-shadow-overlay);

    /* Brand blue for primary actions and the active nav item, pinned to the
     * light ramp in both themes. The dark ramp's --flx-primary is a pale tint
     * meant to be read as text on a dark surface; white text cannot sit on it.
     * Values are primary-600 / 700 / 800 from the light ramp. */
    --flx-action-bg: #007dfb;
    --flx-action-bg-hover: #0b66c9;
    --flx-action-bg-active: #0a5cb8;
    --flx-action-fg: #ffffff;
}

.flx-theme,
.flx-theme .fs-base {
    font-family: var(--flx-font-family-base);
    color: var(--flx-text-primary);
}

/* Page background.
 * The theme class sits on #page-container rather than <body>, so the fill is
 * set there; the :has() rule carries the same colour onto <body> so overscroll
 * past the container does not flash white. Browsers without :has() simply keep
 * the container fill, which covers the viewport anyway. */
.flx-theme,
.flx-theme #main-container {
    background-color: var(--flx-bg-page);
}

body:has(> #page-container.flx-theme),
body:has(> .flx-theme) {
    background-color: var(--flx-bg-page);
}

/* Links, but never anchors acting as buttons: Bootstrap colours those through
 * --bs-btn-color on a lower-specificity .btn rule, which a bare `a` selector
 * would silently beat - leaving a filled button with same-colour text. */
.flx-theme a:not(.btn):not(.nav-main-link):not(.dropdown-item) {
    color: var(--flx-primary);
}

.flx-theme a:not(.btn):not(.nav-main-link):not(.dropdown-item):hover {
    color: var(--flx-primary-hover);
}

/* ------------------------------------------------------------------ */
/* 2. Type scale                                                       */
/* ------------------------------------------------------------------ */

.flx-theme .fs-sm { font-size: var(--flx-font-size-sm); }
.flx-theme .fs-xs { font-size: var(--flx-font-size-xs); }
.flx-theme .fs-lg { font-size: var(--flx-font-size-lg); }

.flx-theme h1, .flx-theme .h1 { font-size: var(--flx-font-size-3xl); line-height: var(--flx-line-height-tight); }
.flx-theme h2, .flx-theme .h2 { font-size: var(--flx-font-size-2xl); line-height: var(--flx-line-height-tight); }
.flx-theme h3, .flx-theme .h3 { font-size: var(--flx-font-size-xl); line-height: var(--flx-line-height-snug); }
.flx-theme h4, .flx-theme .h4 { font-size: var(--flx-font-size-lg); line-height: var(--flx-line-height-snug); }
.flx-theme h5, .flx-theme .h5 { font-size: var(--flx-font-size-base); }
.flx-theme h6, .flx-theme .h6 { font-size: var(--flx-font-size-sm); }

.flx-theme .text-muted { color: var(--flx-text-muted) !important; }
.flx-theme .text-primary { color: var(--flx-primary) !important; }
.flx-theme .text-success { color: var(--flx-success) !important; }
.flx-theme .text-danger { color: var(--flx-danger) !important; }
.flx-theme .text-warning { color: var(--flx-warning) !important; }
.flx-theme .text-info { color: var(--flx-info) !important; }

/* ------------------------------------------------------------------ */
/* 3. Surfaces: blocks, cards, modals                                  */
/*    FlexCC's .flx-shell recipe - 1px border, xl radius, two shadows. */
/* ------------------------------------------------------------------ */

.flx-theme .block {
    background-color: var(--flx-bg-surface);
    border: 1px solid var(--flx-border);
    border-radius: var(--flx-radius-xl);
    box-shadow: var(--flx-shadow-1), var(--flx-shadow-2) !important;
    overflow: hidden;
}

.flx-theme .block.block-bordered {
    border-color: var(--flx-border);
}

.flx-theme .block-header {
    background-color: transparent;
    border-bottom: 1px solid var(--flx-border);
}

.flx-theme .block-header-default {
    background-color: var(--flx-bg-subtle);
}

.flx-theme .block-title {
    font-size: var(--flx-font-size-base);
    font-weight: 600;
    color: var(--flx-text-primary);
}

.flx-theme .card,
.flx-theme .list-group-item {
    background-color: var(--flx-bg-surface);
    border-color: var(--flx-border);
    color: var(--flx-text-primary);
}

.flx-theme .card {
    border-radius: var(--flx-radius-lg);
    box-shadow: var(--flx-shadow-1);
}

.flx-theme .modal-content {
    background-color: var(--flx-bg-surface);
    border: 1px solid var(--flx-border);
    border-radius: var(--flx-radius-xl);
    box-shadow: var(--flx-shadow-overlay);
}

.flx-theme .modal-header,
.flx-theme .modal-footer {
    border-color: var(--flx-border);
}

.flx-theme .dropdown-menu {
    background-color: var(--flx-dropdown-bg);
    border: 1px solid var(--flx-dropdown-border);
    border-radius: var(--flx-radius-lg);
    box-shadow: var(--flx-dropdown-shadow);
}

.flx-theme .dropdown-item {
    color: var(--flx-dropdown-item-color);
}

.flx-theme .dropdown-item:hover,
.flx-theme .dropdown-item:focus {
    background-color: var(--flx-dropdown-item-hover-bg);
    color: var(--flx-dropdown-item-hover-color);
}

.flx-theme .bg-body-light {
    background-color: var(--flx-bg-subtle) !important;
}

.flx-theme .bg-body-dark {
    background-color: var(--flx-bg-page) !important;
}

/* ------------------------------------------------------------------ */
/* 4. Shell: header and sidebar                                        */
/* ------------------------------------------------------------------ */

.flx-theme #page-header {
    background-color: var(--flx-bg-surface);
    border-bottom: 1px solid var(--flx-border);
    box-shadow: var(--flx-shadow-1);
}

.flx-theme #sidebar {
    background-color: var(--flx-bg-surface);
    border-right: 1px solid var(--flx-border);
}

/* Sidebar entries follow FlexCC's secondary menu link, which is the text-nav
 * analogue of MainCRM's sidebar (the agent panel's icon rail is not). */
.flx-theme .nav-main-link {
    border: 0;
    border-radius: var(--flx-radius-md);
    margin: 1px 8px;
    padding: 8px 10px;
    gap: 8px;
    background: transparent;
    color: var(--flx-text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    transition: all .16s ease;
}

.flx-theme .nav-main-link:hover,
.flx-theme .nav-main-link:focus {
    background: var(--flx-bg-page);
    color: var(--flx-text-primary);
}

/* Active item is the brand blue fill with white text in both themes.
 * FlexCC uses a neutral pill here; this is a deliberate MainCRM departure. */
.flx-theme .nav-main-link.active,
.flx-theme.dark-mode .nav-main-link.active {
    background: var(--flx-action-bg);
    color: var(--flx-action-fg);
    font-weight: 600;
}

.flx-theme .nav-main-link.active:hover,
.flx-theme .nav-main-link.active:focus,
.flx-theme.dark-mode .nav-main-link.active:hover,
.flx-theme.dark-mode .nav-main-link.active:focus {
    background: var(--flx-action-bg-hover);
    color: var(--flx-action-fg);
}

.flx-theme .nav-main-link.active .nav-main-link-icon {
    color: var(--flx-action-fg);
}

.flx-theme .nav-main-link .nav-main-link-icon {
    color: inherit;
}

.flx-theme .nav-main-heading {
    color: var(--flx-text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 5. Buttons                                                          */
/*                                                                     */
/*    FlexCC's button system (design/tailwind-components.css): only     */
/*    primary is a solid fill. success / warning / danger / info are    */
/*    tinted - a 100 fill, a 200 border and 700 text - so a page full   */
/*    of actions stays calm and the one filled button is the primary    */
/*    one. The .btn-* / .btn-alt-* pair keeps MainCRM's existing        */
/*    intensity ordering by stepping the alt variants down to a 50 fill.*/
/*                                                                     */
/*    OneUI bakes hex into per-class --bs-btn-* vars, so each variant   */
/*    has to be restated rather than inherited from --bs-primary.       */
/* ------------------------------------------------------------------ */

.flx-theme .btn {
    --bs-btn-border-radius: var(--flx-radius-md);
    --bs-btn-font-size: var(--flx-font-size-sm);
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 38px;
    font-weight: 600;
    line-height: 1.2;
    transition: color var(--flx-duration-base) ease,
                background-color var(--flx-duration-base) ease,
                border-color var(--flx-duration-base) ease;
}

.flx-theme .btn-sm {
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-font-size: var(--flx-font-size-xs);
    min-height: 30px;
}

/* Primary actions - add, save, submit.
 * Brand blue fill with white text in both themes. MainCRM uses .btn-alt-primary
 * for most of these (163 call sites against 79 for .btn-primary), so the two
 * are deliberately identical rather than a filled/tinted pair. */
.flx-theme .btn-primary,
.flx-theme .btn-alt-primary {
    --bs-btn-bg: var(--flx-action-bg);
    --bs-btn-border-color: var(--flx-action-bg);
    --bs-btn-color: var(--flx-action-fg);
    --bs-btn-hover-bg: var(--flx-action-bg-hover);
    --bs-btn-hover-border-color: var(--flx-action-bg-hover);
    --bs-btn-hover-color: var(--flx-action-fg);
    --bs-btn-active-bg: var(--flx-action-bg-active);
    --bs-btn-active-border-color: var(--flx-action-bg-active);
    --bs-btn-active-color: var(--flx-action-fg);
    --bs-btn-disabled-bg: var(--flx-action-bg);
    --bs-btn-disabled-border-color: var(--flx-action-bg);
    --bs-btn-disabled-color: var(--flx-action-fg);
}

.flx-theme .btn-primary .nav-main-link-icon,
.flx-theme .btn-primary i,
.flx-theme .btn-alt-primary i {
    color: inherit;
}

/* secondary: the neutral default action */
.flx-theme .btn-secondary,
.flx-theme .btn-alt-secondary {
    --bs-btn-bg: var(--flx-bg-subtle);
    --bs-btn-border-color: var(--flx-border-strong);
    --bs-btn-color: var(--flx-text-secondary);
    --bs-btn-hover-bg: var(--flx-primary-50);
    --bs-btn-hover-border-color: var(--flx-primary-200);
    --bs-btn-hover-color: var(--flx-primary-700);
    --bs-btn-active-bg: var(--flx-primary-50);
    --bs-btn-active-border-color: var(--flx-primary-200);
    --bs-btn-active-color: var(--flx-primary-700);
}

.flx-theme .btn-success {
    --bs-btn-bg: var(--flx-success-100);
    --bs-btn-border-color: var(--flx-success-200);
    --bs-btn-color: var(--flx-success-700);
    --bs-btn-hover-bg: var(--flx-success-50);
    --bs-btn-hover-border-color: var(--flx-success-300);
    --bs-btn-hover-color: var(--flx-success-800);
    --bs-btn-active-bg: var(--flx-success-200);
    --bs-btn-active-color: var(--flx-success-800);
}

.flx-theme .btn-alt-success {
    --bs-btn-bg: var(--flx-success-50);
    --bs-btn-border-color: var(--flx-success-200);
    --bs-btn-color: var(--flx-success-700);
    --bs-btn-hover-bg: var(--flx-success-100);
    --bs-btn-hover-color: var(--flx-success-800);
}

.flx-theme .btn-danger {
    --bs-btn-bg: var(--flx-danger-100);
    --bs-btn-border-color: var(--flx-danger-200);
    --bs-btn-color: var(--flx-danger-700);
    --bs-btn-hover-bg: var(--flx-danger-50);
    --bs-btn-hover-border-color: var(--flx-danger-300);
    --bs-btn-hover-color: var(--flx-danger-800);
    --bs-btn-active-bg: var(--flx-danger-200);
    --bs-btn-active-color: var(--flx-danger-800);
}

.flx-theme .btn-alt-danger {
    --bs-btn-bg: var(--flx-danger-50);
    --bs-btn-border-color: var(--flx-danger-200);
    --bs-btn-color: var(--flx-danger-700);
    --bs-btn-hover-bg: var(--flx-danger-100);
    --bs-btn-hover-color: var(--flx-danger-800);
}

.flx-theme .btn-warning {
    --bs-btn-bg: var(--flx-warning-100);
    --bs-btn-border-color: var(--flx-warning-200);
    --bs-btn-color: var(--flx-warning-700);
    --bs-btn-hover-bg: var(--flx-warning-50);
    --bs-btn-hover-border-color: var(--flx-warning-300);
    --bs-btn-hover-color: var(--flx-warning-800);
    --bs-btn-active-bg: var(--flx-warning-200);
    --bs-btn-active-color: var(--flx-warning-800);
}

.flx-theme .btn-alt-warning {
    --bs-btn-bg: var(--flx-warning-50);
    --bs-btn-border-color: var(--flx-warning-200);
    --bs-btn-color: var(--flx-warning-700);
    --bs-btn-hover-bg: var(--flx-warning-100);
    --bs-btn-hover-color: var(--flx-warning-800);
}

.flx-theme .btn-info {
    --bs-btn-bg: var(--flx-info-100);
    --bs-btn-border-color: var(--flx-info-200);
    --bs-btn-color: var(--flx-info-700);
    --bs-btn-hover-bg: var(--flx-info-50);
    --bs-btn-hover-border-color: var(--flx-info-300);
    --bs-btn-hover-color: var(--flx-info-800);
    --bs-btn-active-bg: var(--flx-info-200);
    --bs-btn-active-color: var(--flx-info-800);
}

.flx-theme .btn-alt-info {
    --bs-btn-bg: var(--flx-info-50);
    --bs-btn-border-color: var(--flx-info-200);
    --bs-btn-color: var(--flx-info-700);
    --bs-btn-hover-bg: var(--flx-info-100);
    --bs-btn-hover-color: var(--flx-info-800);
}

/* ghost / link buttons */
.flx-theme .btn-link {
    --bs-btn-color: var(--flx-primary);
    --bs-btn-hover-color: var(--flx-primary-hover);
    font-weight: 500;
}

/* square icon actions in block headers - FlexCC's .flx-icon-button */
.flx-theme .btn-block-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: var(--flx-radius-md);
    border: 1px solid transparent;
    color: var(--flx-text-muted);
    transition: all var(--flx-duration-base) ease;
}

.flx-theme .btn-block-option:hover {
    border-color: var(--flx-primary-200);
    background: var(--flx-primary-100);
    color: var(--flx-primary-700);
}

.flx-theme .btn:focus-visible,
.flx-theme .btn.focus {
    box-shadow: var(--flx-focus-ring);
}

/* ------------------------------------------------------------------ */
/* 6. Forms                                                            */
/* ------------------------------------------------------------------ */

.flx-theme .form-control,
.flx-theme .form-select,
.flx-theme .form-control-alt {
    font-family: var(--flx-font-family-base);
    background-color: var(--flx-input-alt-bg);
    border: 1px solid var(--flx-input-alt-border);
    border-radius: var(--flx-input-radius);
    color: var(--flx-text-primary);
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.flx-theme .form-control::placeholder,
.flx-theme .form-control-alt::placeholder {
    color: var(--flx-input-alt-placeholder);
    opacity: 1;
}

.flx-theme .form-control:focus,
.flx-theme .form-select:focus,
.flx-theme .form-control-alt:focus {
    background-color: var(--flx-input-alt-focus-bg);
    border-color: var(--flx-input-alt-focus-border);
    box-shadow: var(--flx-input-focus-ring);
    color: var(--flx-text-primary);
}

.flx-theme .form-label {
    font-size: var(--flx-font-size-sm);
    font-weight: 500;
    color: var(--flx-text-secondary);
}

.flx-theme .input-group-text {
    background-color: var(--flx-bg-subtle);
    border-color: var(--flx-input-alt-border);
    border-radius: var(--flx-input-radius);
    color: var(--flx-text-muted);
}

.flx-theme .form-check-input:checked {
    background-color: var(--flx-primary);
    border-color: var(--flx-primary);
}

.flx-theme .form-check-input:focus {
    border-color: var(--flx-primary-300);
    box-shadow: var(--flx-focus-ring);
}

/* select2 and other plugins render their own shells - keep them in step */
.flx-theme .select2-container--default .select2-selection--single,
.flx-theme .select2-container--default .select2-selection--multiple {
    background-color: var(--flx-input-alt-bg);
    border: 1px solid var(--flx-input-alt-border);
    border-radius: var(--flx-input-radius);
}

.flx-theme .select2-dropdown {
    background-color: var(--flx-dropdown-bg);
    border-color: var(--flx-dropdown-border);
    border-radius: var(--flx-radius-lg);
    box-shadow: var(--flx-dropdown-shadow);
}

/* ------------------------------------------------------------------ */
/* 7. Tables, badges, alerts                                           */
/* ------------------------------------------------------------------ */

.flx-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--flx-text-primary);
    --bs-table-border-color: var(--flx-border);
    --bs-table-striped-bg: var(--flx-bg-subtle);
    --bs-table-hover-bg: var(--flx-primary-50);
    font-size: var(--flx-font-size-sm);
}

.flx-theme .table > thead {
    background-color: var(--flx-bg-subtle);
    color: var(--flx-text-secondary);
}

.flx-theme .table > thead th {
    font-weight: 600;
    font-size: var(--flx-font-size-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom-color: var(--flx-border-strong);
}

.flx-theme .badge {
    border-radius: var(--flx-radius-pill);
    font-weight: 500;
    font-size: var(--flx-font-size-xs);
    padding: .25em .7em;
}

.flx-theme .badge.bg-primary { background-color: var(--flx-primary) !important; color: var(--flx-on-primary); }
.flx-theme .badge.bg-success { background-color: var(--flx-success) !important; color: var(--flx-on-status); }
.flx-theme .badge.bg-danger  { background-color: var(--flx-danger)  !important; color: var(--flx-on-status); }
.flx-theme .badge.bg-warning { background-color: var(--flx-warning) !important; color: var(--flx-on-status); }
.flx-theme .badge.bg-info    { background-color: var(--flx-info)    !important; color: var(--flx-on-status); }

/* Solid brand backgrounds (dashboard tiles, banners).
 *
 * These are pinned to the light ramp in both modes on purpose. The markup that
 * uses them pairs the fill with a hardcoded .text-light, and the dark ramp's
 * 600 steps are pale tints intended as text on a dark surface - binding the
 * fill to the mode-flipping token would put white text on near-white.
 * FlexCC solves this with --flx-on-status; MainCRM's existing markup cannot,
 * so the fill stays constant instead. */
.flx-theme .bg-primary   { background-color: #007dfb !important; }
.flx-theme .bg-success   { background-color: #16a34a !important; }
.flx-theme .bg-danger    { background-color: #dc2626 !important; }
.flx-theme .bg-warning   { background-color: #d97706 !important; }
.flx-theme .bg-info      { background-color: #0d9488 !important; }
.flx-theme .bg-secondary { background-color: #475569 !important; }

/* OneUI's decorative fills, used on the dashboard tiles. They have no FlexCC
 * counterpart, so they are folded into the nearest palette entry rather than
 * left as the only two colours on the page that are not from the system. */
.flx-theme .bg-city      { background-color: #dc2626 !important; }
.flx-theme .bg-city-dark { background-color: #334155 !important; }

.flx-theme .alert {
    border-radius: var(--flx-radius-lg);
    border-width: 1px;
    font-size: var(--flx-font-size-sm);
}

.flx-theme .alert-success { background-color: var(--flx-success-50); border-color: var(--flx-success-200); color: var(--flx-success-700); }
.flx-theme .alert-danger  { background-color: var(--flx-danger-50);  border-color: var(--flx-danger-200);  color: var(--flx-danger-700); }
.flx-theme .alert-warning { background-color: var(--flx-warning-50); border-color: var(--flx-warning-200); color: var(--flx-warning-700); }
.flx-theme .alert-info    { background-color: var(--flx-primary-50); border-color: var(--flx-primary-200); color: var(--flx-primary-700); }

/* ------------------------------------------------------------------ */
/* 8. Page loader                                                      */
/*    Ported from flexcc/resources/css/design/components/loaders.css   */
/* ------------------------------------------------------------------ */

.flx-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--flx-z-loader, 9999);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(248, 251, 255, 0.88);
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility .28s ease;
}

.flx-loader-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.flx-loader-panel {
    min-width: 260px;
    max-width: 320px;
    text-align: center;
    background: var(--flx-bg-subtle);
    border: 1px solid var(--flx-primary-100);
    border-radius: var(--flx-radius-xl);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--flx-primary) 14%, transparent);
    padding: 18px 20px 16px;
}

.flx-loader-logo {
    display: block;
    width: auto;
    height: 42px;
    margin: 0 auto 10px;
}

.flx-loader-title {
    margin: 0;
    font-size: var(--flx-font-size-base);
    font-weight: 500;
    color: var(--flx-primary-700);
}

.flx-loader-version {
    margin: 2px 0 0;
    font-size: var(--flx-font-size-xs);
    color: var(--flx-text-muted);
}

.flx-loader-track {
    margin-top: 12px;
    width: 100%;
    height: 4px;
    border-radius: var(--flx-radius-pill);
    background: var(--flx-bg-surface);
    overflow: hidden;
}

.flx-loader-bar {
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--flx-primary-400) 0%, var(--flx-primary-600) 100%);
    animation: flxLoaderShift 1.1s ease-in-out infinite;
}

.dark-mode .flx-loader-overlay {
    background: var(--flx-overlay-strong);
}

.dark-mode .flx-loader-panel {
    background: var(--flx-bg-surface);
    border-color: var(--flx-border);
    box-shadow: none;
}

.dark-mode .flx-loader-title {
    color: var(--flx-primary-700);
}

.dark-mode .flx-loader-version {
    color: var(--flx-primary-600);
}

.dark-mode .flx-loader-track {
    background: var(--flx-bg-subtle);
}

@keyframes flxLoaderShift {
    0%   { transform: translateX(-75%); }
    100% { transform: translateX(230%); }
}

/* the ajax progress strip OneUI shows in the header, restyled to match */
.flx-theme #page-header-loader {
    background-color: var(--flx-primary);
}

@media (prefers-reduced-motion: reduce) {
    .flx-loader-bar {
        animation: none;
        width: 100%;
    }

    .flx-loader-overlay {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* 9. Page header and breadcrumbs                                      */
/*    Ported from FlexCC's admin shell:                                */
/*      design/components/admin-shell-layout.css (.flx-breadcrumbs)    */
/*                                                                     */
/*    MainCRM had no breadcrumb or page-title component at all - page  */
/*    names live inside .block-title. These classes add the missing    */
/*    layer; partials/page-header.blade.php renders them.              */
/* ------------------------------------------------------------------ */

.flx-theme .flx-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.flx-theme .flx-page-header__text {
    min-width: 0;
}

.flx-theme .flx-page-header__title {
    margin: 0;
    font-size: var(--flx-font-size-2xl);
    font-weight: 600;
    line-height: var(--flx-line-height-tight);
    color: var(--flx-text-primary);
}

.flx-theme .flx-page-header__subtitle {
    margin: 4px 0 0;
    font-size: var(--flx-font-size-sm);
    color: var(--flx-text-muted);
}

.flx-theme .flx-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.flx-theme .flx-breadcrumbs {
    padding: 0 0 6px;
}

.flx-theme .flx-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.flx-theme .flx-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.flx-theme .flx-breadcrumbs__link {
    color: var(--flx-text-secondary);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: var(--flx-radius-sm);
}

.flx-theme .flx-breadcrumbs__link:hover,
.flx-theme .flx-breadcrumbs__link:focus-visible {
    color: var(--flx-primary);
    background: var(--flx-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--flx-primary);
    text-decoration: none;
}

.flx-theme .flx-breadcrumbs__current {
    color: var(--flx-text-primary);
    font-weight: 600;
    padding: 2px 4px;
}

.flx-theme .flx-breadcrumbs__sep {
    display: inline-flex;
    align-items: center;
    color: var(--flx-text-muted);
}

.flx-theme .flx-breadcrumbs__sep svg {
    width: 14px;
    height: 14px;
}

/* Bootstrap's own breadcrumb markup, should any view already use it */
.flx-theme .breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    background: transparent;
}

.flx-theme .breadcrumb-item,
.flx-theme .breadcrumb-item > a {
    color: var(--flx-text-secondary);
    text-decoration: none;
}

.flx-theme .breadcrumb-item > a:hover {
    color: var(--flx-primary);
}

.flx-theme .breadcrumb-item.active {
    color: var(--flx-text-primary);
    font-weight: 600;
}

.flx-theme .breadcrumb-item + .breadcrumb-item::before {
    color: var(--flx-text-muted);
}