:root {
    --lpx-content-text-rgb: 50, 81, 104;
    --lpx-content-bg-rgb: 240, 244, 247;
    --lpx-primary-rgb: 9, 113, 182;
    --lpx-secondary-rgb: 108, 93, 211;
    --lpx-brand-rgb: 16, 103, 53;
    --lpx-success-rgb: 79, 191, 103;
    --lpx-info-rgb: 67, 138, 167;
    --lpx-warning-rgb: 255, 159, 56;
    --lpx-danger-rgb: 192, 13, 73;
    --lpx-light-rgb: 230, 235, 239;
    --lpx-dark-rgb: 6, 42, 68;
    --lpx-navbar-color-rgb: 255, 255, 255;
    --lpx-navbar-text-color-rgb: 45, 55, 72;
    --lpx-navbar-active-text-color-rgb: 45, 55, 72;
    --lpx-text-white-rgb: 255, 255, 255;
    --lpx-logo-reverse: var(--logo-reverse);
    --lpx-primary: #0971b6;
    --lpx-secondary: #6c5dd3;
    --lpx-success: #4fbf67;
    --lpx-info: #438aa7;
    --lpx-warning: #ff9f38;
    --lpx-danger: #c00d49;
    --lpx-brand: #106735;
    --lpx-brand-text: #fff;
    --lpx-container-active-text: #fff;
    --lpx-text-white: #fff;
    --lpx-radius: 0;
    --lpx-light: #e6ebef;
    --lpx-dark: #062a44;
    --lpx-navbar-color: #fff;
    --lpx-navbar-text-color: #2d3748;
    --lpx-navbar-active-text-color: #2d3748;
    --lpx-navbar-active-bg-color: #f0f4f7;
    --lpx-card-bg: #fff;
    --lpx-card-title-text-color: #062a44;
    --lpx-content-bg: #f0f4f7;
    --lpx-content-text: #325168;
    --lpx-border-color: #e8eef3;
    --lpx-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
}

/* Override bootstrap buttons */

.btn, .btn-close, .btn-ghost, th > div > i {
    font: var(--font-sm);
    font-weight: var(--font-weight-bold);

    column-gap: 4px;
    min-width: 36px;
    min-height: 36px;
    padding: var(--padding-button-fields-md-height, 8px) var(--padding-button-fields-md-width, 10px) !important; 
    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    box-sizing: border-box;
    background-color: transparent;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;

    &:focus-visible {
        outline-color: var(--neutral-900, #0E6634);
        outline-style: solid;
        outline-width: 1px;
        outline-offset: 2px;
    }
    &:focus {
        box-shadow: none !important;
    }
}
    .btn:disabled, .btn.disabled {
        pointer-events: none;
        user-select: none;
        opacity: 30% !important;
    }
    .btn.btn-sm, th > div > i {
        min-width: 24px;
        min-height: 24px;
        padding: var(--padding-button-fields-sm-height, 2px) var(--padding-button-fields-sm-width, 6px) !important;
        gap: 2px;
    }
.btn-primary {
    color: var(--text-white, #FFF);
    border-color: var(--border-green-01, #0B5B2F);
    background-color: var(--surface-primary-default) !important;
}

    .btn-primary:is(:hover, :focus-visible){
        border-color: var(--border-green-hover);
        background-color: var(--surface-primary-hover) !important;
    }

    .btn-primary:active {
        border-color: var(--border-green-pressing);
        background-color: var(--surface-primary-pressing) !important;
    }

    .btn-primary:disabled {
        border-color: var(--border-green-01);
        background-color: var(--surface-primary-default) !important;
    }

.btn-secondary {
    color: var(--text-h3, #262626);
}

    .btn-secondary:is(:hover, :focus-visible) {
        border-color: var(--primary-200);
        background-color: var(--primary-100);
    }

    .btn-secondary:active {
        border-color: var(--primary-300);
        background-color: var(--primary-200);
    }

    .btn-secondary:disabled {}

.btn-outline-primary {
    color: var(--surface-primary-default) !important;
    border-color: var(--border-green-01, #0B5B2F) !important;
}
    .btn-outline-primary:hover {
        background-color: var(--primary-200) !important;
    }
    .btn-outline-primary:active {
        background-color: var(--primary-300) !important;
    }
    .btn-outline-primary:disabled {
        opacity: 0.3;
    }

.btn-close, .btn-ghost, .modal-header .btn-close /* Neutralize style from Modal.scss */ {
    margin: 0 0 0 0;
    color: var(--text-h3);
}
.btn-close {
    --bs-btn-close-color: var(--text-h3);
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    background: rgba(0, 0, 0, 0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23325168'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

    .btn-close, .btn-ghost, th > div > i {
        &:hover, &:focus-visible {
            border-color: var(--border-primary-darken);
            background-color: var(--surface-hover);
        }
    }
        .btn-ghost:active, th > div > i:active {
            border-color: var(--border-primary);
            background-color: var(--surface-hover);
        }
    .btn-close:disabled, .btn-close.disabled, .btn-ghost:disabled {
        pointer-events: none;
        user-select: none;
        opacity: .3
    }

.btn-destructive2 {
    color: var(--neutral-600) !important;
}
.btn-destructive1 {
    color: var(--text-error) !important;
}
    .btn-destructive1:hover, .btn-destructive2:hover {
        color: var(--text-error) !important;
        background-color: var(--error-50) !important;
        border-color: var(--error-300) !important;
    }
    .btn-destructive1:active, .btn-destructive2:active {
        color: var(--text-error) !important;
        background-color: var(--error-50) !important;
        border-color: var(--error-400) !important;
    }
    .btn-destructive1:disabled, .btn-destructive1.disabled, .btn-destructive2:disabled, .btn-destructive2.disabled {
        opacity: 0.3;
    }

/* btn-light not used or style verified */
.btn-light {
    color: var(--primary-700) !important;
    background-color: var(--neutral-0) !important;
    border: none !important;
}

    .btn-light:hover {
        color: var(--primary-700) !important;
        background-color: #DDE2D9 !important;
        border: none !important;
    }

    .btn-light:active {
        color: var(--primary-700) !important;
        background-color: #DDE2D9 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .btn-light:disabled {
        color: var(--primary-700) !important;
        background-color: var(--neutral-0) !important;
        border: none !important;
    }

/* Override bootstrap checkbox */
.form-check {
    padding-inline: 0.375rem;
    text-align: left;
    column-gap: 0.5rem;
    display: flex;
    align-items: center;
}

    .form-check .form-check-input {
        float: none;
        margin-right: 0;
        margin-left: 0;
    }

.form-check-reverse {
    padding-inline: 0.375rem;
    text-align: right;
    column-gap: 0.5rem;
    display: flex;
    align-items: center;
}

    .form-check-reverse .form-check-input {
        float: none;
        margin-right: 0;
        margin-left: 0;
    }
.form-check-label {
    user-select: none;
}

.form-check-inline {
    display: inline-flex;
    margin-right: 0; /* block style coming from form-check.scss */
}

.form-check-input:not(.md) {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border-primary-darken, #CCC);
}

.form-check-input.md {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-primary-darken, #CCC);
}

.form-check-input {
    margin-top: unset; /* block style coming from form-check.scss */
    background-color: var(--surface-01, #FFF);
    vertical-align: middle;
    box-shadow: none !important;
}

    .form-check-input:checked[type=checkbox] {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Cpath%20d='M13.3334%204L6.00002%2011.3333L2.66669%208'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    .form-check-input.sm[type=checkbox] {
        border-radius: var(--border-radius-xs, 2px);
    }

    .form-check-input.md[type=checkbox] {
        border-radius: var(--border-radius-sm, 4px);
    }

    .form-check-input[type=radio] {
        border-radius: 50%
    }

    .form-check-input:hover {
        border-color: var(--border-green-01, #0B5B2F);
    }

    .form-check-input:active {
        filter: brightness(90%)
    }

    .form-check-input:checked {
        border-color: var(--border-green-pressing, #07361B) !important;
        background-color: var(--surface-primary-default, #0E6634) !important;
    }

        .form-check-input:checked:hover {
            border-color: var(--border-green-pressing, #07361B);
            background-color: var(--border-green-pressing, #0E6634) !important;
        }

    .form-check-input:disabled {
        pointer-events: none;
        filter: none;
        border-color: var(--border-primary, #E6E6E6);
        background-color: var(--surface-03, #F3F3F3);
    }

    .form-check-input:focus-visible, .form-select:focus-visible {
        border-color: var(--border-green-01, #0B5B2F);
        background-color: var(--surface-01, #FFF);
        outline-color: var(--border-green-pressing, #0E6634);
        outline-style: solid;
        outline-width: 2px;
        outline-offset: 3px;
    }

/* Override bootstrap select-list */

.form-select {
    display: block;
    width: 100%;
    font: var(--font-md);
    font-weight: 400;
    color: var(--text-h3, #262626);
    background-color: var(--surface-01, #FCFCFC);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 12px;
    border: 1px solid var(--border-primary-darken, #CCC);
    border-radius: 4px;
    box-shadow: none;
    transition: background-color .2s, border-color .4s, box-shadow .15s ease-in-out;
    appearance: none;
    padding-right: 34px !important;
    text-overflow: ellipsis;
    padding: 0px 8px;
    height: 34px;
}

    .form-select:focus {
        border-color: unset;
        outline: 0;
        box-shadow: none;
    }
    .form-select:disabled {
        color: var(--text-disabled, #999) !important;
        background-color: var(--neutral-50) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        border: 1px solid var(--neutral-200, #E6E6E6) !important;
    }
    .form-select:hover {
        box-shadow: none;
        border-color: var(--border-green-01, #0B5B2F);
        background-color: var(--surface-01, #FCFCFC);
    }

select.form-select > optgroup {
    font-style: normal;
    font: var(--font-sm);
    font-weight: 400;
}
select.form-select option {
    font: var(--font-md);
    font-weight: 400;
    color: var(--text-h3, #262626) !important;
    &:hover, &:focus-visible, &:checked {
        background-color: var(--surface-03, #F3F3F3);
    }
    &:active, &[selected] {
        background-color: var(--surface-hover-old, #E6E6E6) !important;
    }
}

/* Icon */
.icon-primary {
    color: var(--primary-700) !important;
    background-color: transparent !important;
    border: none !important;
}

.icon-transparent {
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.new-mapping-container {
    background-color: var(--primary-100) !important;
    border: 1px solid var(--primary-200) !important;
    padding: 1rem;
    border-radius: 0.25rem;
}

.sync-rule-container {
    background-color: var(--primary-50) !important;
    border: 1px solid var(--primary-200) !important;
    padding: 1rem;
    border-radius: 0.25rem 4px;
}

.sync-rule-item-container {
    background-color: var(--primary-100) !important;
    border: 1px solid var(--primary-200) !important;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

/*Target blazorize modal button values hack*/
.modal-footer .btn-outline-primary {
    color: var(--neutral-600) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.modal-footer .btn-outline-primary:hover {
    background-color: var(--neutral-200) !important;
    border: 1px solid var(--neutral-300) !important;
}

.modal-footer .btn-outline-primary:active {
    background-color: var(--neutral-300) !important;
    border: 1px solid var(--neutral-400) !important;
}


/* Light toolbar (right side) styling */
.lpx-toolbar-container {
    background-color: #fff !important;
    color: #2d3748 !important;
    border-left: 1px solid #e8eef3;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04);
}

.lpx-toolbar-container .lpx-menu-item-link {
    background-color: #fff !important;
    text-align: center ;
}

.lpx-toolbar-container .lpx-menu-item-text {
    text-align: center ;
    margin: auto;
}

.lpx-toolbar-container .lpx-toolbar,
.lpx-toolbar-container > div {
    background-color: #fff !important;
}



/* Avatar styling - light background */
.lpx-toolbar-container .lpx-avatar,
.lpx-toolbar-container .avatar,
.lpx-toolbar-container .rounded-circle {
    background-color: #e8eef3 !important;
    border: 2px solid #d0d7de !important;
    color: #4a5568 !important;
}

/* Toolbar items */
.lpx-toolbar-container .lpx-toolbar-item {
    color: #2d3748 !important;
    background-color: #fff !important;
}

.lpx-toolbar-container .lpx-toolbar-item:hover {
    background-color: #f0f4f7 !important;
}

/* Icons in toolbar */
.lpx-toolbar-container .lpx-toolbar-item .lpx-icon,
.lpx-toolbar-container .lpx-toolbar-item > i {
    color: #4a5568 !important;
}

.lpx-toolbar-container .lpx-toolbar-item:hover .lpx-icon,
.lpx-toolbar-container .lpx-toolbar-item:hover > i {
    color: #2d3748 !important;
}

/* User name/text in toolbar */
.lpx-toolbar-container .user-name,
.lpx-toolbar-container .lpx-user-name {
    color: #2d3748 !important;
}

/* Dropdown menus in toolbar */
.lpx-toolbar-container .dropdown-menu,
.lpx-toolbar-container .lpx-context-menu {
    background-color: #fff !important;
    border: 1px solid #e8eef3 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.lpx-toolbar-container .dropdown-menu .dropdown-item,
.lpx-toolbar-container .lpx-context-menu-item {
    color: #2d3748 !important;
    background-color: transparent !important;
}

.lpx-toolbar-container .dropdown-menu .dropdown-item:hover,
.lpx-toolbar-container .lpx-context-menu-item:hover {
    background-color: #f0f4f7 !important;
}

/* Settings panel styling - removed wildcard overrides to preserve section headers */

/* ============================================
   Bootstrap Popover - Light Theme Override
   The settings panel is rendered as a Bootstrap popover
   ============================================ */
.popover {
    --bs-popover-bg: #fff !important;
    --bs-popover-body-color: #2d3748 !important;
    --bs-popover-header-bg: #f8f9fa !important;
    --bs-popover-header-color: #2d3748 !important;
    --bs-popover-border-color: #e8eef3 !important;
    background-color: #fff !important;
}

.popover-body {
    background-color: #fff !important;
    color: #2d3748 !important;
}

.popover-header {
    background-color: #f8f9fa !important;
    color: #2d3748 !important;
    border-bottom: 1px solid #e8eef3 !important;
}

/* Reset navbar variables specifically for popovers */
.popover,
.popover-body {
    --lpx-navbar-color: #fff;
    --lpx-navbar-color-rgb: 255, 255, 255;
    --lpx-navbar-text-color: #2d3748;
    --lpx-navbar-text-color-rgb: 45, 55, 72;
}

/* Text colors in popover - but NOT backgrounds (preserve color swatches) */
.popover-body > *,
.popover .lpx-settings-title,
.popover label,
.popover .form-label,
.popover .form-check-label {
    color: #2d3748 !important;
}

/* Section headers - preserve their original colored backgrounds */

/* Checkbox and form control text */
.popover .form-check,
.popover .form-check-label {
    color: #2d3748 !important;
}

/* Language list items */
.popover .lpx-language-item,
.popover [class*="language"] {
    color: #2d3748 !important;
}

/* Active/selected language - preserve brand color background */
.popover .lpx-language-item.active,
.popover [class*="language"].active,
.popover [class*="language"].selected {
    background-color: var(--lpx-brand, #106735) !important;
    color: #fff !important;
}

/* Settings gear icon in header */
.popover .lpx-settings-icon,
.popover-header i,
.popover-header .lpx-icon {
    color: #4a5568 !important;
}

#settings-routes {
    background-color:#ffffff !important;
}

#toolbar-body-routes {
    background-color:#ffffff !important;
}

#MenuItem_Account_Manage {
    background-color:#ffffff !important;
}