/* Sticky footer styles
-------------------------------------------------- */


@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Heebo&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


:root {
  --custom-active-button-green: #c9f8c9;
  --primary:#ac8ccf;

  /* should be fafafa */
  --custom-background-light: #ffffff;



  --custom-dark-blue: #022f73;
  
  --custom-medium-blue: #0193cb;
  --custom-light-blue: rgb(255, 255, 255);
  --custom-light-blue-opacity-low: rgb(255, 67, 4);
  --custom-dark-green: #21a765;
  --custom-medium-green: #73cf40;
  --custom-light-green: #32ffb5;

  --custom-success-green: #1c9c0b;
  --custom-error-red: #ff627d;

  --custom-pink: rgba(218, 52, 108);

  --custom-pink-subtle: rgba(218, 52, 108, 0.2);

  --custom-blue: rgba(38, 98, 217);

  --custom-blue-subtle: rgba(38, 98, 217,0.5);

  --custom-grey-subtle: rgb(241, 241, 241);

  --custom-black-header:rgb(33, 37, 41);

  --commercial-green:rgb(28, 201, 92);

  --commercial-green:rgb(2, 208, 255);

  --link-text: oklch(62.7% 0.265 303.9);

  --cmd-bg: #2a2d33;        /* panel */
  --cmd-bg-2: #24272c;      /* rows */
  --cmd-fg: #e8e8ea;
  --cmd-fg-muted:#a7aab0;
  --cmd-accent:#8d96a3;     /* borders/lines */
  --cmd-active: rgba(255,255,255,.08);
  --cmd-ring: rgba(255,255,255,.06);
  --cmd-radius: 16px;

}


.link-text{
  color: var(--link-text);
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.30rem;
  margin-top: 0.25rem;  /* Adds a little space above */
  margin-bottom: 0.25rem; /* Optional, balances bottom spacing */
  line-height: 1.2;
}
.contact-info > div {
  margin: 0; /* Remove default margins from inner divs */
}

.custom-badge {
  padding: 0.35em 0.5em;   /* less horizontal padding */
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  text-transform: none;
  display: inline-block;
  min-width: 80px;
  text-align: center;
}


.custom-badge-neutral {
  background-color: #09090b; /* pale green */
  color: #e9e8e8;            /* dark green */
}

/* Base pale background + darker text */
.custom-badge-success {
  background-color: rgb(215, 255, 234); /* pale green */
  color: oklch(26.2% 0.051 172.552);            /* dark green */
}

.custom-badge-danger {
  background-color: oklch(70.4% 0.191 22.216); /* pale red */
  color: oklch(25.8% 0.092 26.042);            /* dark red */
}

.custom-badge-warning {
  background-color: oklch(90.5% 0.182 98.111); /* pale yellow */
  color: oklch(28.6% 0.066 53.813);            /* dark yellow/brown */
}

.custom-badge-info {
  background-color: #b0e3f1; /* pale light blue */
  color: #0d3e54;            /* dark blue */
}

.custom-bg-info{
  background-color: #b0e3f1;
}

.custom-text-info{
  color: #035479 !important;
}

.bg-custom-light{
  background-color: #fafafa !important; 
}

.custom-success-green{
  color: var(--custom-success-green);
}


.custom-error-red{
  color: var(--custom-error-red);
}


.revenue-card {
  border: none;
}

.kpi-value {
  font-size: 2.5rem;
}
.kpi-change {
  font-size: 1.2rem;

}
.kpi-title {
  font-size: 1.2rem;
  margin-bottom: 2px;

}
.kpi-description {
  font-size: 1rem;
}

.kpi-icon {
  float: right;
  font-size: 2.0rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;

}

.commercial-light{
  background-color: var(--custom-grey-subtle);
}


.commercial-green{
  background-color: var(--commercial-green);
}


.commercial-blue{
  background-color: var(--commercial-blue);
}



canvas {
  max-height: 30rem;
  width: 100% !important;
}


.sidebar-editor.show {
  transform: translateX(0);
}

.card-wrapper .card-buttons {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}

.card-wrapper:hover .card-buttons {
  opacity: 1;
  visibility: visible;
}


.span-notification-colour{
  color: var(--custom-light-green);
}


.span-subtitle-colour{
  color: var(--custom-grey-subtle);
}

.span-subtle-bg-colour{
  background-color: var(--custom-grey-subtle);
  border-radius: 0.5rem;
}


.div-notification-colour{
  background-color: var(--custom-light-green);
}

.scrollme {
    overflow-x: auto;
    overflow-y: auto;
}

.scrolldiv {
  overflow-y: auto;
  height: auto;
}

html {
  position: relative;
  font-size: 0.75rem;
}




@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}


.border-dark-subtle-divider {
  border-color: #f50000;
}


h1, h2, h3, h4, h5 , h6 {
  font-family: 'Inter', sans-serif !important;


}

.accordion-item, .accordion-button  {
  border-radius: 1rem !important;
}

#h-card {
  padding: 0px !important;
  margin: 0px !important;
  line-height: 100% !important; 
}

#span-logo-text-bold {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

#span-logo-text-light {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}


body {
  background-color: var(--custom-background-light);

  font-family: 'Heebo', sans-serif !important;

  width: auto !important;
  overflow-x: hidden !important;

}

.accordion-button {
  transition: font-weight 0.2s ease-in-out;
}

.accordion-button:focus{
  outline: 0  !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
  background-color: #fff;
  color: #000000;
}

.accordion-button:not(.collapsed){
  outline: 0 !important;
  background-color: #fff;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
  color: #000000;
  font-weight: 500; /
}

#div_id_start_date{
  margin-bottom: 0 !important;
}

#div_id_end_date{
  margin-bottom: 0 !important;
}


.form-control {
  border-color: #9a9fa3;
  line-height: 25px !important;
  margin-bottom: 0;
}

.form-select{
  border-color: #9a9fa3;
  line-height: 25px !important;
}

.form-control:focus{
  border-color: #9a9fa3;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(129, 133, 130, 0.25);
  outline: -webkit-focus-ring-color auto 0px;
}

.form-check-input:checked {
  border: none ;
  background-color: rgba(var(--bs-success-rgb)) !important;
}

.form-check-input:checked:focus {
  border: none ;
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem  rgba(var(--bs-success-rgb))
}
.form-check-input:focus {
  border: none ;
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #c2c5c2
}
.form-check-input:active {
  border: none ;
  background-color: #C8FFC8; 
}


.form-select:focus{
  border-color: #9a9fa3;
  box-shadow:#ffffff;
  outline: none;
  box-shadow: none;
}

#back-arrow{
  color:#000000;
  font-size: 30px; 
}

#back-div:hover{
  background-color: #ffffff;
  height:100% !important; 
  min-height:100% !important; 
  display: inline-block;
}


.grid-stack-item:hover{
  background-color: #f9f9f9;
}


.container {
  max-width: 80%;
}

.pricing-header {
  max-width: 700px;
}


#base-body-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1021;
  
}

#body-header {
  position: -webkit-sticky;
  background-color: rgb(255, 255, 255);
  position: sticky;
  top: 0px;
  z-index: 1020;
  
}

#secondary-header {
  position: -webkit-sticky;
  background-color: rgb(255, 255, 255);
  position: sticky;
  top: 90px;
  z-index: 1020;
  
}


.card-header{
    /* fallback for old browsers */
    background: none;
    border: none;

}

.footer-menu .nav-pills  .nav-link:not(.active) {
  background-color: rgb(255, 255, 255);
  color: #000000;
}


div#app-menu .nav-pills .nav-item a#app-menu-nav.active{
  background: #ffffff;
  color: #000000;
  font-weight: bold;
}

div#app-menu .nav-pills .nav-item a#app-menu-nav:hover{
  background: #ffffff;
  color: #000000;
  font-weight: bold;
  animation: ease-in-out;
}



div#app-menu ul.nav-pills li.nav-item a#app-menu-nav{
  border-radius: 0.5rem;
  background: #ffffff;
  color: #5a5a5a;
  margin-right: 0.25rem;
  padding-top: 0.40rem;
  padding-bottom: 0.40rem;
  padding-left: 0.0rem;
  padding-right: 0.5rem;  
  font-size: 1.1rem;
}



#card-stick {
  position: -webkit-sticky !important;
  position: sticky !important;
  
  top: 500px !important;
  z-index: 1019 !important;
}

#company_header{
  position: -webkit-sticky !important;
  background-color: var(--custom-background-light);
  position: sticky !important;
  top: 97px !important;
  z-index: 1020;
}

#card-stick-group {
  border-radius: 7px;
  border: #ffffff;
  
}

#circle-btn { 
  width: 30px !important; 
  height: 30px !important; 
  border-radius: 50% !important; 
  font-size: 16px !important; 
  align-items : center !important;
  
} 

#circle-btn:hover { 
  width: 30px !important; 
  height: 30px !important; 
  border-radius: 50% !important; 
  font-size: 16px !important; 
  text-align: center !important; 
  color: white !important;
  transition: 0.3s;
} 

.card {
  border-radius: 0.5em;
}


#cardhead{
  border-top-right-radius: 1em solid #ffffff;
  border-top-left-radius: 1em solid #ffffff;
  border-top: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
  line-height: 100% !important; 
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 1em !important;
  z-index: 1019 !important;
  background:  #ffffff;
  border-radius: 1em;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

#clickable-h4:hover{
  color: rgba(var(--bs-dark-rgb)) !important ;
  transition: 0.3s;
}

.footer {
  position: absolute;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: #000000;
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-link:hover {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: rgba(var(--bs-dark-rgb));
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.active>.page-link, .page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: rgba(var(--bs-dark-rgb));
  border-color: rgba(var(--bs-dark-rgb));
  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), .25)
}




/* The side navigation menu */
.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

#fixed-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 89px !important; /* find a way to calculate this value */
  z-index: 1019 !important;
}



/* Active/current link */
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}



/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

.navbar-right a ul li a {
  text-align: right;
}

.link-unstyled {
  &,
  &:visited,
  &:hover,
  &:active,
  &:focus,
  &:active:hover {
    font-style: inherit;
    color: inherit;
    background-color: transparent;
    font-size: inherit;
    text-decoration: none;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: inherit;
    border-radius: inherit;
    border: inherit;
    outline: inherit;
    box-shadow: inherit;
    padding: inherit;
    vertical-align: inherit;
  }
}

.table-row{
  cursor:pointer;
  }



.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 36px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

  /* Datatables */

 
/*
 * Table styles
 */
/**
 * Remove focus styles for non-keyboard focus.
 */
 :focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/**
 * Cross-browser styles for explicit focus via 
 * keyboard-based (eg Tab) navigation or the
 * .focus-visible utility class.
 */
:focus,
.focus-visible:focus:not(:focus-visible) {
  outline: 0;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069;
}

 /* Sidebar */

#dropdown-menu ul{
  list-style: none;
  padding: 0;
}


#list-group-finance .list-group-item {
  font-size: 1.15rem;
}

@media screen and (min-width:993px) {
   #dropdown-menu:hover{
    display: flex;
  }

  #dropdown-menu.show{
    display: flex;
  }
  
}



.footer-menu  li a.active,
.footer-menu  li a:hover{
  background-color: rgba(126, 126, 126, 0.2) !important;
  color: rgb(226, 224, 224)!important;
  font-weight: 500;

}

.footer-menu  li a{
  background-color: var(--bs-dark-rgb)!important;
  color: rgb(255, 253, 253)!important;
}


ul.commercial  li a.active,
ul.commercial  li a:hover{
  background-color: rgb(0, 0, 0)!important;
  color: rgb(255, 255, 255)!important;
}




ul.commercial  li a{
  background-color: var(--bs-dark-rgb)!important;
  color: rgb(0, 0, 0)!important;
}


ul#pills-tab  li button{
  background-color: var(--bs-dark-rgb)!important;
  color: rgb(0, 0, 0)!important;
}

ul#pills-tab  li button.active{
  background-color: rgb(0, 0, 0)!important;
  color: rgb(255, 255, 255)!important;
}


option:hover{
  background-color: rgb(0, 0, 0) inset !important;
  color: rgb(255, 255, 255)!important;
}


/* #dropdown-menu ul li a:not(:disabled):active{
  background-color: var(--bs-dark-rgb)!important;
} */

#collapseMenuWidth{
  -webkit-transition: width 0.2s ease !important;
  -moz-transition: width 0.2s ease !important;
  -o-transition: width 0.2s ease !important;
  transition: width 0.2s ease !important;
  
  display: inline-block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  line-height: 100% !important;
  height: 2.5em  !important;

  width: 0px !important;
}

#collapseMenuWidth.in{

  width: 100% !important;

}

#footer-div{
  display: inline-flex;
  flex-direction: row;
}

#footer-div div{
  float:left;
}



@keyframes textShine {
  0% {
      background-position: 0% 50%;
  }
  100% {
      background-position: 100% 50%;
  }
}

#card-grad {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: card-gradient 15s ease infinite;
	height: 100vh;
}

@keyframes card-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.card-img-top{
  object-fit: cover;
  height: 95vh;
}

#member_hotels_div{
  transition: transform 0.5s;
  font-weight: 300;
  font-size: 1.6rem;
}

#member_hotels_div:hover{
  transform: scale(1.05);
  animation: ease-in

}


@media (max-width: 768px) {

  #footer_app_text{ 
   display: none
  }

  #member_hotels_div{
    display: none
  }

  #hotel_card{
    display: none
  }

}

#hotel_card{
  border-width: 0;
}

ul.timeline {
  list-style-type: none;
  position: relative;
  padding-left: 1.5rem;
}
ul.timeline:before {
  content: ' ';
  background: #d4d9df;
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 100%;
  z-index: 400;
}

ul.timeline > li:before {
  content: ' ';
  background: rgb(35, 35, 35);
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #1d1d1d;
  left: 0.8rem;
  width: 1.5rem;
  height: 1.5rem;
  z-index: 400;
}

#overview_sidebar{
  height: 100vh;
}

/* First item (no border at all) */
.nav-tabs .nav-item:first-child .nav-link {
  border: none !important;
  background-color: transparent;
  color: inherit;
  font-weight: 400;
}


/* First item (no border at all) */
.nav-tabs .nav-item:first-child .nav-link:hover {
  font-weight: 600;
}

/* All other nav links */
.nav-tabs .nav-item:not(:first-child) .nav-link {
  border: 1.5px solid #dee2e6;  /* give all others borders */
  background-color: transparent;
  color: inherit;
  
}

/* Hover, focus, and active for all except first */
.nav-tabs .nav-item:not(:first-child) .nav-link:hover,
.nav-tabs .nav-item:not(:first-child) .nav-link.active {
  background-color: #fff !important;
  color: #000 !important;
  border: 1.5px solid #dee2e6;
  font-weight: 600;
}




/* Card + horizontal scroll */
.table-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow-x:auto;            /* ⬅ horizontal scroll when needed */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

/* Column sizing (tweak these to taste) */
#table-finance{ 
  --fin-col-sticky: 120px;    /* narrower first column */
  --fin-col-month:  100px;    /* all months equal width */
  --fin-col-total:  120px; 
}
.fin-table{ 
  table-layout:fixed;         /* ensure equal column widths apply */
  border-collapse:separate;
  border-spacing:0;
  width:max-content;          /* grows beyond container to allow scroll */
}

/* Apply widths via colgroup */
.fin-table col.col-sticky{ width:var(--fin-col-sticky); }
.fin-table col.col-month{  width:var(--fin-col-month); }
.fin-table col.col-total{  width:var(--fin-col-total); }

/* Header look */
.fin-table thead th{
  background:#f8fafc;
  color:#344054;
  font-weight:600;
  padding:.6rem .5rem;
  vertical-align:bottom;
  border-bottom:1px solid #e5e7eb;
  white-space:nowrap;
}

/* Body cells */
.fin-table tbody th,
.fin-table tbody td{
  border-top:1px solid #f1f5f9;
  padding:.5rem .5rem;
  white-space:nowrap;
}
.fin-table tbody tr:hover td,
.fin-table tbody tr:hover th{
  background:#fcfcfd;
}

/* Numeric alignment with tabular figures */
.fin-table .cell-num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Dashed separators between month blocks and before Total */
.fin-table .split-left{
  border-left:1px solid #e5e7eb;
}

/* Sticky first column (narrow) */
.fin-table .sticky-col{
  position:sticky;
  left:0;
  z-index:1;
  width:var(--fin-col-sticky);
  min-width:var(--fin-col-sticky);
  border-right:1px solid #f1f5f9;
}

.fin-table .sticky-col thead th{
  background:#f8fafc;
  color:#344054;
  font-weight:600;
  padding:.6rem .5rem;
  vertical-align:bottom;
  border-bottom:1px solid #e5e7eb;
  white-space:nowrap;
}

/* Optional rounded header corners */
.fin-table thead tr:first-child th:first-child{ border-top-left-radius:12px; }
.fin-table thead tr:first-child th:last-child{  border-top-right-radius:12px; }

/* small left indent for subtotals */
.fin-table .indent-1 {
  padding-left: 1.5rem;
  font-weight: 400;
}

.form-control {
  border: none;          
  background-color: #f8f9fa;            /* Remove all borders */
  border: 1px solid #ccc;    /* Add a default thin line */
  border-radius: 0.7rem;                 /* Optional: square corners */
}

.form-control:focus {
  outline: none;
  box-shadow: none;
  border: 0.134rem solid rgb(45, 44, 44);   /* Black line on focus */
}

select.form-select {
  border: none;          
  background-color: #f8f9fa;            /* Remove all borders */
  border: 1px solid #ccc;    /* Add a default thin line */
  border-radius: 0.7rem;  
}

select.form-select:focus {
  outline: none;
  box-shadow: none;
  border: 0.134rem solid rgb(45, 44, 44); 
}


/* Base Select2 container (single selection) */
.select2-container .select2-selection--single {
  border: 1px solid #ccc !important;           /* thin gray border */
  border-radius: 0.7rem !important;            /* same rounded corners */
  background-color: #f8f9fa !important;      /* subtle gray background */

}

/* On focus (when the dropdown is open) */
.select2-container--default.select2-container--open .select2-selection--single {
  background-color: #fff !important;                /* white on focus */
  border: 0.134rem solid rgb(45, 44, 44) !important; /* black border */
  outline: none !important;
  box-shadow: none !important;
}

/* Remove default focus ring */
.select2-container--default .select2-selection--single:focus {
  outline: none;
  box-shadow: none;
}

/* Placeholder & text styling */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #495057;
  line-height: normal;
}

/* Dropdown options list */
.select2-container--default .select2-results > .select2-results__options {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
}


.select2-container--default.select2-container--open .select2-selection--single {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: none !important;
}

.select2-container--default .select2-dropdown {
  margin-top: -1px !important;   /* pulls it up to connect */
  border: 0.134rem solid rgb(45, 44, 44) !important; /* same as focus border */
  border-top: none !important;   /* remove duplicate top border */
  border-bottom-left-radius: 0.7rem !important;
  border-bottom-right-radius: 0.7rem !important;
}

/* Style the search input inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: none !important;                /* remove full border */
  border-bottom: 1px solid #ccc !important; /* subtle underline */
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.25rem 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
}

/* Focus state = darker underline */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-bottom: 0.12rem solid rgb(196, 196, 196) !important; /* black underline */
}


/* Options list should have no border */
.select2-container--default .select2-results > .select2-results__options {
  border: none !important;
  background: transparent !important;
  padding: 0.25rem 0.25rem; /* optional spacing */
}

/* Normal option */
.select2-container--default .select2-results__option {
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;   /* so hover looks pill/rounded */
  margin: 0.125rem 0;      /* small gap between options */
}

/* Hovered (highlighted) option */
.select2-container--default .select2-results__option--highlighted {
  background-color: #f0f0f0 !important;  /* subtle gray */
  color: #000 !important;
  border-radius: 0.4rem;                 /* rounded corners */
}

/* ✅ Selected option: always black with white text */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 0.4rem;
}

/* ✅ Any hovered OR highlighted (non-selected) option = subtle gray */
.select2-container--default 
  .select2-results__option--highlighted:not(.select2-results__option--selected),
.select2-container--default 
  .select2-results__option:not(.select2-results__option--selected):hover {
  background-color: #f0f0f0 !important;
  color: #000 !important;
  border-radius: 0.4rem;
}


/* === Header Omnibox (scoped to avoid global overrides) =================== */

/* One rounded control: wrapper owns border/radius */
#header-omnibox .omnibox-input{
  background:#2a2d33;
  border:1px solid #616161;          /* <- single source of truth */
  border-radius:0.7rem;
  overflow:hidden;
}

/* When results are visible, connect as one piece */
#header-omnibox.show-results .omnibox-input{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom:none;                /* results take over */
}

/* Remove child borders so wrapper border is the only one */
#header-omnibox .omnibox-input .input-group-text,
#header-omnibox .omnibox-input .form-control{
  border:0 !important;
  box-shadow:none !important;
  background:transparent;
}

/* Icon + input */
#header-omnibox .omnibox-input .input-group-text{
  color:#a7aab0;
  min-width:2.5rem; display:flex; align-items:center; justify-content:center;
}
#header-omnibox .omnibox-input .form-control{
  color:#e8e8ea !important;
  padding-right:3rem; height:2.5rem; line-height:2.5rem;
}
#header-omnibox .omnibox-input .form-control::placeholder{ color:#9aa0a6; }

/* No special focus border */


/* ⌘K chip */
#header-omnibox .kbd-hint{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  font-size:.95rem; color:#a7aab0;
  border:1px solid rgba(255,255,255,.18);
  padding:.1rem .4rem; border-radius:.4rem;
  background:rgba(255,255,255,.06);
  pointer-events:none;
}


/* --- Results: seamlessly attached to input --- */
#header-omnibox .omnibox-results{
  position:absolute; left:0; right:0; top:100%; /* no extra gap! */
  background:#2a2d33; color:#e8e8ea;
  border:1px solid #616161;        /* same as input */
  border-top:none;                 /* no double line between input/results */
  border-bottom-left-radius:.7rem;
  border-bottom-right-radius:.7rem;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  max-height:60vh; overflow:auto; padding:.25rem .5rem .5rem;
  z-index:3000;
}

/* Items */
#header-omnibox .omnibox-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .75rem; margin:.15rem 0; border-radius:10px;
  color:#fff !important; text-decoration:none; background:transparent;
}
#header-omnibox .omnibox-item:hover,
#header-omnibox .omnibox-item.is-active{ background:rgba(255,255,255,.08); }
#header-omnibox .omnibox-left{
  width:28px; height:28px; border-radius:0.5rem;
  background:#24272c; color:#a7aab0; display:grid; place-items:center; flex:0 0 28px;
}
#header-omnibox .omnibox-main{ font-weight:600; }
#header-omnibox .omnibox-sub{ font-size:.9rem; color:#a7aab0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Section headers */
#header-omnibox .omnibox-title{
  font-size:.95rem; text-transform:uppercase; letter-spacing:.06em;
  color:#c9ccd2; padding:.6rem .75rem .3rem; font-weight:700;
}
#header-omnibox .omnibox-divider{ height:1px; background:rgba(255,255,255,.08); margin:.25rem 0; }

/* Footer inside results (sticky bottom) */
#header-omnibox .omnibox-footer{
  position:sticky; bottom:0;
  display:flex; align-items:center; gap:1rem;
  padding:.5rem .75rem; margin-top:.25rem;
  background:#2a2d33; color:#a7aab0;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom-left-radius:.7rem; border-bottom-right-radius:.7rem;
}

/* Key chips unified */
#header-omnibox .k{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.6rem; padding:.1rem .4rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.4rem; background:rgba(255,255,255,.06);
  color:#cfd3d8; font-size:.95rem; font-weight:500; line-height:1.2; user-select:none;
}
#header-omnibox .k + .k{ margin-left:.25rem; }
#header-omnibox .omnibox-footer .hint{ display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; }

/* Scrollbar */
#header-omnibox .omnibox-results::-webkit-scrollbar{height:8px;width:8px}
#header-omnibox .omnibox-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:8px}

#header-omnibox .omnibox-results .text-muted,
#header-omnibox .omnibox-results .text-danger,
#header-omnibox .omnibox-results .message {
  color: #e8e8ea !important;        /* same as normal text */
  text-align: center;
  padding: .75rem;
}