@import url("variables.63488d98ee1a.css");



/* ==========================================================================
   Badge
   ========================================================================== */
.badge {
    font-weight: normal;
    font-size: inherit;
    color: inherit;
    background-color: var(--secondary-200);
}

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


.badge-primary {
    background-color: var(--primary-400);
    color: white;
    border: none;
}

.badge-primary-100 {
    background-color: var(--primary-100);
    color: var(--primary-500);
    border: var(--primary-300) 1px solid;
}

.badge-gold-100 {
    color: var(--gold-600);
    background-color: var(--gold-100);
    border: 1px solid var(--gold-300);
}



.badge-gold-outline {
    color: var(--gold-600);
    border: 1px solid var(--gold-400);
    background-color: var(--gold-200);
}

.badge-purple-100 {
    color: var(--purple-600);
    background-color: var(--purple-100);
    border: var(--purple-300) 1px solid;
}

.badge-purple-outline {
    color: var(--purple-600);
    background-color: transparent;
    border: var(--purple-300) 1px solid;
}

.badge-primary-outline-100 {
    border: 1px solid var(--primary-150);
    background-color: transparent;
}
.badge-primary-outline {
    background-color: transparent;
    color: var(--primary-500);
    border: var(--primary-300) 1px solid;
}


.badge-secondary-100 {
    background-color: var(--secondary-100);
    color: var(--secondary-700);
    border: var(--secondary-400) 1px solid;
}


.badge-secondary-outline {
    background-color: transparent;
    color: var(--secondary-500);
    border: var(--secondary-300) 1px solid;
}




/* ==========================================================================
   Nav Pills
   ========================================================================== */
.nav-pills .nav-link {
    color: var(--primary-600);
    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-600);
    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-600);
    border-bottom-color: var(--primary-400);
}

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





/* ==========================================================================
   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 */
}

.btn {
    font-size: 1.0rem;
}



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

/* Primary Transparent Button States */
.btn-primary-transparent {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--bs-primary-text) !important;
}
.btn-primary-transparent:hover,
.btn-primary-transparent:active, 
.btn-primary-transparent.active,
.btn-primary-transparent:focus
{
    color: var(--bs-primary-text-hover) !important;
}

/* Primary Button States */
.btn-primary {
    background-color: var(--bs-primary-bg) !important;
    border-color: var(--bs-primary-bg) !important;
}
.btn-primary:hover {
    background-color: var(--bs-primary-hover-bg) !important;
    border-color: var(--bs-primary-hover-bg) !important;
}

.btn-primary:active, .btn-primary:focus,
.btn-primary.active {
    background-color: var(--bs-primary-active-bg) !important;
    border-color: var(--bs-primary-active-bg) !important;
}

/* Secondary Button States */
.btn-secondary {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary) !important;
}

.btn-secondary i {
    color: var(--bs-secondary) !important;
}

.btn-secondary:hover {
    background-color: var(--bs-secondary-hover-bg) !important;
    border-color: var(--bs-secondary-hover-bg) !important;
}

.btn-secondary:disabled, 
.btn-secondary[disabled], 
.btn-secondary.disabled {
    background-color: var(--bs-secondary-disabled-bg) !important;
    border-color: var(--bs-secondary-disabled-bg) !important;
    color: var(--bs-secondary-disabled-color) !important;
}

.btn-secondary:active, .btn-secondary:focus,
.btn-secondary.active{
    background-color: var(--bs-secondary-active-bg) !important;
    border-color: var(--bs-secondary-active-bg) !important;
}
/* Reset focus style when user moves mouse away */
.btn-secondary:focus:not(:hover):not(.active) {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}



.btn-clear{
    background-color: transparent !important;
    border-color: transparent !important;
    /* color: var(--bs-secondary) !important; */
}
/* .btn-transparent {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--bs-secondary) !important;
} */



/* Info Button States */
.btn-primary-light {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--primary-500) !important;
}
.btn-primary-light:hover {
    background-color: var(--primary-150) !important;
    border-color: var(--primary-150) !important;
    color: var(--primary-500) !important;
}

.btn-primary-light:active, 
.btn-primary-light:focus,
.btn-primary-light.active {
    background-color: var(--primary-250) !important;
    border-color: var(--primary-250) !important;
    color: var(--primary-600) !important;
}

/* Reset focus style when user moves mouse away */
.btn-primary-light:focus:not(:hover):not(.active) {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--bs-primary-text) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}



/* Info Button States */
.btn-primary-50 {
    background-color: var(--primary-50) !important;
    border-color: var(--primary-50) !important;
    color: var(--primary-500) !important;
}
.btn-primary-50:hover {
    background-color: var(--primary-150) !important;
    border-color: var(--primary-150) !important;
    color: var(--primary-500) !important;
}

.btn-primary-50:active, 
.btn-primary-50:focus,
.btn-primary-50.active {
    background-color: var(--primary-250) !important;
    border-color: var(--primary-250) !important;
    color: var(--primary-600) !important;
}

/* Reset focus style when user moves mouse away */
.btn-primary-50:focus:not(:hover):not(.active) {
    background-color: var(--primary-50) !important;
    border-color: var(--primary-50) !important;
    color: var(--bs-primary-text) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.btn-primary-50:disabled, 
.btn-primary-50[disabled], 
.btn-primary-50.disabled {
    background-color: var(--bs-primary-disabled-bg) !important;
    border-color: var(--bs-primary-disabled-bg) !important;
    color: var(--bs-primary-disabled-color) !important;
    pointer-events: none !important;
}






/* Gold Button States (Basic)*/
.btn-gold {
    background-color: var(--gold-100) !important;
    border-color: var(--gold-100) !important;
    color: var(--gold-600) !important;
}



.btn-gold:hover {
    background-color: var(--gold-200) !important;
    border-color: var(--gold-200) !important;
}

.btn-gold:active, .btn-gold:focus, .btn-gold.active {
    background-color: var(--gold-250) !important;
    border-color: var(--gold-250) !important;
}

/* Reset focus style when user moves mouse away */
.btn-gold:focus:not(:hover):not(.active) {
    background-color: var(--gold-100) !important;
    border-color: var(--gold-100) !important;
    color: var(--gold-600) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}




/* 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-600) !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-700) !important;
}
.dropdown-menu .dropdown-item:active {
    background-color: var(--primary-200);
    color: var(--primary-700) !important;
}
.dropdown-menu .dropdown-item.active {
    background-color: var(--primary-150); 
    color: var(--primary-700);
}
.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;
    color: var(--primary-600) !important;
}

.form > label {
    font-size: 0.875rem; 
    color: var(--primary-600) !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-600) !important;
} */

/* Form Floating Label Styles */
.form-floating > label  {
    font-size: 1.0rem; 
    color: var(--primary-600) !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: var(--secondary-000);
    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;
}

.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-600) !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;
}
.card.no-shadow {
    box-shadow: none !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 {
    border: 1px solid var(--gold-200) !important;
}
.card-gold .card-header  {
    border-color: var(--gold-100) !important;
    background-color: var(--gold-100) !important;
    color: var(--gold-600);
}
.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 {
    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(--primary-600) !important;
}

.card-secondary {
    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-600) !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:hover {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    background-color: var(--primary-50) !important;
}
.action-card:hover .hover-link {
    color: var(--bs-primary) !important;
    
}
.action-card {
    outline: 2px solid var(--primary-200);
    
}


/*
==========================================================================
   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;
}

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



/* 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 {
    color: var(--gold-400);
}
.card-primary .card-header .subtitle {
    color: var(--primary-450);
}

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



















/* 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;
}
.outline > .outline-label {
    font-size: 0.875rem; 
    color: var(--primary-600) !important;
    padding: 0rem 0.25rem;
    margin-bottom: -1rem !important;
    background-color: white;
    z-index: 2;
    position: absolute; 
    top: -0.6rem; 
    left: 1.0rem;
} 


.card-secondary {
    border: 1px solid var(--secondary-300) !important;
    border-radius: 10px;
}




/* ==========================================================================
   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-600);
    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-600);
  }


/*
==========================================================================
   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-150) !important;
    border: none !important;
    color: var(--primary-500) !important;
}

.navbar-toggler:active,
.navbar-toggler:focus,
.navbar-toggler.active {
    background-color: var(--primary-250) !important;
    border: none !important;
    color: var(--primary-600) !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 2.0rem;
}

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

.heading > .heading-content {
    flex: 1;
    min-width: 150px;
    flex-shrink: 1;
}
.heading > .heading-content > .heading-title {
        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: 1.0rem;
}
.heading > .heading-content.truncate > .heading-title,
.heading > .heading-content.truncate > .heading-subtitle,
.heading > .heading-content.truncate > .heading-caption {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

@media (max-width: 576px) {
    .heading {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .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;
}