/* ===================================================================
            LAYOUT ELEMENTS
=================================================================== */
html,
body {
  font-family: 'Roboto', sans-serif;
  color: #1c1f20;
  background-color: #eaeaea;
  /* overflow-x: hidden;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none; */
  padding: 0;
  margin: 0;
}

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* HEADER */

header {
  flex-shrink: 0;
  z-index: 100;
  margin: 0;
  height: 60px;
  font-family: "Rampart One", sans-serif;
  background-color: #1c1f20 !important;
  background-color: #000000;
  font-weight: 300;
  font-size: 1em;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 1em
}

/* NAVIGATION BAR */

.nav-item{
  margin-left: 0.5em;
}

.navbar-toggler-icon {
  filter: invert(1);
  border-color: #FFFFFF
}

.navbar-nav, .nav-link {
  /* color: #FFFFFF !important; */
  /* background-color: #1B2D3E !important; */
  background-color: transparent !important;
  margin: 0 0 0 1em;
}

/* FOOTER */

footer {
  margin-top: auto;
  height: 50px;
  flex-shrink: 0;
  padding: 1em 0;
  color: #ffffff;
  font-weight: 300;
  text-align: center;
  /* position: sticky; */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #1c1f20 !important;
}
/* Parallax */
.index-parallax {
  background-image: url('/images/bg-parallax-grey.webp');
  color: #ffffff;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5em 0;
}


/* ===================================================================
            FONT CLASSES
=================================================================== */ 

/* FONT TYPES */

.rampart {
  font-family: "Rampart One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-light {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: normal;
}

.comic-neue-regular {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-bold {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: normal;
}

.comic-neue-light-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: italic;
}

.comic-neue-regular-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: italic;
}

.comic-neue-bold-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: italic;
}


.roboto-100 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-200 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-300 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-400 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-500 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-600 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.roboto-700 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* HEADINGS */

.t1 {
  font-size: 2.5rem;
}
.t2 {
  font-size: 2rem;
}
.t3 {
  font-size: 1.75rem;
}
.t4 {
  font-size: 1.5rem;
}
.t5 { 
  font-size: 1em;
}

/* ===================================================================
            LINKS & BUTTONS
=================================================================== */ 

.link {
  text-decoration: none;
}

.sidebar {
  background-color: #ffffff;
  min-width: 250px;
  min-height: 10px;
  padding: 1.5rem;
  border: 1px solid #d4d4d4;
}

.sidebar-title{
  margin: 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #dee2e6;
  color: #494B4C;
  font-weight: 500;
  font-size: 1.5rem;
}

.sidebar-header{
  margin: 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #dee2e6;
  color: #494B4C;
  font-weight: 500;
  font-size: 1.25rem;
}

.sidebar-link { 
  color: #1976D2; 
  text-decoration: none; 
  padding: 0.25rem 0;
  display: block;
  transition: color 0.2s ease-in-out;
}

/* Hover State */
.sidebar-link:hover { 
    color: #ffc107 !important; /* This is the hover color */
}

/* The "Selected" State (Added by Bootstrap JS) */
.sidebar-link.active { 
    color: #D70D1A !important; /* This stays yellow when the tab is open */
}

/* Optional: if you want the active link to still turn red on hover */
.sidebar-link.active:hover {
    color: #d70d1a !important;
}

.sidebar-link.disabled, 
.sidebar-link:disabled {
    color: #6c757d !important; /* Standard Bootstrap secondary grey */
    cursor: not-allowed;
    opacity: 0.65;
    text-decoration: none;
}

.tab-content {
  background-color: #ffffff;
  /* min-height: 600px; */
  padding: 1.5rem;
  border: 1px solid #d4d4d4;
}

.dashboard-card {
  background-color: #FFFFFF; 
  padding: 1.5rem; 

  text-decoration: none; 
  border: solid 1px #d4d4d4;  
  width: 150px;
  height: 100%;
  
  display: flex;
  flex-direction: column; /* Keeps multiple items tidy */
  align-items: center; 
  justify-content: center;

  text-align: center;
  box-shadow: 5px 5px 5px 1px #d4d4d4;
}

.dashboard-card-btn { background-color: #FFFFFF; padding: 2em; text-decoration: none; border: solid 1px #d4d4d4; color:#9fabb9 }
.dashboard-card-btn:hover { background-color: #ffecec; text-decoration: none; box-shadow: 5px 5px 5px 1px #d4d4d4; color: #28724f }

/*
.link-stone { color: #9fabb9; text-decoration: none; }
.link-stone:hover { color: #28724f; text-decoration: none; }
*/

.count {
  font-family: "comic neue", cursive;
  font-weight: 700;
  font-size: 3.5rem;
}

.plaque { 
  background-color: #FFFFFF; 
  padding: 1.5rem; 
  text-decoration: none; 
  border: solid 1px #d4d4d4; 
  display: flex; 
  flex-direction: column; 
  height: 100%; }

.plaque-btn { background-color: #FFFFFF; padding: 2em; text-decoration: none; border: solid 1px #d4d4d4; color:#1c1f20 }
.plaque-btn:hover { background-color: #ffecec; text-decoration: none; box-shadow: 5px 5px 5px 1px #d4d4d4; }

/* Link Colors */
.link-white {
  color: #FFFFFF !important;
  text-decoration: none;
}

.link-crimson {
  color: #d70d1a !important;
  text-decoration: none;
}
.link-crimson:hover {
  color: #d70d1a !important;
  text-decoration: none;
}

.link-stone { color: #9fabb9; text-decoration: none; }
.link-stone:hover { color: #28724f; text-decoration: none; }

.link-blue { 
    color: #1976D2; 
    text-decoration: none; 
    transition: color 0.2s ease-in-out;
}

/* Hover State */
.link-blue:hover { 
    color: #ffc107 !important; /* This is the hover color */
}

/* The "Selected" State (Added by Bootstrap JS) */
.link-blue.active { 
    color: #D70D1A !important; /* This stays yellow when the tab is open */
}

/* Optional: if you want the active link to still turn red on hover */
.link-blue.active:hover {
    color: #d70d1a !important;
}

.link-blue.disabled, 
.link-blue:disabled {
    color: #6c757d !important; /* Standard Bootstrap secondary grey */
    cursor: not-allowed;
    opacity: 0.65;
    text-decoration: none;
}

/* Button Colors */
.btn-crimson { background-color: #d70d1a; color: #FFFFFF; }
.btn-crimson:hover { background-color: #d70d1a; color: #FFFFFF; }

.btn-crimson-outline { background-color: transparent; color: #d70d1a; border: 1px solid #d70d1a; }
.btn-crimson-outline:hover { background-color: #d70d1a; color: #FFFFFF; border: solid 1px #d4d4d4; }

.btn-white { background-color: #FFFFFF; color: #3C6186; border: 1px solid #d4d4d4; }
.btn-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-outline-white { background-color: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.btn-outline-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-blue { background-color: #1976D2; color: #FFFFFF; }
.btn-blue:hover { background-color: #1976D2; color: #FFFFFF; }

.btn-blue-outline { background-color: transparent; color: #1976D2; border: 1px solid #1976D2; }
.btn-blue-outline:hover { background-color: #1976D2; color: #FFFFFF; border: solid 1px #d4d4d4; }


/* section formatting */
.top {
  margin-top: 70px; /* Height of the fixed header */
}

.segment {
  padding: 2em 0; /* Space between sections */
}

.end {
  padding: 2em 0; /* Space for the footer */
}


/* ===================================================================
            FONT AND BACKGROUND COLOR CLASSES
=================================================================== */
.black { color: #1C1F20 !important; }
.iron { color: #494B4C !important; }
.pewter { color: #A4A5A5 !important; }
.heather { color: #B1BFCE !important; }
.ghost { color: #EBF0F8 !important; }
.snowdrift { color: #FFECEC !important; }
.white { color: #FFFFFF !important; }


.crimson-xx-dark { color: #56050A !important; }
.crimson-x-dark { color: #81070F !important; }
.crimson-dark { color: #AC0A14 !important; }
.crimson { color: #D70D1A !important; }
.crimson-light { color: #E3555E !important; }
.crimson-x-light { color: #EF9EA3 !important; }
.crimson-xx-light { color: #FBE6E8 !important; }
.iris-xx-dark { color: #2F245F !important; }
.iris-x-dark { color: #46368E !important; }
.iris-dark { color: #5E48BE !important; }
.iris { color: #765BEE !important; }
.iris-light { color: #9F8CF3 !important; }
.iris-x-light { color: #C8BDF8 !important; }
.iris-xx-light { color: #F1EEFD !important; }
.orange-xx-dark { color: #612D0B !important; }
.orange-x-dark { color: #914411 !important; }
.orange-dark { color: #C25A16 !important; }
.orange { color: #F2711C !important; }
.orange-light { color: #F58E49 !important; }
.orange-x-light { color: #F8AB77 !important; }
.orange-xx-light { color: #FBC8A4 !important; }
.blue-xx-dark { color: #06214B !important; }
.blue-x-dark { color: #0A387E !important; }
.blue-dark { color: #0D47A1 !important; }
.blue { color: #1976D2 !important; }
.blue-light { color: #29B6F6 !important; }
.blue-x-light { color: #81D4FA !important; }
.blue-xx-light { color: #E0F2F1 !important; }
.green-xx-dark { color: #24322E !important; }
.green-x-dark { color: #364C45 !important; }
.green-dark { color: #48655C !important; }
.green { color: #5A7E73 !important; }
.green-light { color: #7B988F !important; }
.green-x-light { color: #9CB2AB !important; }
.green-xx-light { color: #BDCCC7 !important; }

.bg-black { background-color: #1C1F20 !important; }
.bg-iron { background-color: #494B4C !important; }
.bg-pewter { background-color: #A4A5A5 !important; }
.bg-heather { background-color: #B1BFCE !important; }
.bg-ghost { background-color: #EBF0F8 !important; }
.bg-cloud {background-color: #f8f9fa !important; }
.bg-app { background-color: #eaeaea !important; }
.bg-snowdrift { background-color: #FFECEC !important; }
.bg-white { background-color: #FFFFFF !important; }

.bg-crimson-xx-dark { background-color: #56050A !important; }
.bg-crimson-x-dark { background-color: #81070F !important; }
.bg-crimson-dark { background-color: #AC0A14 !important; }
.bg-crimson { background-color: #D70D1A !important; }
.bg-crimson-light { background-color: #E3555E !important; }
.bg-crimson-x-light { background-color: #EF9EA3 !important; }
.bg-crimson-xx-light { background-color: #FBE6E8 !important; }
.bg-iris-xx-dark { background-color: #2F245F !important; }
.bg-iris-x-dark { background-color: #46368E !important; }
.bg-iris-dark { background-color: #5E48BE !important; }
.bg-iris { background-color: #765BEE !important; }
.bg-iris-light { background-color: #9F8CF3 !important; }
.bg-iris-x-light { background-color: #C8BDF8 !important; }
.bg-iris-xx-light { background-color: #F1EEFD !important; }
.bg-orange-xx-dark { background-color: #612D0B !important; }
.bg-orange-x-dark { background-color: #914411 !important; }
.bg-orange-dark { background-color: #C25A16 !important; }
.bg-orange { background-color: #F2711C !important; }
.bg-orange-light { background-color: #F58E49 !important; }
.bg-orange-x-light { background-color: #F8AB77 !important; }
.bg-orange-xx-light { background-color: #FBC8A4 !important; }
.bg-blue-xx-dark { background-color: #06214B !important; }
.bg-blue-x-dark { background-color: #0A387E !important; }
.bg-blue-dark { background-color: #0D47A1 !important; }
.bg-blue { background-color: #1976D2 !important; }
.bg-blue-light { background-color: #29B6F6 !important; }
.bg-blue-x-light { background-color: #81D4FA !important; }
.bg-blue-xx-light { background-color: #E0F2F1 !important; }
.bg-green-xx-dark { background-color: #24322E !important; }
.bg-green-x-dark { background-color: #364C45 !important; }
.bg-green-dark { background-color: #48655C !important; }
.bg-green { background-color: #5A7E73 !important; }
.bg-green-light { background-color: #7B988F !important; }
.bg-green-x-light { background-color: #9CB2AB !important; }
.bg-green-xx-light { background-color: #BDCCC7 !important; }

.amber-duotone {
  --fa-primary-color: #B8860B;   
  --fa-secondary-color: #ffe135;
  --fa-secondary-opacity: 1.0; 
}

.green-duotone {
  --fa-primary-color: #1b7a43;   
  --fa-secondary-color: #eaf9f0;
  --fa-secondary-opacity: 1.0;   
}

.green-dk-duotone {
  --fa-primary-color: #005900;   
  --fa-secondary-color: #329932;
  --fa-secondary-opacity: 0.5;   
} 

.blue-duotone {
  --fa-primary-color: #1976d2;   
  --fa-secondary-color: #67e6fb;
  --fa-secondary-opacity: 0.5;   
}

.crimson-duotone {
  --fa-primary-color: #d70d1a;   
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.8;   
}

.red-duotone {
  --fa-primary-color: #d70d1a;   
  --fa-secondary-color: #d70d1a;
  --fa-secondary-opacity: 0.5;   
}

.iris-duotone {
  --fa-primary-color: #765bee;   
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.8;   
}

.green-duotone {
  --fa-primary-color: #1b7a43;   
  --fa-secondary-color: #eaf9f0;
  --fa-secondary-opacity: 1.0;   
}

.slate-duotone {
  --fa-primary-color: #64809E;   
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.8;   
}

.orange-duotone {
  --fa-primary-color: #f2711c;   
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.5;   
}

.white-duotone {
  --fa-primary-color: #ffffff;
  --fa-secondary-color: #b1bfce;
  --fa-secondary-opacity: 0.5;   
}

/* ===================================================================
            BUTTON AND LINK STYLING
=================================================================== */

/* Button Colors */
.btn-crimson { background-color: #d70d1a; color: #FFFFFF; }
.btn-crimson:hover { background-color: #d70d1a; color: #FFFFFF; }

.btn-crimson-outline { background-color: transparent; color: #d70d1a; border: 1px solid #d70d1a; }
.btn-crimson-outline:hover { background-color: #d70d1a; color: #FFFFFF; border: solid 1px #d4d4d4; }

.btn-white { background-color: #FFFFFF; color: #3C6186; border: 1px solid #d4d4d4; }
.btn-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-outline-white { background-color: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.btn-outline-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-blue { background-color: #1976D2; color: #FFFFFF; }
.btn-blue:hover { background-color: #1976D2; color: #FFFFFF; }

.btn-blue-outline { background-color: transparent; color: #1976D2; border: 1px solid #1976D2; }
.btn-blue-outline:hover { background-color: #1976D2; color: #FFFFFF; border: solid 1px #d4d4d4; }

/* ===================================================================
            FORM ELEMENT STYLING 
=================================================================== */

/* Range Slider Styling */

.slider-labels span {
  min-width: 1.5em;
  text-align: center;
  display: inline-block;
}

input[type="range"].slider {
  width: 100%;
  min-width: 120px; /* optional: set a minimum width */
  max-width: 100%;
  box-sizing: border-box;
  /* background: transparent; */
  border-radius: 0;
}

/* ===================================================================
            UTILITY & FORMATTING CLASSES
=================================================================== */

.form-label {
  font-weight: 400;
}

.form-control {
  font-weight: 300;
}

.fit-content {
  width: fit-content;
}

/* Remove rounded corners from the modal container */
.modal-content {
    border-radius: 0;
}

/* Optional: If you use header/footer borders, 
   some versions of Bootstrap apply specific radii there too */
.modal-header, 
.modal-footer {
    border-radius: 0;
}

/* .ranking-slider {
  -webkit-appearance: none;
  appearance: none;
  background-color: #d4d4d4;
  height: 8px;
  outline: none;
}
.ranking-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 4px;
  background-color: #ff0066;
  cursor: pointer;
  border-radius: 50%;
  border: none;
} */

/* Target the button when it's NOT collapsed (i.e., when the body is open) */
.accordion-button:not(.collapsed) {
  /* Set the background color when the accordion is OPEN */
  background-color: #f0f4f8;
  color: #ff0066; /* Adjust text color if needed */
}

/* Target the button on hover */
.accordion-button:not(.collapsed):hover {
  /* The color that shows when the open header is hovered */
  background-color: #A5BCCC; color: #81070F; text-decoration: none;
}

.accordion-button.collapsed {
  /* Set the background color when the accordion is CLOSED */
  background-color: #f0f4f8;
  color: #333; /* Adjust text color if needed */
}

/* Target the button when it IS collapsed (i.e., when the body is closed) */
.accordion-button:hover {
  /* The color that shows when the closed header is hovered */
  background-color: #A5BCCC; color: #81070F; text-decoration: none;
}


.box-shadow {
  box-shadow: 5px 5px 5px 1px #d4d4d4;
}

.border-tbl {
  margin-top: -1px;
  border-top: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;
  border-left: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
}

/* .input-rating {
  width: 100px;
} */

.input-btn {
  color: #fff;
  background-color: #3c6186;
  text-decoration: none;
  max-width: 50px;
}

.input-btn:hover {
  color: #333333;
  background-color: #67e6fb;
  text-decoration: none;
}

.input-reset-btn {
  color: #fff;
  background-color: #be123c;
  text-decoration: none;
  max-width: 50px;
}

.input-reset-btn:hover {
  color: #333333;
  background-color: #ebb7c4;
  text-decoration: none;
}

/* Eval Colors */
.eval10 { color: #00C853 !important; }
.eval9 { color: #4CAF50 !important; }
.eval8 { color: #CDDC39 !important; }
.eval7 { color: #FFC107 !important; }
.eval6 { color: #FFA500 !important; }
.eval5 { color: #D70D1A !important; }
.eval4 { color: #B70C15 !important; }
.eval3 { color: #8B0911 !important; }
.eval2 { color: #6B070D !important; }
.eval1 { color: #4A0409 !important; }
.eval0 { color: #000000 !important; }

/* Evaluation badge color helpers
.eval-red {
  background-color: #e74c3c !important;
  color: #fff !important;
}
.eval-pink {
  background-color: #ff77a9 !important;
  color: #000 !important;
}
.eval-orange {
  background-color: #ff8c42 !important;
  color: #000 !important;
}
.eval-yellow {
  background-color: #f1c40f !important;
  color: #000 !important;
}
.eval-chartreuse {
  background-color: #9acd32 !important;
  color: #000 !important;
}
.eval-green {
  background-color: #2ecc71 !important;
  color: #fff !important;
}

.eval-score {
  text-align: center;
}
.eval-sm {
  display: inline-block;
  padding: 0.75em 1em;
  border-radius: 2.25rem;
  font-size: 2.5em;
}

.eval-md {
  display: inline-block;
  padding: 0.5em 0.75em;
  border-radius: 2.25rem;
  font-size: 1em;
}

.eval-square {
  display: inline-block;
  font-size: 1.5em;
  padding: 0.5em 0.75em;
  margin: 0.5em;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
} */

.form-control {
  border: 1px solid #d4d4d4;
}

.form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b2bbc3;
  opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #b2bbc3;
}

.form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #b2bbc3;
}

/* .tab-panel {
  padding: 1em;
  border: 1px solid #d4d4d4;
  border-top: none;
  background-color: #ffffff;
  min-height: 200px;
} */

/* General pagination styling (applies to all pagination not in specific containers) */
.pagination .page-link {
  color: #3c6186; /* brand purple */
  border-color: #d4d4d4;
  border-width: 1px;;
  padding: 0.35rem 0.6rem;
  border-radius: 0;
}

.pagination .page-item.active .page-link {
  background-color: #3c6186; /* brand purple */
  color: #ffffff !important;
  border-color: #3c6186;
}

.pagination .page-link:hover {
  background-color: #b1bfce; /* light brand hover */
  color: #3c6186;
}

.pagination .page-item.disabled .page-link {
  color: #6c6c6c; /* muted grey */
  background-color: transparent;
  pointer-events: none;
}

/* ===================================================================
   AUTOCOMPLETE DROPDOWN STYLES
=================================================================== */
#autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  margin-top: 0.125rem;
}

#autocomplete-dropdown .dropdown-item {
  padding: 0.5rem 1rem;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

#autocomplete-dropdown .dropdown-item:last-child {
  border-bottom: none;
}

#autocomplete-dropdown .dropdown-item:hover,
#autocomplete-dropdown .dropdown-item.active {
  background-color: #f0f7ff;
  color: #3c6186;
}

#autocomplete-dropdown .dropdown-item:active {
  background-color: #e0efff;
}

/* Bookmark Toggle Buttons */
.bookmark-toggle {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.bookmark-toggle:hover {
  transform: scale(1.1);
}

.bookmark-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* DataTables Customization for Vendor List
#vendorListTable_wrapper .dataTables_length {
  margin-bottom: 1rem;
}

#vendorListTable_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

#vendorListTable_wrapper .dataTables_filter input {
  margin-left: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

#vendorListTable_wrapper .dataTables_info {
  padding-top: 0.75rem;
}

#vendorListTable_wrapper .dataTables_paginate {
  padding-top: 0.75rem;
}

#vendorListTable thead th {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

#vendorListTable tbody tr:hover {
  background-color: #f5f5f5;
} */

/* ===================================================================
            FORM FIELD STATES
=================================================================== */

/* Locked/Disabled field state - clear visual distinction that field is not editable */
.field-locked {
  background-color: #f5f5f5 !important;
  color: #999999 !important;
  opacity: 0.7;
  cursor: not-allowed !important;
  border-color: #e0e0e0 !important;
}

.field-locked:focus {
  outline: none;
  box-shadow: none;
  background-color: #f5f5f5 !important;
}

/* Disabled state for checkboxes and radio buttons */
.field-locked[type="checkbox"],
.field-locked[type="radio"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Label styling for locked fields */
.field-locked ~ label,
label[for*="checked"][disabled] {
  color: #999999;
  cursor: not-allowed;
}

/* ===================================================================
   FORM LOCKING — CRUD View Mode
   Applied by BaseFormManager when mode = view.
   Uses pointer-events so all field values remain serializable.
=================================================================== */
form.form-locked input:not([type="submit"]):not([type="checkbox"]),
form.form-locked select,
form.form-locked textarea,
form.form-locked input[type="range"] {
  pointer-events: none;
  background-color: var(--bs-secondary-bg, #e9ecef);
  opacity: 0.85;
  cursor: not-allowed;
}

form.form-locked input[type="checkbox"] {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

/* ===================================================================
   MEDIA QUERIES
=================================================================== */
/*** Phone 425px ***/
@media (min-width: 425px) {
  
}

/*** Tablet 768px ***/
@media (min-width: 768px) {
  .sidebar {
    min-width: 250px;
    min-height: 600px;
  } 
}

/*** Laptop & Desktop 1024px <- Normal 1440px <- Large ***/
@media (min-width: 1024px) {
}

@media (min-width: 1440px) {
}