/* =========================================================
   SQLPerFlow - Theme Color Guide
   Define all custom theme colors here.
   Do not define new colors inside force override sections.
   ========================================================= */

body.abp-application-layout {
    /* Page Background
       Main application background color.
       Used by body, content containers, pages and layout wrappers. */
    --spf-background-bg: var(--mud-palette-background);

    /* Page Foreground
       Main text color used on normal application background. */
    --spf-background-fg: var(--mud-palette-text-primary);

    /* Surface Background
       Used by cards, dropdowns, modals, list items, table headers and inputs. */
    --spf-surface-bg: var(--mud-palette-surface);

    /* Surface Foreground
       Text color used on surface elements. */
    --spf-surface-fg: var(--mud-palette-text-primary);

    /* Secondary Foreground
       Used by placeholders and secondary text areas. */
    --spf-secondary-fg: var(--mud-palette-text-secondary);

    /* Default Border
       Used by cards, dropdowns, modals, tables and layout borders. */
    --spf-border-color: var(--mud-palette-lines-default);

    /* Input Border
       Used by form controls and input groups. */
    --spf-input-border-color: var(--mud-palette-lines-inputs);

    /* Input Background
       Used by form controls, selects and input group text. */
    --spf-input-bg: color-mix(
            in srgb,
            var(--spf-surface-bg) 96%,
            var(--mud-palette-background) 4%
    );

    /* Input Foreground
       Text color used inside form controls and selects. */
    --spf-input-fg: var(--spf-surface-fg);

    /* Muted Surface Background
       Used by table headers, striped rows, secondary panels and disabled controls. */
    --spf-muted-bg: var(--mud-palette-background-grey);

    /* Hover Background
       Used by menus, dropdown items, table rows and selectable list items. */
    --spf-hover-bg: color-mix(
            in srgb,
            var(--mud-palette-primary) 8%,
            var(--spf-surface-bg)
    );

    /* Active Background
       Used by selected rows, active links and focused navigation items. */
    --spf-active-bg: color-mix(
            in srgb,
            var(--mud-palette-primary) 14%,
            var(--spf-surface-bg)
    );

    /* Primary Accent Foreground
       Text color placed on primary/accent backgrounds. */
    --spf-accent-fg: var(--mud-palette-primary-text);

    /* Status Colors
       Shared status colors for Bootstrap, ABP, Radzen and plain HTML surfaces. */
    --spf-primary: var(--mud-palette-primary);
    --spf-secondary: var(--mud-palette-secondary);
    --spf-info: var(--mud-palette-info);
    --spf-success: var(--mud-palette-success);
    --spf-warning: var(--mud-palette-warning);
    --spf-error: var(--mud-palette-error);

    /* Side Panel Background
       Left sidebar background color. Change this for the main sidebar color. */
    --spf-side-panel-bg: var(--mud-palette-drawer-background);

    /* Side Panel Foreground
       Sidebar menu text, icon and logo color. */
    --spf-side-panel-fg: var(--mud-palette-drawer-text);

    /* Side Panel Hover Background
       Sidebar menu item hover background color. */
    --spf-side-panel-hover-bg: color-mix(
            in srgb,
            var(--mud-palette-primary) 18%,
            var(--spf-side-panel-bg)
    );

    /* Side Panel Active Background
       Sidebar selected or active menu item background color. */
    --spf-side-panel-active-bg: color-mix(
            in srgb,
            var(--mud-palette-primary) 30%,
            var(--spf-side-panel-bg)
    );

    /* Side Panel Active Foreground
       Sidebar selected or active menu item text and icon color. */
    --spf-side-panel-active-fg: var(--spf-side-panel-fg);

    /* Top Panel Background
       Topbar/header background color.
       Uses the MudBlazor appbar palette for a stable app shell. */
    --spf-top-panel-bg: var(--mud-palette-appbar-background);

    /* Top Panel Foreground
       Topbar/header text and icon color. */
    --spf-top-panel-fg: var(--mud-palette-appbar-text);

    /* Top Panel Bridge Background
       Used for small layout gaps between sidebar and topbar. */
    --spf-top-panel-bridge-bg: var(--spf-background-bg);

}


/* =========================================================
   SQLPerFlow - Application Background Force Override
   ========================================================= */

body.abp-application-layout {
    background-color: var(--spf-background-bg) !important;
    color: var(--spf-background-fg) !important;
}

body.abp-application-layout #ApplicationContainer {
    background-color: var(--spf-background-bg) !important;
    color: var(--spf-background-fg) !important;
}

body.abp-application-layout .main,
body.abp-application-layout .main-content,
body.abp-application-layout .content,
body.abp-application-layout .page-content,
body.abp-application-layout .application-content,
body.abp-application-layout .abp-content {
    background-color: var(--spf-background-bg) !important;
    color: var(--spf-background-fg) !important;
}


/* =========================================================
   SQLPerFlow - ABP / LeptonX Layout Background Force Override
   ========================================================= */

body.abp-application-layout,
body.abp-application-layout #ApplicationContainer,
body.abp-application-layout .lpx-layout,
body.abp-application-layout .lpx-content,
body.abp-application-layout .lpx-content-container,
body.abp-application-layout .lpx-page,
body.abp-application-layout .lpx-main,
body.abp-application-layout .lpx-main-container,
body.abp-application-layout .lpx-scroll-container,
body.abp-application-layout .lpx-body,
body.abp-application-layout .lpx-wrapper,
body.abp-application-layout .application-layout,
body.abp-application-layout .application-layout-content,
body.abp-application-layout .page,
body.abp-application-layout .page-body,
body.abp-application-layout .page-wrapper,
body.abp-application-layout .layout,
body.abp-application-layout .layout-content {
    background-color: var(--spf-background-bg) !important;
    color: var(--spf-background-fg) !important;
}


/* =========================================================
   SQLPerFlow - Generic Top Navigation Force Override
   ========================================================= */

body.abp-application-layout .navbar,
body.abp-application-layout .abp-navbar,
body.abp-application-layout .abp-header,
body.abp-application-layout .abp-topbar,
body.abp-application-layout header {
    background-color: var(--spf-top-panel-bg) !important;
    color: var(--spf-top-panel-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .navbar a,
body.abp-application-layout .navbar .nav-link,
body.abp-application-layout .abp-navbar a,
body.abp-application-layout .abp-header a,
body.abp-application-layout .abp-topbar a {
    color: var(--spf-top-panel-fg) !important;
}


/* =========================================================
   SQLPerFlow - Dropdown Force Override
   ========================================================= */

body.abp-application-layout .dropdown-menu {
    background-color: var(--spf-surface-bg) !important;
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .dropdown-item {
    color: var(--spf-surface-fg) !important;
}

body.abp-application-layout .dropdown-item:hover,
body.abp-application-layout .dropdown-item:focus {
    background-color: var(--spf-hover-bg) !important;
    color: var(--spf-surface-fg) !important;
}


/* =========================================================
   SQLPerFlow - Surface Component Force Override
   ========================================================= */

body.abp-application-layout .card,
body.abp-application-layout .modal-content,
body.abp-application-layout .offcanvas,
body.abp-application-layout .popover,
body.abp-application-layout .toast,
body.abp-application-layout .accordion-item,
body.abp-application-layout .accordion-button,
body.abp-application-layout .list-group-item {
    background-color: var(--spf-surface-bg) !important;
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .accordion-button:not(.collapsed),
body.abp-application-layout .list-group-item.active {
    background-color: var(--spf-active-bg) !important;
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}


/* =========================================================
   SQLPerFlow - Form Control Force Override
   ========================================================= */

body.abp-application-layout .form-control,
body.abp-application-layout .form-select,
body.abp-application-layout .form-check-input,
body.abp-application-layout .input-group-text {
    background-color: var(--spf-input-bg) !important;
    color: var(--spf-input-fg) !important;
    border-color: var(--spf-input-border-color) !important;
}

body.abp-application-layout .form-check-input:checked {
    background-color: var(--spf-primary) !important;
    border-color: var(--spf-primary) !important;
}

body.abp-application-layout .form-control:focus,
body.abp-application-layout .form-select:focus {
    background-color: var(--spf-input-bg) !important;
    color: var(--spf-input-fg) !important;
    border-color: var(--spf-primary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--spf-primary) 18%, transparent) !important;
}

body.abp-application-layout .form-control::placeholder {
    color: var(--spf-secondary-fg) !important;
}

body.abp-application-layout .form-control:disabled,
body.abp-application-layout .form-select:disabled,
body.abp-application-layout .form-check-input:disabled {
    background-color: var(--spf-muted-bg) !important;
    color: var(--mud-palette-text-disabled) !important;
    border-color: var(--spf-border-color) !important;
}


/* =========================================================
   SQLPerFlow - MudBlazor Text And Input Force Override
   ========================================================= */

body.abp-application-layout[data-spf-theme="dark"] .mud-typography,
body.abp-application-layout[data-spf-theme="dark"] .mud-input,
body.abp-application-layout[data-spf-theme="dark"] .mud-input-label,
body.abp-application-layout[data-spf-theme="dark"] .mud-select-input,
body.abp-application-layout[data-spf-theme="dark"] .mud-table-cell {
    color: var(--mud-palette-text-primary) !important;
}

body.abp-application-layout[data-spf-theme="dark"] .mud-input-adornment svg {
    color: var(--mud-palette-text-secondary) !important;
}

body.abp-application-layout[data-spf-theme="dark"] .mud-typography.mud-secondary-text,
body.abp-application-layout[data-spf-theme="dark"] .mud-secondary-text {
    color: var(--mud-palette-secondary) !important;
}


/* =========================================================
   SQLPerFlow - Table Force Override
   ========================================================= */

body.abp-application-layout .table {
    background-color: var(--spf-surface-bg) !important;
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .table th,
body.abp-application-layout .table td {
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .table thead th {
    background-color: var(--spf-muted-bg) !important;
    color: var(--spf-surface-fg) !important;
}

body.abp-application-layout .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: color-mix(in srgb, var(--spf-muted-bg) 64%, var(--spf-surface-bg)) !important;
    color: var(--spf-surface-fg) !important;
}

body.abp-application-layout .table-hover > tbody > tr:hover > * {
    background-color: var(--spf-hover-bg) !important;
    color: var(--spf-surface-fg) !important;
}


/* =========================================================
   SQLPerFlow - Mud Table Shared Color Classes
   ========================================================= */

body.abp-application-layout {
    --spf-mud-table-header-bg: #f0f6ff;
    --spf-mud-table-header-fg: #2b3a4a;
    --spf-mud-table-header-border-strong: #c3d9ff;
    --spf-mud-table-header-border: #e4eaf3;
    --spf-mud-table-selected-bg: #81bcef;
    --spf-mud-table-selected-fg: #ffffff;
    --spf-mud-table-disabled-bg: #ff000021;
    --spf-mud-table-remove-selected-bg: #e37d6d;
}

body.abp-application-layout[data-spf-theme="dark"] {
    --spf-mud-table-header-bg: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface));
    --spf-mud-table-header-fg: var(--mud-palette-text-primary);
    --spf-mud-table-header-border-strong: color-mix(in srgb, var(--mud-palette-primary) 42%, var(--mud-palette-lines-default));
    --spf-mud-table-header-border: var(--mud-palette-lines-default);
    --spf-mud-table-selected-bg: color-mix(in srgb, var(--mud-palette-primary) 46%, var(--mud-palette-surface));
    --spf-mud-table-selected-fg: var(--mud-palette-text-primary);
    --spf-mud-table-disabled-bg: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface));
    --spf-mud-table-remove-selected-bg: color-mix(in srgb, var(--mud-palette-error) 38%, var(--mud-palette-surface));
}

body.abp-application-layout .mud-header {
    background: var(--spf-mud-table-header-bg) !important;
    color: var(--spf-mud-table-header-fg) !important;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 2px solid var(--spf-mud-table-header-border-strong);
    border-right: 1px solid var(--spf-mud-table-header-border);
    text-align: left;
    white-space: nowrap;
}

body.abp-application-layout .mud-selected {
    background-color: var(--spf-mud-table-selected-bg) !important;
}

body.abp-application-layout .mud-selected > td {
    color: var(--spf-mud-table-selected-fg) !important;
}

body.abp-application-layout .mud-selected > td .mud-input {
    color: var(--spf-mud-table-selected-fg) !important;
}

body.abp-application-layout .mud-disabled {
    background: var(--spf-mud-table-disabled-bg) !important;
}

body.abp-application-layout .mud-remove-selected {
    background-color: var(--spf-mud-table-remove-selected-bg) !important;
}

body.abp-application-layout[data-spf-theme="dark"] .mud-table .mud-toolbar .mud-typography,
body.abp-application-layout[data-spf-theme="dark"] .mud-table .mud-table-toolbar .mud-typography,
body.abp-application-layout[data-spf-theme="dark"] .mud-table .mud-toolbar .mud-text,
body.abp-application-layout[data-spf-theme="dark"] .mud-table .mud-table-toolbar .mud-text {
    color: var(--mud-palette-text-primary) !important;
}


/* =========================================================
   SQLPerFlow - Bootstrap Color Utility Force Override
   ========================================================= */

body.abp-application-layout a:not(.mud-link):not(.mud-button-root) {
    color: var(--spf-primary) !important;
}

body.abp-application-layout a:not(.mud-link):not(.mud-button-root):hover,
body.abp-application-layout a:not(.mud-link):not(.mud-button-root):focus {
    color: color-mix(in srgb, var(--spf-primary) 82%, var(--spf-surface-fg)) !important;
}

body.abp-application-layout .btn-primary,
body.abp-application-layout .bg-primary {
    background-color: var(--spf-primary) !important;
    border-color: var(--spf-primary) !important;
    color: var(--spf-accent-fg) !important;
}

body.abp-application-layout .btn-secondary,
body.abp-application-layout .bg-secondary {
    background-color: var(--spf-secondary) !important;
    border-color: var(--spf-secondary) !important;
    color: var(--spf-accent-fg) !important;
}

body.abp-application-layout .btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--spf-primary) !important;
    color: var(--spf-primary) !important;
}

body.abp-application-layout .btn-outline-primary:hover,
body.abp-application-layout .btn-outline-primary:focus {
    background-color: var(--spf-primary) !important;
    border-color: var(--spf-primary) !important;
    color: var(--spf-accent-fg) !important;
}

body.abp-application-layout .alert-primary,
body.abp-application-layout .badge.bg-primary {
    background-color: color-mix(in srgb, var(--spf-primary) 16%, var(--spf-surface-bg)) !important;
    border-color: color-mix(in srgb, var(--spf-primary) 34%, var(--spf-border-color)) !important;
    color: color-mix(in srgb, var(--spf-primary) 72%, var(--spf-surface-fg)) !important;
}

body.abp-application-layout .alert-success,
body.abp-application-layout .badge.bg-success {
    background-color: color-mix(in srgb, var(--spf-success) 16%, var(--spf-surface-bg)) !important;
    border-color: color-mix(in srgb, var(--spf-success) 34%, var(--spf-border-color)) !important;
    color: color-mix(in srgb, var(--spf-success) 72%, var(--spf-surface-fg)) !important;
}

body.abp-application-layout .alert-info,
body.abp-application-layout .badge.bg-info {
    background-color: color-mix(in srgb, var(--spf-info) 16%, var(--spf-surface-bg)) !important;
    border-color: color-mix(in srgb, var(--spf-info) 34%, var(--spf-border-color)) !important;
    color: color-mix(in srgb, var(--spf-info) 72%, var(--spf-surface-fg)) !important;
}

body.abp-application-layout .alert-warning,
body.abp-application-layout .badge.bg-warning {
    background-color: color-mix(in srgb, var(--spf-warning) 18%, var(--spf-surface-bg)) !important;
    border-color: color-mix(in srgb, var(--spf-warning) 38%, var(--spf-border-color)) !important;
    color: color-mix(in srgb, var(--spf-warning) 82%, var(--spf-surface-fg)) !important;
}

body.abp-application-layout .alert-danger,
body.abp-application-layout .badge.bg-danger {
    background-color: color-mix(in srgb, var(--spf-error) 16%, var(--spf-surface-bg)) !important;
    border-color: color-mix(in srgb, var(--spf-error) 34%, var(--spf-border-color)) !important;
    color: color-mix(in srgb, var(--spf-error) 76%, var(--spf-surface-fg)) !important;
}


/* =========================================================
   SQLPerFlow - Side Panel Force Override
   ========================================================= */

body.abp-application-layout .lpx-sidebar-container,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu,
body.abp-application-layout .lpx-sidebar .lpx-logo-container {
    background-color: var(--spf-side-panel-bg) !important;
    color: var(--spf-side-panel-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .lpx-sidebar .lpx-logo-container {
    background-color: var(--spf-side-panel-bg) !important;
    color: var(--spf-side-panel-fg) !important;
}


/* =========================================================
   SQLPerFlow - Side Panel Text And Icon Force Override
   ========================================================= */

body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu a,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu span,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu div,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu i,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu svg,
body.abp-application-layout .lpx-sidebar .lpx-logo-container a,
body.abp-application-layout .lpx-sidebar .lpx-logo-container span,
body.abp-application-layout .lpx-sidebar .lpx-logo-container i,
body.abp-application-layout .lpx-sidebar .lpx-logo-container svg {
    color: var(--spf-side-panel-fg) !important;
    fill: var(--spf-side-panel-fg) !important;
}


/* =========================================================
   SQLPerFlow - Side Panel Hover Force Override
   ========================================================= */

body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .nav-item:hover,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .lpx-nav-item:hover,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu a:hover {
    background-color: var(--spf-side-panel-hover-bg) !important;
    color: var(--spf-side-panel-fg) !important;
}


/* =========================================================
   SQLPerFlow - Side Panel Active Item Force Override
   ========================================================= */

body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .active,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .selected,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .nav-item.active,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .lpx-nav-item.active {
    background-color: var(--spf-side-panel-active-bg) !important;
    color: var(--spf-side-panel-active-fg) !important;
}

body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .active a,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .active span,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .active i,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .active svg,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .selected a,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .selected span,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .selected i,
body.abp-application-layout .lpx-sidebar-container .lpx-sidebar .lpx-nav .lpx-nav-menu .selected svg {
    color: var(--spf-side-panel-active-fg) !important;
    fill: var(--spf-side-panel-active-fg) !important;
}


/* =========================================================
   SQLPerFlow - Top Panel Force Override
   ========================================================= */

body.abp-application-layout .lpx-topbar,
body.abp-application-layout .lpx-topbar-container,
body.abp-application-layout .lpx-toolbar,
body.abp-application-layout .lpx-toolbar-container,
body.abp-application-layout .navbar,
body.abp-application-layout .abp-navbar,
body.abp-application-layout .lpx-header,
body.abp-application-layout .lpx-header-container {
    background-color: var(--spf-top-panel-bg) !important;
    color: var(--spf-top-panel-fg) !important;
    border-color: var(--spf-border-color) !important;
}


/* =========================================================
   SQLPerFlow - Top Panel Text And Icon Force Override
   ========================================================= */

body.abp-application-layout .lpx-topbar a,
body.abp-application-layout .lpx-topbar span,
body.abp-application-layout .lpx-topbar i,
body.abp-application-layout .lpx-topbar svg,
body.abp-application-layout .lpx-toolbar a,
body.abp-application-layout .lpx-toolbar span,
body.abp-application-layout .lpx-toolbar i,
body.abp-application-layout .lpx-toolbar svg,
body.abp-application-layout .navbar a,
body.abp-application-layout .navbar span,
body.abp-application-layout .navbar i,
body.abp-application-layout .navbar svg {
    color: var(--spf-top-panel-fg) !important;
    fill: var(--spf-top-panel-fg) !important;
}


/* =========================================================
   SQLPerFlow - Top Panel Bridge / Gap Force Override
   ========================================================= */

body.abp-application-layout .lpx-main-container,
body.abp-application-layout .lpx-page,
body.abp-application-layout .lpx-page-container,
body.abp-application-layout .lpx-content-header,
body.abp-application-layout .lpx-content-header-container {
    background-color: var(--spf-top-panel-bridge-bg) !important;
}


/* =========================================================
   SQLPerFlow - Radzen Color Force Override
   ========================================================= */

body.abp-application-layout .rz-widget,
body.abp-application-layout .rz-card,
body.abp-application-layout .rz-panel,
body.abp-application-layout .rz-dialog,
body.abp-application-layout .rz-dialog-content,
body.abp-application-layout .rz-menu,
body.abp-application-layout .rz-context-menu,
body.abp-application-layout .rz-dropdown-panel,
body.abp-application-layout .rz-listbox,
body.abp-application-layout .rz-data-grid,
body.abp-application-layout .rz-datatable,
body.abp-application-layout .rz-paginator {
    background-color: var(--spf-surface-bg) !important;
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .rz-datatable-thead th,
body.abp-application-layout .rz-grid-table thead th,
body.abp-application-layout .rz-column-title {
    background-color: var(--spf-muted-bg) !important;
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .rz-datatable-data td,
body.abp-application-layout .rz-grid-table td {
    background-color: var(--spf-surface-bg) !important;
    color: var(--spf-surface-fg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout .rz-selectable tbody tr:hover td,
body.abp-application-layout .rz-dropdown-item:hover,
body.abp-application-layout .rz-menuitem:hover {
    background-color: var(--spf-hover-bg) !important;
    color: var(--spf-surface-fg) !important;
}

body.abp-application-layout .rz-state-highlight,
body.abp-application-layout .rz-dropdown-item.rz-state-highlight,
body.abp-application-layout .rz-menuitem.rz-state-highlight {
    background-color: var(--spf-active-bg) !important;
    color: var(--spf-surface-fg) !important;
}

body.abp-application-layout .rz-inputtext,
body.abp-application-layout .rz-dropdown,
body.abp-application-layout .rz-multiselect,
body.abp-application-layout .rz-spinner,
body.abp-application-layout .rz-calendar,
body.abp-application-layout .rz-datepicker {
    background-color: var(--spf-input-bg) !important;
    color: var(--spf-input-fg) !important;
    border-color: var(--spf-input-border-color) !important;
}

body.abp-application-layout .rz-button.rz-primary,
body.abp-application-layout .rz-primary {
    background-color: var(--spf-primary) !important;
    border-color: var(--spf-primary) !important;
    color: var(--spf-accent-fg) !important;
}

/* =========================================================
   SQLPerFlow - ApexCharts Color Force Override
   ========================================================= */

body.abp-application-layout .apexcharts-title-text,
body.abp-application-layout .apexcharts-subtitle-text,
body.abp-application-layout .apexcharts-xaxis-label,
body.abp-application-layout .apexcharts-yaxis-label,
body.abp-application-layout .apexcharts-legend-text,
body.abp-application-layout .apexcharts-datalabel,
body.abp-application-layout .apexcharts-data-labels text,
body.abp-application-layout .apexcharts-text,
body.abp-application-layout .apexcharts-tooltip-title {
    fill: var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-text-primary) !important;
}

body.abp-application-layout .apexcharts-gridline,
body.abp-application-layout .apexcharts-xaxis-tick,
body.abp-application-layout .apexcharts-yaxis-tick {
    stroke: var(--mud-palette-lines-default) !important;
}

body.abp-application-layout .apexcharts-tooltip,
body.abp-application-layout .apexcharts-xaxistooltip,
body.abp-application-layout .apexcharts-yaxistooltip {
    background: var(--spf-surface-bg) !important;
    border-color: var(--spf-border-color) !important;
    color: var(--mud-palette-text-primary) !important;
}

body.abp-application-layout .apexcharts-tooltip-title {
    background: var(--spf-muted-bg) !important;
    border-color: var(--spf-border-color) !important;
}

body.abp-application-layout[data-spf-theme="dark"] .apexcharts-title-text,
body.abp-application-layout[data-spf-theme="dark"] .apexcharts-subtitle-text,
body.abp-application-layout[data-spf-theme="dark"] .apexcharts-xaxis-label,
body.abp-application-layout[data-spf-theme="dark"] .apexcharts-yaxis-label,
body.abp-application-layout[data-spf-theme="dark"] .apexcharts-legend-text,
body.abp-application-layout[data-spf-theme="dark"] .apexcharts-datalabel,
body.abp-application-layout[data-spf-theme="dark"] .apexcharts-data-labels text,
body.abp-application-layout[data-spf-theme="dark"] .apexcharts-text {
    fill: var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-text-primary) !important;
}


S:\repos\SqlPerFlow\SqlPerFlow.Web.Blazor\SqlPerFlow.Web.Blazor.csproj