/* 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 {
  --app-header-h: 0px; /* JS overwrites */
  
  --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;

}


.toggle-arrow {
  transition: transform 0.2s ease;
}

a[aria-expanded="true"] .toggle-arrow {
  transform: rotate(90deg);
}

.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.20em 0.35em;   /* 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;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  letter-spacing: .03em; 
}


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

/* 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 */
  border: 1px solid currentColor; 
}

.custom-badge-danger {
  background-color: oklch(76.017% 0.14324 19.918); /* pale red */
  color: oklch(17.671% 0.06841 25.755);            /* dark red */
  border: 1px solid currentColor; 
}

.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 */
  border: 1px solid currentColor; 
}

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

.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(14, 255, 74, 0.25);
  outline: -webkit-focus-ring-color auto 0px;
}

/* rgba(129, 133, 130, 0.25); */

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



#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%;
    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;
}

/* Select2 multi-select: match form-control sizing */
.select2-container .select2-selection--multiple {
  min-height: 36px !important;
  border: 1px solid #ccc !important;
  border-radius: 0.7rem !important;
  background-color: #f8f9fa !important;
  padding: 0.2rem 0.45rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 0 !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  border-radius: 0.5rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 0.2rem !important;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
  margin-top: 0 !important;
  height: 24px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 0.134rem solid rgb(45, 44, 44) !important;
  box-shadow: none !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,
select.form-select {
  border: 1px solid #ccc;
  border-radius: 0.7rem;
  background-color: #f8f9fa;
  outline: 0; /* default */
}

.form-control:focus,
select.form-select:focus {
  border-color: rgb(45, 44, 44);         /* keep border width same */
  outline: 1.5px solid rgb(45, 44, 44);    /* "expands" visually */
  outline-offset: 0;                     /* or try 1-2px */
  box-shadow: none;
}

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: 1.5px solid rgb(45, 44, 44); 
}

/* Chrome / Edge / Safari */
.form-control[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  cursor: pointer;
}

.form-control[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}


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

/* Multi-select open state */
.select2-container--default.select2-container--open .select2-selection--multiple {
  background-color: #fff !important;
  border: 0.134rem solid rgb(45, 44, 44) !important;
  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-container--open .select2-selection--multiple {
  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;
}

.table.table-bordered { border: 0; }

.revb-shell {
  /* If you have a sticky base header, subtract it here, e.g.: calc(100vh - 90px) */
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: row;
}

/* Sidebar/Main must be flex columns and allowed to shrink */
.revb-sidebar,
.revb-main {
  display: flex;
  flex-direction: column;
  min-height: 0; /* <-- absolutely required so children can scroll */
}

/* Only the Columns section inside the sidebar should scroll */
.revb-columns {
  flex: 1 1 auto;
  min-height: 0;  /* <-- let it shrink */
  overflow: auto; /* <-- scroll only this block */
}

/* The main table area scrolls, header stays fixed inside main */
.revb-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* If any element accidentally carries your global .sidebar class, neutralize it here on this page */
.revb-shell .sidebar {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
}


  /* Left nav list (tabs) */
  .settings-side .nav-link{
    border-radius: 0.75rem;
    padding: 0.55rem 0.75rem;
    color: #111827;
  }
  .settings-side .nav-link:not(.active):hover{
    background: #f3f4f6;
  }
  .settings-side .nav-link.active{
    background: #111827 !important;
    color: #ffffff !important;
  }

/* Home Sales */

    .page-wrap { max-width: 1100px; }
    .muted { color: rgba(33,37,41,.65); }

    /* Cards */
    .kpi-card {
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
      transition: transform .08s ease, box-shadow .08s ease;
      background: #fff;
      min-height: 110px;
    }
    .kpi-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,.08);
    }
    .kpi-value { font-size: 2rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }

    /* Tabs */
    .top-tabs .nav-link { color: rgba(33,37,41,.7); }
    .top-tabs .nav-link.active {
      color: #111;
      font-weight: 600;
      border-bottom: 2px solid #0d6efd !important;
    }

    /* Recently viewed scroller */
    .rv-wrap {
      border: 1px solid rgba(0,0,0,.08);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .rv-item { min-width: 160px; }
    .avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(13,110,253,.12);
      color: #0d6efd;
      font-weight: 700;
      border: 1px solid rgba(13,110,253,.18);
      user-select: none;
    }
    .avatar.gray {
      background: rgba(33,37,41,.08);
      color: rgba(33,37,41,.65);
      border-color: rgba(0,0,0,.08);
    }

    /* Floating help button (optional) */
    .help-fab {
      position: fixed;
      left: 18px;
      bottom: 18px;
      border-radius: 999px;
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
      z-index: 1030;
    }


/* Subtle text selection highlight */
::selection {
  background: rgba(39, 233, 188, 0.2); /* tweak 0.15–0.35 */
  color: inherit;
}

::-moz-selection {
  background: rgba(39, 233, 188, 0.20);
  color: inherit;
}


/* ===== Flatpickr: match Bootstrap-ish form styling ===== */
/* ===== Flatpickr: match Bootstrap-ish form styling ===== */

.flatpickr-calendar,
.flatpickr-calendar.open {
  background: #f8f9fa !important;
  border: 1px solid #ccc !important;
  border-radius: 0.7rem !important;
  box-shadow: none !important;
  overflow: hidden !important; /* keeps rounded corners clean */
}

/* Optional: stronger "focus" feel when calendar is open (note: outline is square by nature) */
.flatpickr-calendar.open {
  outline: 2px solid rgb(45, 44, 44);
  outline-offset: 0;
}

/* Header layout: month/year left, arrows right */
.flatpickr-months {
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 0.85rem !important;
  border-bottom: 1px solid #e6e6e6 !important;
  overflow: visible !important;
}

/* Fix clipped borders in header: Flatpickr sets fixed height here */
.flatpickr-months .flatpickr-month {
  height: auto !important;
  min-height: 3.4rem !important; /* room for bigger controls */
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

/* Re-order so prev + next are both on the right */
.flatpickr-months > .flatpickr-month { order: 1; flex: 1; }
.flatpickr-months > .flatpickr-prev-month { order: 2; margin-left: auto !important; }
.flatpickr-months > .flatpickr-next-month { order: 3; margin-left: 0.35rem !important; }

/* Remove absolute positioning so ordering works */
.flatpickr-prev-month,
.flatpickr-next-month {
  position: static !important;
  top: auto !important;
  transform: none !important;
  padding: 0.25rem 0.35rem !important;
  border-radius: 0.5rem !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Force arrow icons to stay black on hover */
.flatpickr-prev-month svg,
.flatpickr-next-month svg,
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg,
.flatpickr-prev-month:hover svg *,
.flatpickr-next-month:hover svg * {
  fill: rgb(45, 44, 44) !important;
  stroke: rgb(45, 44, 44) !important;
}

/* Month/year container alignment */
.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.8rem !important;
  padding: 0 !important;
  left: 0 !important;
  width: auto !important;
  position: static !important;
  line-height: normal !important;
}

/* Month dropdown + year input styled like your controls */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper input {
  background: #f8f9fa !important;
  border: 0.5px solid #ccc !important;
  border-radius: 0.7rem !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  padding: 0.4rem 0.7rem !important;
  height: 2.5rem !important;
  box-sizing: border-box !important;
}

/* Make the month dropdown feel more like Bootstrap select */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none !important;
  padding-right: 1.8rem !important;
  background-repeat: no-repeat !important;
  background-position: right 0.55rem center !important;
  background-size: 0.9rem 0.9rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* --- Year hover/focus sharp-corner fixes (Chromium/Opera) --- */

/* Treat the year field like a text field to avoid native number hover styling */
.flatpickr-current-month input.cur-year {
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
}

/* Remove Flatpickr's own year step arrows */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}

/* Remove browser number spinners (Opera/Chrome/Edge) — year only */
.flatpickr-current-month input.cur-year::-webkit-outer-spin-button,
.flatpickr-current-month input.cur-year::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Firefox — year only */
.flatpickr-current-month input.cur-year {
  -moz-appearance: textfield !important;
}

/* Clip any inner artifacts and keep corners rounded */
.flatpickr-current-month .numInputWrapper {
  padding-right: 0 !important;
  border-radius: 0.7rem !important;
  overflow: hidden !important;
}

/* Keep year control rounded in all states */
.flatpickr-current-month input.cur-year,
.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month input.cur-year:focus,
.flatpickr-current-month input.cur-year:focus-visible,
.flatpickr-current-month .numInputWrapper:hover input.cur-year {
  border-radius: 0.7rem !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Use a rounded focus ring (box-shadow) instead of outline (outline is square) */
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible,
.flatpickr-current-month .numInputWrapper input:focus,
.flatpickr-current-month .numInputWrapper input:focus-visible {
  box-shadow: none !important;                 /* removes the “thicker” ring */
  border: 0.5px solid rgb(45, 44, 44) !important; /* thin, like the year */
  outline: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  box-shadow: none !important;
  border: 0.5px solid rgb(45, 44, 44) !important;
}

/* Weekday row */
.flatpickr-weekdays {
  background: transparent !important;
  padding: 0.35rem 0.6rem 0.1rem !important;
}

/* Day cells: rounded corners (not circles) */
.flatpickr-day {
  border-radius: 0.5rem !important;
  margin: 0.12rem !important;
}

/* Selected day: black highlight */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
  background: rgb(45, 44, 44) !important;
  border-color: rgb(45, 44, 44) !important;
  color: #fff !important;
}

/* Hover */
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(45, 44, 44, 0.12) !important;
  border-color: transparent !important;
}

/* Today indicator (subtle) */
.flatpickr-day.today {
  border-color: rgba(45, 44, 44, 0.35) !important;
}

  a.link-dark {
    text-decoration: none;
  }

  a.link-dark:hover,
  a.link-dark:focus {
    text-decoration: underline;
  }


  td.booking-total:hover {
    background: rgba(0,0,0,.04);
    border-radius: .375rem;
  }

  td.booking-status .custom-badge { transition: filter .12s ease; }
  td.booking-status:hover .custom-badge { filter: brightness(0.92); }
  
    /* makes truncation predictable without widening columns */
  table.tight-table { width: 100%; }
  .tight-table td { padding-top: .55rem; padding-bottom: .55rem; }
  /* keep this column from expanding too much */

  td.ta-cell .primary-line,
  td.ta-cell .secondary-line {
    display: block;
    white-space: nowrap;
    line-height: 1.15;
  }

 td.ta-cell .secondary-line {
    margin-top: 0.55rem;
    display: block;
    white-space: nowrap;
    line-height: 1.15;
  }

td.date-cell .date-row{
  display: grid;
  grid-template-columns: 70px 1fr; /* adjust width as you like */
  align-items: baseline;
  white-space: nowrap;
  line-height: 1.15;
}

td.date-cell .secondary-line{
  margin-top: .55rem;
}

td.date-cell .date-label{
  overflow: hidden;
  text-overflow: ellipsis;
}

td.date-cell .date-value{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep row hook */
.reservation-row { position: relative; }

.cn-fade { position: relative; display: inline-block; }
.cn-empty { opacity: 0; user-select: none; }

.cn-hover{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity .05s ease;
  white-space: nowrap;
  color: inherit;              /* same as link */
  text-decoration: inherit;    /* inherits underline when the <a> is hovered */
}

/* ensure the overlay text underlines too */
a.link-dark:hover .cn-hover,
a.link-dark:focus .cn-hover {
  text-decoration: underline;
}


.reservation-row:hover .cn-hover,
.reservation-row:focus-within .cn-hover { opacity: 1; }


.comment-indicator{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .85rem;
  line-height: 1;
}

.comment-indicator .comment-count{
  font-size: .8rem;
}

.popover { pointer-events: auto; }

.agent-trigger:hover { text-decoration: underline; }


  .row-toggle i {
    display: inline-block;
    transition: transform .15s ease;
  }
  .row-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
  }



    /* New expanded panel styling */
  #reservations-tbody .details-wrap{
    background: var(--bs-body-bg);
    border-top: 1px solid rgba(0,0,0,.06);
    border-radius: .75rem;
    padding: .75rem;
  }

  #reservations-tbody .details-head{
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .75rem;
    padding: .75rem .9rem;
  }

  #reservations-tbody .details-title{
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.2;
  }

  #reservations-tbody .details-kpis{
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
  }
  #reservations-tbody .details-kpi{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .75rem;
    padding: .55rem .75rem;
    min-width: 180px;
    background: #fff;
  }
  #reservations-tbody .details-kpi .k{
    font-size: 1rem;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
  }
  #reservations-tbody .details-kpi .v{
    font-weight: 600;
  }

  #reservations-tbody .details-card{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .75rem;
    overflow: hidden;
  }
  #reservations-tbody .details-card-header{
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-weight: 600;
    padding: .6rem .85rem;
  }
  #reservations-tbody .details-card .card-body{
    padding: .8rem .85rem;
  }

  /* Key-value pairs grid inside cards */
  #reservations-tbody .details-pairs{
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    row-gap: .45rem;
    column-gap: .75rem;
    align-items: start;
  }
  #reservations-tbody .details-pairs .k{
    font-size: 1rem !important;
    color: var(--bs-secondary-color);
  }
  #reservations-tbody .details-pairs .v{
    min-width: 0;
  }

  /* Wrap long content (prevents table width recalcs / shifting) */
  #reservations-tbody .details-wraptext{
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  #reservations-tbody .details-comments{
    display: grid;
    gap: .75rem;
  }
  #reservations-tbody .details-comment-meta{
    font-size: .82rem;
    margin-bottom: .15rem;
  }

/* Remove any spacing around bootstrap icons */


/* Chevron rotate */
.row-toggle i{
  display: inline-block;
  transition: transform .15s ease;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.row-toggle[aria-expanded="true"] i{
  transform: rotate(180deg);
}

.thead-subtle th{
  background: var(--bs-dark);
  color: #fff;
  font-weight: 500;          /* less heavy (try 400–500) */
  letter-spacing: .03em;     /* optional: helps readability */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}


.fw-semibold{
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
  letter-spacing: .03em !important; 
}

.table-hover thead.thead-subtle th{
  background: #000;
  color: #fff;
}

    thead.thead-subtle th:first-child { border-top-left-radius: .75rem; }
  thead.thead-subtle th:last-child  { border-top-right-radius: .75rem; }

  .table-shell{
  border: 1px solid rgb(243, 245, 247);
  border-radius: .75rem;
  overflow: hidden; /* clips thead radius + keeps border clean */
  background: #fff;
  max-height: 65vh;      /* adjust as you like */
  overflow-y: auto;
}

.table-shell thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-shell{
  -ms-overflow-style: none;  /* IE/old Edge */
  scrollbar-width: none;     /* Firefox */
}

.table-shell::-webkit-scrollbar{
  display: none;             /* Chrome/Safari */
}

.table-shell{
  position: relative;
}

.table-shell::after{
  content:"";
  position: sticky;
  bottom: 0;
  display: block;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.toggle-col{ width: 44px; }
.toggle-td{ width: 44px; text-align: center; }


  .crm-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
  }
  .crm-muted { color: #6b7280; }

  .hist-date {
    color: #6b7280;
    font-weight: 600;
    margin: 1.25rem 0 .5rem;
  }
  .hist-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid #e5e7eb;
  }
  .hist-left {
    width: 260px; /* left column width */
    flex: 0 0 260px;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
  }
  .hist-time {
    width: 52px;
    flex: 0 0 52px;
    color: #6b7280;
    font-size: .875rem;
    padding-top: .25rem;
  }
  .hist-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    margin-top: .1rem;
  }
  .hist-who {
    min-width: 0;
  }
  .hist-name {
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
  }
  .hist-action {
    color: #6b7280;
    font-size: .875rem;
    margin-top: .15rem;
  }
  .hist-right {
    flex: 1 1 auto;
    min-width: 0;
  }
  .change-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .15rem;
  }
  .field-label {
    color: #6b7280;
    font-size: .875rem;
    min-width: 120px;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: .875rem;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .arrow { color: #9ca3af; }

  .file-list {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }
  .file-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    text-decoration: none;
    color: inherit;
  }
  .file-row:last-child { border-bottom: 0; }
  .file-row:hover { background: #f9fafb; }
  .file-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
  }
  .file-main { min-width: 0; flex: 1 1 auto; }
  .file-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .file-meta { color: #6b7280; font-size: .875rem; }

  .proof-day {
    color: #6b7280;
    margin: 1rem 0 .5rem;
    font-size: .9rem;
  }
  .proof-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
  }
  .proof-card{
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    width:250px;
    max-width:100%;
    color:inherit;
    display:block;
    overflow:hidden;
  }

  .proof-top{
    display:flex;
    align-items:center;
    gap:.65rem;
    padding:.7rem .85rem;
  }
  .proof-ico{
    font-size:1.85rem;
    line-height:1;
    color:#111827;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .proof-top-link{
    text-decoration:none;
    color:inherit;
    display:flex;
  }
  .proof-top-link:hover{
    background:#f9fafb;
  }

  .proof-meta{min-width:0; flex:1 1 auto;}
  .proof-name{
    color:#111827;
    font-size:.95rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .proof-sub{color:#6b7280; font-size:.85rem; margin-top:.15rem;}

  .proof-divider{
    border-top:1px solid #e5e7eb;
    margin:0 .85rem;
  }

  .proof-bottom{
    padding:.55rem .85rem .65rem;
    color:#6b7280;
    font-size:.85rem;
  }

  .proof-bottom .btn{
    border-radius: 12px;
  }

  /* --- Editing lock UX --- */
  .lock-banner {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 14px;
    padding: .75rem 1rem;
  }
  .lock-banner .title { font-weight: 700; }
  .lock-banner .sub { color: #92400e; opacity: .9; font-size: .9rem; margin-top: .15rem; }


.card-scroll{
  max-height: 75vh;      /* pick what feels right */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Firefox */
.card-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.22) transparent;
}

/* Chrome/Edge/Safari */
.card-scroll::-webkit-scrollbar{ width: 6px; }
.card-scroll::-webkit-scrollbar-track{ background: transparent; }
.card-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 0;
}
.card-scroll::-webkit-scrollbar-button{
  width: 0; height: 0; display: none;
}

.synxis-btn {
  padding-top: .375rem !important;
  padding-bottom: .375rem !important;
  line-height: 2.0 !important;
}


.fin-grid{
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fin-item{
  border-radius: .75rem;
  padding: .55rem .65rem;
  min-width: 0;
}

.fin-k{
  font-size: 1rem;
  color: var(--bs-secondary-color);
  margin-bottom: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-v{
  font-weight: 650;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Responsive: collapse columns on smaller screens */
@media (max-width: 992px){
  .fin-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  .fin-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Default: stronger red text (and icon) */
.signout-link{
  color: #e13430 !important;                 /* deeper red */
  background: transparent !important;
}
.signout-link .bi{ color: inherit !important; }

/* Hover/focus: pastel red background + same strong red text */
.signout-link:hover,
.signout-link:focus{
  background: #fdefef !important;  /* pastel tint */
  color: #e13430 !important;
}

/* Optional: keep it “pill clean” */
.signout-link{
  border-radius: .75rem;
}
.signout-link:focus{
  box-shadow: none !important;
  outline: none !important;
}