@import url("variables.b47d8e0412c9.css");

/* ==========================================================================
   Contextual navigation
   ========================================================================== */
.contextual-navigation {
    margin-bottom: 0;
}

.contextual-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--secondary-700);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.75rem;
    border-radius: 1.0rem;
    padding: 0.35rem 1rem;
}

.contextual-back-link:hover {
    color: var(--primary-900);
    background-color: var(--primary-100);
}

.contextual-back-link:focus-visible {
    outline: 2px solid var(--primary-800);
    outline-offset: 3px;
    border-radius: 0.125rem;
}

.right-offcanvas__back-button {
    flex: 0 0 auto;
    width: fit-content;
    border: 0;
    background-color: transparent;
    text-align: left;
}


/* ==========================================================================
   Alerts
   ========================================================================== */
.alert-primary,
.alert-gold,
.alert-orange,
.alert-purple,
.alert-secondary {
    --bs-alert-bg: var(--alert-bg);
    --bs-alert-border-color: var(--alert-border);
    --bs-alert-color: var(--alert-text);
    --bs-alert-link-color: var(--alert-link);
}

.alert-primary {
    --alert-bg: var(--primary-100);
    --alert-border: var(--primary-300);
    --alert-text: var(--primary-900);
    --alert-link: var(--primary-950);
    --alert-icon: var(--primary-500);
}

.alert-gold {
    --alert-bg: var(--gold-50);
    --alert-border: var(--gold-300);
    --alert-text: var(--gold-900);
    --alert-link: var(--gold-950);
    --alert-icon: var(--gold-500);
}

.alert-orange {
    --alert-bg: var(--orange-50);
    --alert-border: var(--orange-300);
    --alert-text: var(--orange-800);
    --alert-link: var(--orange-950);
    --alert-icon: var(--orange-400);
}

.alert-purple {
    --alert-bg: var(--purple-100);
    --alert-border: var(--purple-300);
    --alert-text: var(--purple-900);
    --alert-link: var(--purple-950);
    --alert-icon: var(--purple-500);
}

.alert-secondary {
    --alert-bg: var(--secondary-100);
    --alert-border: var(--secondary-300);
    --alert-text: var(--secondary-900);
    --alert-link: var(--secondary-950);
    --alert-icon: var(--secondary-500);
}

.alert .alert-icon {
    color: var(--alert-icon);
    font-size: 1.5rem;
}

.alert .alert-title {
    color: var(--alert-icon);
    font-size: 1.2rem;
}

.alert .alert-body {
    color: var(--bs-alert-text);
}

.collapse-chevron {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

[data-bs-toggle="collapse"][aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}

/* ==========================================================================
   Badge
   ========================================================================== */
.badge {
    font-size: inherit;
    font-weight: 400;
    color: inherit;
    background-color: transparent;
    border: 1px solid var(--secondary-300);
}

.badge--sm { font-size: 0.875rem; }

.badge--primary,
.badge--gold,
.badge--orange,
.badge--purple,
.badge--secondary {
    color: white;
}

.badge--primary {
    background-color: var(--primary-700);
    border-color: var(--primary-900);
}

.badge--gold {
    background-color: var(--gold-700);
    border-color: var(--gold-700);
}

.badge--orange {
    background-color: var(--orange-700);
    border-color: var(--orange-900);
}

.badge--purple {
    background-color: var(--purple-700);
    border-color: var(--purple-900);
}

.badge--secondary {
    background-color: var(--secondary-700);
    border-color: var(--secondary-900);
}

.badge--primary-soft,
.badge--warning-soft,
.badge--gold-soft,
.badge--orange-soft,
.badge--purple-soft,
.badge--secondary-soft {
    background-color: var(--badge-soft-bg);
    border-color: var(--badge-border);
    color: var(--badge-text);
}

.badge--primary-outline,
.badge--gold-outline,
.badge--orange-outline,
.badge--purple-outline,
.badge--secondary-outline,
.badge--primary-outline-subtle,
.badge--gold-outline-subtle,
.badge--orange-outline-subtle,
.badge--purple-outline-subtle,
.badge--secondary-outline-subtle {
    background-color: transparent;
    color: var(--badge-text);
}

.badge--primary-outline,
.badge--gold-outline,
.badge--orange-outline,
.badge--purple-outline,
.badge--secondary-outline {
    border-color: var(--badge-border);
}

.badge--primary-outline-subtle,
.badge--gold-outline-subtle,
.badge--orange-outline-subtle,
.badge--purple-outline-subtle,
.badge--secondary-outline-subtle {
    border-color: var(--badge-border-subtle);
}

.badge--primary-soft,
.badge--primary-outline,
.badge--primary-outline-subtle {
    --badge-soft-bg: var(--primary-100);
    --badge-border: var(--primary-300);
    --badge-border-subtle: var(--primary-200);
    --badge-text: var(--primary-950);
}

.badge--warning-soft,
.badge--gold-soft,
.badge--gold-outline,
.badge--gold-outline-subtle {
    --badge-soft-bg: var(--gold-100);
    --badge-border: var(--gold-300);
    --badge-border-subtle: var(--gold-200);
    --badge-text: var(--gold-900);
}

.badge--orange-soft,
.badge--orange-outline,
.badge--orange-outline-subtle {
    --badge-soft-bg: var(--orange-100);
    --badge-border: var(--orange-300);
    --badge-border-subtle: var(--orange-200);
    --badge-text: var(--orange-900);
}

.badge--purple-soft,
.badge--purple-outline,
.badge--purple-outline-subtle {
    --badge-soft-bg: var(--purple-100);
    --badge-border: var(--purple-300);
    --badge-border-subtle: var(--purple-200);
    --badge-text: var(--purple-800);
}

.badge--secondary-soft,
.badge--secondary-outline,
.badge--secondary-outline-subtle {
    --badge-soft-bg: var(--secondary-100);
    --badge-border: var(--secondary-300);
    --badge-border-subtle: var(--secondary-200);
    --badge-text: var(--secondary-800);
}
/* ==========================================================================
   Icons
   ========================================================================== */



/* ==========================================================================
   Nav Pills
   ========================================================================== */
.nav-pills .nav-link {
    color: var(--primary-700);
    background-color: var(--primary-100);
    border-radius: 20px;
    padding: 5px 15px;
    margin-right: 5px;
}

/* Hover state */
.nav-pills .nav-link:hover {
    background-color: var(--primary-300);
    color: white;
    /* font-weight: bold; */
}

/* Selected state */
.nav-pills .nav-link.active {
    background-color: var(--primary-400);
    color: white;
    /* font-weight: bold; */
}

/* Pressed state */
.nav-pills .nav-link:active {
    background-color: var(--primary-400);
    color: white;
    /* font-weight: bold; */
}

/* ==========================================================================
   Nav Underline
   ========================================================================== */
.nav-underline .nav-link {
    color: var(--primary-700);
    background-color: transparent;
    border-radius: 0;
    padding: 0.25rem 0.5rem !important;
    margin-right: 10px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    font-weight: 600;
    color: var(--bs-secondary);
    font-size: 1rem;


}

/* Hover state */
.nav-underline .nav-link:hover {
    background-color: transparent;
    color: var(--primary-500);
    border-bottom-color: var(--primary-300);
}

/* Selected state */
.nav-underline .nav-link.active {
    background-color: transparent;
    color: var(--primary-700);
    border-bottom-color: var(--primary-400);
}

/* Pressed state */
.nav-underline .nav-link:active {
    background-color: transparent;
    color: var(--primary-700);
    border-bottom-color: var(--primary-400);
}



/* ==========================================================================
   LINKS
   ========================================================================== */


/* Link styling */

a.link-primary {
    color: var(--primary-700) !important;
    text-decoration: none;
    transition: color 0.2s;
}

a.link-primary:hover {
    color: var(--primary-950) !important;
    text-decoration: underline;
}


a.link-gold {
    color: var(--gold-800) !important;
    text-decoration: none;
    transition: color 0.2s;
}

a.link-gold:hover {
    color: var(--gold-950) !important;
    text-decoration: underline;
}



a.link {
    color: var(--primary-500);
    text-decoration: none;
    transition: color 0.2s;
}

a.link:hover {
    color: var(--primary-700);
    text-decoration: underline;
}



/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-round {
    width: 40px; /* Set width */
    height: 40px; /* Set height */
    border-radius: 50%;
    display: inline-flex; /* Align the icon properly */
    align-items: center; /* Center the icon vertically */
    justify-content: center; /* Center the icon horizontally */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 0; /* Remove default padding */
    flex-shrink: 0; /* Prevent shrinking */
}

.profile-dropdown__trigger {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-dropdown .dropdown-menu {
    min-width: 12rem;
}

.btn {
    font-size: 1.0rem;
}



.btn-transparent-danger {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--bs-danger) !important;
}

/* Palette button values */
.btn-primary,
.btn-primary-soft,
.btn-primary-plain,
.btn-primary-ghost {
    --button-strong-bg: var(--primary-700);
    --button-strong-hover: var(--primary-800);
    --button-strong-active: var(--primary-900);
    --button-strong-text: white;
    --button-soft-bg: var(--primary-100);
    --button-soft-hover: var(--primary-200);
    --button-soft-active: var(--primary-300);
    --button-text: var(--primary-900);
    --button-text-hover: var(--primary-950);
    --button-text-active: var(--primary-950);
    --button-focus: var(--primary-700);
}

.btn-gold,
.btn-gold-soft,
.btn-gold-plain,
.btn-gold-ghost {
    --button-strong-bg: var(--gold-700);
    --button-strong-hover: var(--gold-800);
    --button-strong-active: var(--gold-900);
    --button-strong-text: white;
    --button-soft-bg: var(--gold-100);
    --button-soft-hover: var(--gold-200);
    --button-soft-active: var(--gold-300);
    --button-text: var(--gold-900);
    --button-text-hover: var(--gold-950);
    --button-text-active: var(--gold-950);
    --button-focus: var(--gold-900);
}

.btn-orange,
.btn-orange-soft,
.btn-orange-plain,
.btn-orange-ghost {
    --button-strong-bg: var(--orange-700);
    --button-strong-hover: var(--orange-800);
    --button-strong-active: var(--orange-900);
    --button-strong-text: white;
    --button-soft-bg: var(--orange-100);
    --button-soft-hover: var(--orange-200);
    --button-soft-active: var(--orange-300);
    --button-text: var(--orange-900);
    --button-text-hover: var(--orange-950);
    --button-text-active: var(--orange-950);
    --button-focus: var(--orange-900);
}

.btn-purple,
.btn-purple-soft,
.btn-purple-plain,
.btn-purple-ghost {
    --button-strong-bg: var(--purple-700);
    --button-strong-hover: var(--purple-800);
    --button-strong-active: var(--purple-900);
    --button-strong-text: white;
    --button-soft-bg: var(--purple-100);
    --button-soft-hover: var(--purple-200);
    --button-soft-active: var(--purple-300);
    --button-text: var(--purple-900);
    --button-text-hover: var(--purple-950);
    --button-text-active: var(--secondary-950);
    --button-focus: var(--purple-700);
}

.btn-secondary,
.btn-secondary-soft,
.btn-secondary-plain,
.btn-secondary-ghost {
    --button-strong-bg: var(--secondary-700);
    --button-strong-hover: var(--secondary-800);
    --button-strong-active: var(--secondary-900);
    --button-strong-text: white;
    --button-soft-bg: var(--secondary-100);
    --button-soft-hover: var(--secondary-200);
    --button-soft-active: var(--secondary-300);
    --button-text: var(--secondary-800);
    --button-text-hover: var(--secondary-950);
    --button-text-active: var(--secondary-950);
    --button-focus: var(--secondary-700);
}

/* Strong buttons */
.btn-primary,
.btn-gold,
.btn-orange,
.btn-purple,
.btn-secondary {
    background-color: var(--button-strong-bg) !important;
    border-color: var(--button-strong-bg) !important;
    color: var(--button-strong-text) !important;
}

.btn-primary:hover,
.btn-gold:hover,
.btn-orange:hover,
.btn-purple:hover,
.btn-secondary:hover {
    background-color: var(--button-strong-hover) !important;
    border-color: var(--button-strong-hover) !important;
    color: var(--button-strong-text) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-gold:active,
.btn-gold.active,
.btn-orange:active,
.btn-orange.active,
.btn-purple:active,
.btn-purple.active,
.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--button-strong-active) !important;
    border-color: var(--button-strong-active) !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18) !important;
    color: var(--button-strong-text) !important;
}

/* Soft buttons */
.btn-primary-soft,
.btn-gold-soft,
.btn-orange-soft,
.btn-purple-soft,
.btn-secondary-soft {
    background-color: var(--button-soft-bg) !important;
    border-color: var(--button-soft-bg) !important;
    color: var(--button-text) !important;
}

.btn-primary-soft:hover,
.btn-gold-soft:hover,
.btn-orange-soft:hover,
.btn-purple-soft:hover,
.btn-secondary-soft:hover {
    background-color: var(--button-soft-hover) !important;
    border-color: var(--button-soft-hover) !important;
    color: var(--button-text-hover) !important;
}

.btn-primary-soft:active,
.btn-primary-soft.active,
.btn-gold-soft:active,
.btn-gold-soft.active,
.btn-orange-soft:active,
.btn-orange-soft.active,
.btn-purple-soft:active,
.btn-purple-soft.active,
.btn-secondary-soft:active,
.btn-secondary-soft.active {
    background-color: var(--button-soft-active) !important;
    border-color: var(--button-soft-active) !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12) !important;
    color: var(--button-text-active) !important;
}

/* Plain buttons remain transparent in every state. */
.btn-primary-plain,
.btn-gold-plain,
.btn-orange-plain,
.btn-purple-plain,
.btn-secondary-plain {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--button-text) !important;
}

.btn-primary-plain:hover,
.btn-gold-plain:hover,
.btn-orange-plain:hover,
.btn-purple-plain:hover,
.btn-secondary-plain:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--button-text-hover) !important;
}

.btn-primary-plain:active,
.btn-primary-plain.active,
.btn-gold-plain:active,
.btn-gold-plain.active,
.btn-orange-plain:active,
.btn-orange-plain.active,
.btn-purple-plain:active,
.btn-purple-plain.active,
.btn-secondary-plain:active,
.btn-secondary-plain.active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--button-text-active) !important;
    filter: brightness(0.85);
}

/* Ghost buttons gain a tinted surface on interaction. */
.btn-primary-ghost,
.btn-gold-ghost,
.btn-orange-ghost,
.btn-purple-ghost,
.btn-secondary-ghost {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--button-text) !important;
}

.btn-primary-ghost:hover,
.btn-gold-ghost:hover,
.btn-orange-ghost:hover,
.btn-purple-ghost:hover,
.btn-secondary-ghost:hover {
    background-color: var(--button-soft-hover) !important;
    border-color: var(--button-soft-hover) !important;
    color: var(--button-text-hover) !important;
}

.btn-primary-ghost:active,
.btn-primary-ghost.active,
.btn-gold-ghost:active,
.btn-gold-ghost.active,
.btn-orange-ghost:active,
.btn-orange-ghost.active,
.btn-purple-ghost:active,
.btn-purple-ghost.active,
.btn-secondary-ghost:active,
.btn-secondary-ghost.active {
    background-color: var(--button-soft-active) !important;
    border-color: var(--button-soft-active) !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12) !important;
    color: var(--button-text-active) !important;
}

.btn-primary:focus-visible,
.btn-primary-soft:focus-visible,
.btn-primary-plain:focus-visible,
.btn-primary-ghost:focus-visible,
.btn-gold:focus-visible,
.btn-gold-soft:focus-visible,
.btn-gold-plain:focus-visible,
.btn-gold-ghost:focus-visible,
.btn-orange:focus-visible,
.btn-orange-soft:focus-visible,
.btn-orange-plain:focus-visible,
.btn-orange-ghost:focus-visible,
.btn-purple:focus-visible,
.btn-purple-soft:focus-visible,
.btn-purple-plain:focus-visible,
.btn-purple-ghost:focus-visible,
.btn-secondary:focus-visible,
.btn-secondary-soft:focus-visible,
.btn-secondary-plain:focus-visible,
.btn-secondary-ghost:focus-visible {
    box-shadow: none !important;
    outline: 2px solid var(--button-focus) !important;
    outline-offset: 2px;
}

:is(
    .btn-primary, .btn-primary-soft, .btn-primary-plain, .btn-primary-ghost,
    .btn-gold, .btn-gold-soft, .btn-gold-plain, .btn-gold-ghost,
    .btn-orange, .btn-orange-soft, .btn-orange-plain, .btn-orange-ghost,
    .btn-purple, .btn-purple-soft, .btn-purple-plain, .btn-purple-ghost,
    .btn-secondary, .btn-secondary-soft, .btn-secondary-plain, .btn-secondary-ghost
):is(:disabled, [disabled], .disabled) {
    background-color: var(--secondary-200) !important;
    border-color: var(--secondary-200) !important;
    color: var(--secondary-600) !important;
    pointer-events: none !important;
}

.btn i {
    color: inherit !important;
}


/* Light Button - Transparent variant of Secondary */

.btn-nofocus {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--primary-500) !important;
    position: relative;
    overflow: hidden;
}

.btn-nofocus::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
    z-index: -1;
}

.btn-nofocus:hover {
    background-color: var(--primary-100) !important;
    border-color: var(--primary-100) !important;
    color: var(--primary-500) !important;
}

.btn-nofocus:active,
.btn-nofocus:focus {
    background-color: var(--primary-200) !important;
    border-color: var(--primary-200) !important;
    color: var(--primary-700) !important;
}

/* Reset focus styles on blur to ensure hover works after click */
.btn-nofocus:focus:not(:hover) {
    background-color: transparent !important;
    border-color: transparent !important;
    transition: background-color 0.8s ease, border-color 0.8s ease;
}

.btn-nofocus.focus-visible:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    transition: background-color 0.8s ease, border-color 0.8s ease;

}

.no-click{
    pointer-events: none !important; /* Disable all pointer events */
    cursor: default !important; /* Change cursor to default */
    opacity: 0.8; /* Optional: make it look disabled */
}





/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown-menu, .dropdown-item {
    font-family: inherit;
    font-size: inherit;

}


.dropdown-menu {
    border: 0px;
    border-radius: 3px;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.15) !important;
    padding-bottom: 5px;
    margin-top: 3px;
    position: absolute;
    z-index: 1060 !important;

}
.optgroup-header {
    font-weight: bold;
    color: var(--primary-500) !important;
}

.dropdown-menu .dropdown-item {
    color: var(--bs-primary-text) !important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--primary-100);
    color: var(--primary-950) !important;
}
.dropdown-menu .dropdown-item:active {
    background-color: var(--primary-200);
    color: var(--primary-950) !important;
}
.dropdown-menu .dropdown-item.active {
    background-color: var(--primary-200);
    color: var(--primary-950);
}
.dropdown-menu .dropdown-item:disabled {
    color: var(--bs-secondary-color) !important;

}
/* Higher than modals */
.selectize-dropdown {
    z-index: 2000 !important;
}




.card .dropdown-menu {
    position: fixed !important;
    z-index: 1090 !important;
}



/* ===========================================================================
   FORMS
   ========================================================================== */

/* Apply body font styles to dropdown items */
input, select {
    font-size: 1rem !important;
}

/* Make all input and textarea placeholders lighter */
input::placeholder,
textarea::placeholder {
    color: var(--secondary-400) !important; /* Choose a light gray */
    opacity: 1; /* Ensure it's fully visible */
}


/* Apply body font styles to dropdown items */
.optgroup, .option, .item {
    font-size: 1rem !important;
}

.restricted {
    display: none !important; /* Hidden by default */
}

.restricted.show-restricted {
    display: block !important; /* Visible when the class is toggled */
    pointer-events: none;
}

/* DEPRECATED *-------------------------------------*/
.form-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-700) !important;
    padding: 0;
    margin: 0;
}

.form > label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-700) !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
}


/* Increase font size for floating inputs */
.form-floating .form-control, .form-floating .form-select,
.form .form-control, .form .form-select, .selectize-input .item {
    font-size: 1.0rem !important; /* Adjust this value as needed */


}

.form-floating {
    margin-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}


/* .form-floating > label, .form > label {
    font-size: 0.95rem;
    color: var(--primary-700) !important;
} */

/* Form Floating Label Styles */
.form-floating > label  {
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--primary-700) !important;
    opacity: 0.85 !important; /* Increased opacity from default 0.65 */
    /* transform: scale(.875) translateY(-.5rem) translateX(.15rem); */

}

/* Ensure opacity stays consistent when focused/filled */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 1.0 !important;
}

/* Maintain opacity for disabled state */
.form-floating > .form-control:disabled ~ label,
.form-floating > .form-control:disabled::placeholder {
    opacity: 1.0 !important;
}

.form-helptext {
    font-size: 0.875rem !important;
    color: var(--bs-secondary-color) !important;
}

.captiontext {
    font-size: 0.75rem !important;
    color: var(--bs-secondary-color) !important;
}


.maxlength-counter {
    font-size: 0.8125rem !important;
    color: var(--bs-secondary-color);
}


.form-floating > .form-helptext, .form > .form-helptext {
    padding: 0.25rem;
    padding-left: 0.5rem !important;
    padding-right: 0.25rem !important;
    font-style: normal;
}
.form-helptext.maxlength {
    margin-top: -1.5rem;
    margin-right: 3.5rem;
}

.form > .form-helptext > p, .form-floating > .form-helptext > p {
    margin-bottom: 0rem !important;
}




/* ==========================================================================
   Form Check
   ========================================================================== */
.form-check {
    padding-left: 0rem !important;
    margin-left: 0.25rem !important;
}


.form-check-input {
    /* Basic appearance */
    border: 1px solid var(--primary-300);
    background-color: white;
    margin: 0 !important;
}

/* Checked state */
.form-check-input:checked {
    background-color: var(--primary-400);
    border-color: var(--primary-400);
}

/* Hover state */
.form-check-input:hover {
    border-color: var(--primary-400);
}

/* Focus state */
.form-check-input:focus {
    border-color: var(--primary-400);
    box-shadow: none;
}

/* Active/pressed state */
.form-check-input:active {
    background-color: var(--primary-200);
    border-color: var(--primary-400);
}

/* Disabled state */
.form-check-input:disabled {
    opacity: 0.5;
    background-color: var(--secondary-200);
    border-color: var(--secondary-300);
}

/* Large checkbox size */
.check-input-lg {
    height: 1.25rem !important;
    width: 1.25rem !important;
    border-radius: 0.25em;
    position: relative;
    cursor: pointer;
    flex-shrink: 0; /* Prevent shrinking */
}

.switch-input-lg {
    height: 1.25rem !important;
    width: 2.5rem !important;
    border-radius: 0.25em;
    position: relative;
    cursor: pointer;
}

/* Small checkbox size */
.check-input-sm {
    height: 0.9rem !important;
    width: 0.9rem !important;
    border-radius: 0.25em;
    position: relative;
    cursor: pointer;
}


/* Circular aura on hover using ::before pseudo-element */
.check-input-lg:hover::before,
.check-input-sm:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--primary-200); /* Use the variable directly */
    opacity: 0.3;
    border-radius: 50%;
    z-index: 0;
}

/* Radio variant */
.form-check-input[type="radio"] {
    border-radius: 50%;
}




.check {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.25rem;
        padding: 0 !important;
    }

.form-check label {
    text-align: left;
    padding: 0;
    margin: 0;
}

.form-check .form-check-input {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   Form Control
   ========================================================================== */

/* Form Control Styling */
.form-control, .form-select, .selectize-input {
    border-color: var(--primary-200);
}

.form-control:focus, .form-select:focus, .selectize-input.focus {
    border-color: var(--primary-400);
    box-shadow: none;
}


/* Style disabled states */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.selectize-input:disabled {
    border-color: var(--secondary-300);
    opacity: 0.75;
}



/* ==========================================================================
   Form Compact (Cutting Floating labels)
   ========================================================================== */

.form-compact {
    position: relative; /* Added: Allows absolute positioning of child elements */
}
.form-compact > label {
    font-size: 0.8125rem;
    color: var(--primary-700) !important;
    padding: 0rem 0.25rem;
    margin-bottom: -1rem !important;
    background-color: white;
    z-index: 2;
    position: absolute; /* Changed: Positions label absolutely within relative container */
    top: -0.6rem;
    left: 0.75rem;/* Adjust as needed to position over the select */
}


.form-compact.multi .items {
    padding-top: 0.5rem !important;
}
.form-compact.multi .item {
    font-size: 0.8125rem !important;
}







/*
==========================================================================
   CARDS
==========================================================================
*/
.card {
    border-radius: 10px;
    background-color: #ffffff;
    -webkit-box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.15);
    -moz-box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.15);
    box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.15);
    border-color: var(--primary-100);
    border: 1px solid var(--secondary-100);
    overflow-y: visible;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.card.no-shadow {
    box-shadow: none !important;
}
.card-focused {
    border-width: 3px !important;
}


.card .card-header, .card .card-footer {
    overflow: visible;
    background-color: transparent;
}
.card .card-header:not(.no-flex) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header {
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
}



.card-body.scrollable {
    flex: 1 1 auto;
    overflow-y: auto;
}
.card.card-border {
    border: 2px solid var(--primary-300) !important;
}
/* Color Variants */
.card-gold {
    --card-title-accent: var(--gold-950);
    --card-muted-accent: var(--gold-800);
    --card-icon-accent: var(--gold-600);
    border: 1px solid var(--gold-300) !important;
}
.card-gold .card-header  {
    border-color: var(--gold-100) !important;
    background-color: var(--gold-100) !important;
    color: var(--card-title-accent);
}
.card-red {
    border: 1px solid var(--red-200) !important;
}
.card-red .card-header  {
    border-color: var(--red-100) !important;
    background-color: var(--red-100) !important;
    color: var(--red-600) !important;
}
.card-primary {
    --card-title-accent: var(--primary-950);
    --card-muted-accent: var(--primary-800);
    --card-icon-accent: var(--primary-600);
    border: 1px solid var(--primary-300) !important;
}
.card-primary .card-header  {
    border-color: var(--primary-100) !important;
    background-color: var(--primary-100) !important;
    color: var(--card-title-accent) !important;
}

.card-orange {
    --card-title-accent: var(--orange-950);
    --card-muted-accent: var(--orange-800);
    --card-icon-accent: var(--orange-700);
    border: 1px solid var(--orange-300) !important;
}
.card-orange .card-header  {
    border-color: var(--orange-100) !important;
    background-color: var(--orange-100) !important;
    color: var(--card-title-accent) !important;
}

.card-purple {
    --card-title-accent: var(--purple-950);
    --card-muted-accent: var(--purple-800);
    --card-icon-accent: var(--purple-600);
    border: 1px solid var(--purple-300) !important;
}
.card-purple .card-header  {
    border-color: var(--purple-100) !important;
    background-color: var(--purple-100) !important;
    color: var(--card-title-accent) !important;
}

.card-secondary {
    --card-title-accent: var(--secondary-800);
    --card-muted-accent: var(--secondary-700);
    --card-icon-accent: var(--secondary-600);
    border: 1px solid var(--secondary-300) !important;
}
.card-secondary .card-header  {
    border-color: var(--secondary-100) !important;
    background-color: var(--secondary-100) !important;
    color: var(--secondary-800) !important;
}



/*
==========================================================================
   ACTION CARDS
==========================================================================
*/

.a-invisible {
    color: var(--bs-primary) !important;
    text-decoration: none;
}

.a-invisible:hover {
    color: var(--bs-primary) !important;
    text-decoration: none;
}

.action-card {
    --action-card-border: var(--secondary-300);
    --action-card-border-hover: var(--secondary-400);
    --action-card-bg-hover: var(--secondary-50);
    --action-card-strong: var(--secondary-900);
    --action-card-muted: var(--secondary-400);

    border-color: var(--action-card-border);
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.action-card:hover {
    border-color: var(--action-card-border-hover);
    background-color: var(--action-card-bg-hover);
}

.action-card--primary {
    --action-card-border: var(--primary-300);
    --action-card-border-hover: var(--primary-600);
    --action-card-bg-hover: var(--primary-50);
    --action-card-strong: var(--primary-900);
    --action-card-muted: var(--primary-400);
}

.action-card--orange {
    --action-card-border: var(--orange-300);
    --action-card-border-hover: var(--orange-600);
    --action-card-bg-hover: var(--orange-50);
    --action-card-strong: var(--orange-950);
    --action-card-muted: var(--orange-700);
}

.action-card__strong {
    color: var(--action-card-strong);
}

.action-card__muted {
    color: var(--action-card-muted);
}


/*
==========================================================================
   Header styles
==========================================================================
*/

/* Card header with icon and content */
.card-header > .header-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}
/* Icon circle container */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-circle {
    background-color: white;
}



.icon-circle-primary {
    background-color: var(--primary-100);
    color: var(--primary-800);
}

.icon-circle-gold {
    background-color: var(--gold-100);
    color: var(--gold-800);
}

.icon-circle-orange {
    background-color: var(--orange-100);
    color: var(--orange-800);
}

.icon-circle-purple {
    background-color: var(--purple-100);
    color: var(--purple-700);
}

.icon-circle-danger {
    background-color: var(--red-100);
    color: var(--red-600);
}

.icon-circle-secondary {
    background-color: var(--secondary-100);
    color: var(--secondary-600);
}



/* Content area that grows and truncates */
.card-header > .header-start > .header-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.card-header > .btn,
.card-header > [data-bs-toggle="dropdown"] {
    flex-shrink: 0;
}

.card-header .subtitle {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    /* color: var(--secondary-600); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.card-header .title {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.card-gold .card-header .subtitle,
.card-primary .card-header .subtitle,
.card-orange .card-header .subtitle,
.card-purple .card-header .subtitle {
    color: var(--card-muted-accent);
}

.card-gold .card-header .icon-circle,
.card-gold .card-header .header-start > i,
.card-primary .card-header .icon-circle,
.card-primary .card-header .header-start > i,
.card-orange .card-header .icon-circle,
.card-orange .card-header .header-start > i,
.card-purple .card-header .icon-circle,
.card-purple .card-header .header-start > i {
    color: var(--card-icon-accent) !important;
}

.card-invisible {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.card-invisible .card-header, .card-invisible .card-footer {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* Light


















/* DEPRECATED --- USE .outline-card */
.card-bordered {
    box-shadow: none;
    background-color: white;
    border: 1px solid var(--primary-300) !important;

}
.card-bordered.border-strong {
    border: 3px solid var(--primary-300) !important;

}


/* DEPRECATED
.card-transparent {
    background: transparent !important;
    box-shadow: none;
    border-color: transparent !important;
}
*/

/*
==========================================================================
   Pseudo Cards (do not use .card class)
==========================================================================
*/
.outline {
    background-color: white;
    position: relative;

}
.outline-card {
    border-radius: 10px;
    border: 1px solid var(--primary-300);
    overflow-y: visible;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.outline-card.border-weak {
    border: 3px solid var(--primary-100) !important;
}

.outline-card-responsive {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (max-width: 575.98px) {
    .outline-card-responsive {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }
}


.outline > .outline-label {
    font-size: 0.875rem;
    color: var(--primary-700) !important;
    padding: 0rem 0.25rem;
    margin-bottom: -1rem !important;
    background-color: white;
    z-index: 2;
    position: absolute;
    top: -0.6rem;
    left: 1.0rem;
}

/* New "soft" card */
.soft-card {
    border-radius: 10px;
    border: 1px solid var(--primary-300);
    overflow-y: visible;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    border: 3px solid var(--primary-100) !important;
}

.soft-card-sm {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.soft-card-sm-tight {
    padding: 0 !important;
}

.soft-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}



@media (max-width: 575.98px) {
    .soft-card-sm, .soft-card-sm-tight {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }
}




/* Flip card  */
.flip-card {
    perspective: 1200px;
}

.flip-card-inner {
    display: grid;
    grid-template-areas: "card";
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.45s ease;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    grid-area: card;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flip-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-400);
    font-size: 0.75rem;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
    z-index: 10;
}

.flip-btn:hover {
    opacity: 1;
    color: var(--primary-700);
}




/* ==========================================================================
   Icons
   ========================================================================== */
.icon-svg {
    width: 1em; /* Same as Font Awesome's default size */
    height: 1em; /* Maintain aspect ratio */
    vertical-align: middle; /* Align with text */
    margin-left: 0.25rem;
    margin-right: 0.15rem;
    fill: currentColor; /* Use the current text color for the SVG */
}


.logo-svg {
    width: 8em; /* Same as Font Awesome's default size */
    height: 8em;
    vertical-align: middle; /* Align with text */
    margin-left: 0.25rem;
    margin-right: 0.15rem;
    fill: currentColor; /* Use the current text color for the SVG */
}






/*
==========================================================================
   Linked List
==========================================================================
*/

.linked-list {
    padding: 0 0 0 10px;
    margin: 0;
    list-style: none;
    font-size: 0.875rem;
  }

  .linked-list .linked-item {
    position: relative;
    padding: 0 0 20px 30px;
    border-left: 2px solid var(--primary-200);
    height: 40px;
  }

  .linked-list .linked-item:last-child {
    border-color: transparent;
  }

  .linked-list .linked-item-icon {
    position: absolute;
    top: 0px;
    left: -13px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    border: var(--primary-200) 1px solid;
;
  }


.linked-list.active .linked-item-icon {
    background: var(--primary-200);
}


  .linked-list .linked-item-icon-content {
    color: var(--primary-700);
    font-size: 0.875rem;
    text-align: center;
  }

  .linked-list .linked-item-text {
    position: relative;
    line-height: 1.0;
    padding-top: 5px;
  }

  .linked-item-secondary .linked-item-icon {
    background: var(--primary-700);
  }


/*
==========================================================================
   Navbar Toggler
==========================================================================
*/
/* Style the navbar-toggler to always have no border and transparent background */
.navbar-toggler {
    border-radius: 50% !important;
    width: 40px;         /* Adjust as needed */
    height: 40px;        /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: none !important;
}
.navbar-toggler:hover {
    background-color: var(--primary-200) !important;
    border: none !important;
    color: var(--primary-500) !important;
}

.navbar-toggler:active,
.navbar-toggler:focus,
.navbar-toggler.active {
    background-color: var(--primary-200) !important;
    border: none !important;
    color: var(--primary-700) !important;
    box-shadow: none !important;
}

.navbar-toggler:focus:not(:hover):not(.active) {
    background-color: transparent !important;
    border: none !important;
    color: var(--bs-primary-text) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    box-shadow: none !important;
}


/*========================================================================
Heading
========================================================================== */

/* Heading utility: converts inline layout styles into a reusable class */
.heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.0rem 0rem;
    overflow: visible;
}

.heading.w-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.heading > .heading-content {
    flex: 1;
    min-width: 150px;
    flex-shrink: 1;
    overflow: visible;
}

/* Truncated headings and their actions must remain on one row. */
.heading.truncate {
    flex-wrap: nowrap;
}

.heading.truncate > .heading-content {
    min-width: 0;
    overflow: hidden;
}
/* Non-truncated headings keep their natural width;
   actions flow to the next line instead (flex-wrap: wrap on .heading) */
.heading > .heading-content:not(.truncate) {
    flex: 1 0 auto;
}
.heading > .heading-content > .heading-title {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: visible;
    font-size: 1.25rem;
    font-weight: bold;
}
.heading > .heading-content > .heading-caption {
    font-size: 0.75rem;
    color: var(--secondary-600);
}
.heading > .heading-content > .heading-subtitle {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}
.heading > .heading-content.truncate > .heading-title > .heading-title-text,
.heading > .heading-content.truncate > .heading-subtitle,
.heading > .heading-content.truncate > .heading-caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.heading > .heading-content.truncate > .heading-title > .dropdown {
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .heading {
        padding-left: 0.rem;
        padding-right: 0.rem;
    }
    /* Actions take their own full-width row below sm */
    .heading:not(.truncate) > .heading-actions {
        width: 100%;
    }
    /* .heading > .heading-content.truncate > .heading-title {
        font-size: 1.0rem;
    }
    .heading > .heading-content > .heading-subtitle {
        font-size: 0.875rem;
    } */
}

.heading > .heading-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    /* When wrapped onto its own line, the actions sit at the left */
}



.heading-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
    margin-top: 0.35rem;
    color: var(--primary-700);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Run analysis action (group analysis setup):
   spans the heading-actions row below sm so the button can go full width */
.run-analysis {
    width: 100%;
}

@media (min-width: 576px) {
    .run-analysis {
        width: auto;
    }
}


/* Divider */
.text-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
}

.text-divider::before,
.text-divider::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid #dee2e6; /* Line color */
}

.text-divider:not(:empty)::before {
  margin-right: .75em;
}

.text-divider:not(:empty)::after {
  margin-left: .75em;
}