#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

:root {
    /* Full sidebar / header mark */
    --lpx-logo: url('/images/logo/favicon.ico');
    /* Collapsed sidebar & compact slots — favicon */
    --lpx-logo-icon: url('/images/logo/favicon.ico') !important;
    /* !important beats AppearanceStyles' inline <style> that resets these to pink. */
    --primary: #F47836;
    --secondary: #6c757d;
    /*--lpx-brand: var(--primary) !important;*/
    /*--lpx-brand-rgb: 244, 120, 54 !important;*/
    /*--lpx-primary: var(--primary) !important;*/
    /*--lpx-primary-rgb: 244, 120, 54 !important;*/
    /*--bs-primary: var(--primary) !important;*/
    /*--bs-primary-rgb: 244, 120, 54 !important;*/
    --bs-pagination-active-bg: #F47836 !important;

    --bs-primary: #F47836 !important;
    --bs-primary-rgb: 244, 120, 54 !important;

    --lpx-brand: #F47836 !important;
    --lpx-brand-rgb: 244, 120, 54 !important;

    --lpx-primary: #F47836 !important;
    --lpx-primary-rgb: 244, 120, 54 !important;
}

/* Login / account layout: use favicon as the brand mark */
:root .abp-account-layout .lpx-brand-logo {
    --lpx-logo: url('/images/logo/favicon.ico') !important;
    --lpx-logo-icon: url('/images/logo/favicon.ico') !important;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Keep collapsed widths correct when LeptonX adds scrollbar class. */
#lpx-wrapper.hover-trigger .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-nav {
    min-width: 72px !important;
}

#lpx-wrapper.hover-trigger .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-nav-menu {
    max-width: 72px !important;
}

#lpx-wrapper.hover-trigger .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-logo-container {
    width: 72px !important;
}

#lpx-wrapper.hover-trigger .lpx-sidebar.lpx-scroll-container.lpx-has-scrollbar .lpx-logo-container .menu-collapse-icon {
    right: 28px !important;
}

/* RTL: fix btn-group border-radius when buttons are wrapped in Tooltip/Buttons components */
[dir='rtl'] .btn-group > *:not(:last-child) > .btn,
[dir='rtl'] .btn-group > *:not(:last-child).btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

[dir='rtl'] .btn-group > *:not(:first-child) > .btn,
[dir='rtl'] .btn-group > *:not(:first-child).btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

[dir='rtl'] .btn-group > *:not(:first-child):not(:last-child) > .btn,
[dir='rtl'] .btn-group > *:not(:first-child):not(:last-child).btn {
    border-radius: 0 !important;
}

/* Non-active page links — secondary text color */
#lpx-wrapper .pagination .page-link:not(.active) {
    color: var(--secondary) !important;
}

#lpx-wrapper .pagination .page-link:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    border-radius: 0.5rem !important;
}

#lpx-wrapper .pagination .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* Nav tabs: active tab — primary text + bottom indicator, theme-aware background */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary) !important;
    background-color: var(--bs-body-bg, var(--lpx-card-bg, #fff)) !important;
    border-color: var(--bs-border-color, var(--lpx-border-color, #dee2e6))
                  var(--bs-border-color, var(--lpx-border-color, #dee2e6))
                  var(--bs-body-bg, var(--lpx-card-bg, #fff)) !important;
    border-bottom: 3px solid var(--primary) !important;
}

/* Nav tabs: inactive tab — secondary text, no background fill */
.nav-tabs .nav-link:not(.active) {
    color: var(--bs-secondary-color, var(--secondary)) !important;
    background-color: transparent !important;
}

/* Nav tabs: inactive hover — readable in dark/dim themes */
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link:not(.active):focus {
    color: var(--bs-body-color, var(--lpx-content-text, inherit)) !important;
    border-color: var(--bs-border-color, var(--lpx-border-color, #dee2e6)) !important;
}

.text-primary{
    color: #F47836 !important;
}

/* =====================================================================
   RTL fix for Blazorise Steps component
   In LTR the connector line is anchored left:-2px and extends leftward.
   In RTL the previous step is to the RIGHT, so we anchor right and
   extend rightward. We also swap the automatic centering margins and
   move the step-container padding to the left side.
   ===================================================================== */
[dir='rtl'] .steps .step:first-child {
    margin-left: 0;
    margin-right: auto;
}

[dir='rtl'] .steps .step:last-child {
    margin-right: 0;
    margin-left: auto;
}

[dir='rtl'] .step-container {
    padding-right: 0;
    padding-left: 1rem;
}

[dir='rtl'] .step:last-of-type .step-container {
    padding-left: 0;
}

[dir='rtl'] .step-circle::before {
    left: auto;
    right: -2px;
    transform: translate(100%, -50%);
}