#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-progress-bar-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;
}

/* Light / system-light: Lepton AppearanceStyles resets Bootstrap primary to blue */
[data-bs-theme="light"] {
    --primary: #F47836;
    --secondary: #6c757d;
    --bs-primary: #F47836 !important;
    --bs-primary-rgb: 244, 120, 54 !important;
    --bs-progress-bar-bg: #F47836 !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;
}

#lpx-wrapper .pagination select.form-select,
.pagination select.form-select {
    min-height: 2rem !important;
    height: 2rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-inline-start: 0.625rem !important;
    padding-inline-end: 3rem !important;
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
}

#lpx-wrapper .pagination select.form-select:focus,
.pagination select.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18) !important;
}

#lpx-wrapper .pagination select.form-select option:checked,
.pagination select.form-select option:checked {
    background: linear-gradient(var(--primary), var(--primary)) !important;
    background-color: var(--primary) !important;
    color: white !important;
}

#lpx-wrapper .form-check-input:checked{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}


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

/* Nav tabs: active tab — primary text + bottom indicator, theme-aware background */
/* Prevent the column chooser's vertical margin from stretching the billing pager. */
.billing-data-grid .row.justify-content-between > .col-auto.d-flex.flex-row {
    align-items: center;
}

.billing-data-grid .row.justify-content-between > .col-auto > .form-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Use smaller pagination typography without changing the standard control design. */
#lpx-wrapper .pagination .page-link,
.pagination .page-link {
    font-size: 0.75rem;
}

.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%);
}

.bg-primary{
    background-color: var(--primary) !important;
}

/* Align a control with inputs that have a field label above them. */
.filter-field-action-offset {
    margin-top: calc(var(--bs-form-label-margin-bottom, 0.3rem) + 1lh);
}

.invoice-filter-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.invoice-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.5rem 0.75rem;
    background: var(--bs-tertiary-bg);
}

.invoice-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    padding: 0.5rem;
    background: transparent;
    color: var(--bs-body-color);
    text-decoration: none;
    cursor: pointer;
}

.invoice-filter-toggle:hover {
    color: var(--bs-primary);
}

.invoice-filter-title {
    font-weight: 600;
}

.invoice-filter-count {
    min-width: 1.5rem;
    text-align: center;
}

.invoice-filter-chevron {
    width: 0.6rem;
    height: 0.6rem;
    margin-inline-start: 0.25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.15rem);
    transition: transform 150ms ease;
}

.invoice-filter-chevron--expanded {
    transform: rotate(225deg) translateY(-0.15rem);
}

.invoice-filter-content {
    padding: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.invoice-filter-content .row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1rem;
}

.invoice-filter-content .field {
    margin-bottom: 0;
}

.billing-date-range-control {
    position: relative;
}

.billing-date-range-control .form-control {
    padding-right: 2.5rem;
}

.billing-date-range-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    color: var(--bs-primary);
    pointer-events: none;
}

/* Flatpickr is rendered next to the field and must overlay the grid below it. */
.flatpickr-calendar.open {
    z-index: 2147483647 !important;
}

@media (max-width: 575.98px) {
    .invoice-filter-header {
        min-height: 48px;
    }

    .invoice-filter-content {
        padding: 1rem;
    }
}

.entity-logo-thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.entity-document-preview {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    color: white !important;
}