/* allow our absolutely-positioned tooltip to escape the dropdown's clipping */
.custom-navbar .dropdown-menu {
  overflow: visible;
}

/* base positioning on the span */
.menu-item {
  position: relative;
  display: inline-block;
}

/* the tooltip box */
.menu-item:hover::after {
  content: attr(data-full);
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);   /* gap from the menu item */
  transform: translateY(-50%);
  
  background-color: #fff;
  color: #212529;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
  
  font-size: 0.875rem;
  white-space: normal;
  max-width: 200px;
  
  z-index: 1060;            /* above Bootstrap’s dropdown */
  pointer-events: none;
}

/* the little arrow */
.menu-item:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  transform: translateY(-50%) rotate(45deg);
  
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  
  z-index: 1060;
  pointer-events: none;
}

/* Target only the tooltips you’ve created: give them className="light-menu-tooltip" */
.light-menu-tooltip .tooltip-inner {
  background-color: #fff !important;
  color: #212529 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: .25rem !important;
  padding: .5rem .75rem !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !important;
  max-width: 200px !important;
  white-space: normal !important;
}

.light-menu-tooltip .arrow::before {
  border-right-color: rgba(0,0,0,0.15) !important;
}

.light-menu-tooltip .arrow::after {
  border-right-color: #fff !important;
}



/* Root wrapper must have .pattern-stack */
.pattern-stack {
  position: relative; /* for absolute children if you switch to absolute */
  margin:0;
  padding:0;
}

/* Two fixed 200px-high blocks, stacked flush, loaded via CSS */
.pattern-stack::before,
.pattern-stack::after {
  content: "";
  position: absolute;      /* sticks to viewport; use absolute if you want them to scroll */             /* change to right:0 for right side */
  width: 500px;
  bottom: 0px;
  background-repeat: no-repeat;
  background-size: contain; /* or “cover” if you’d rather fill */
  z-index: -1;          /* behind your content */
}

/* First pattern at the very top */
.pattern-stack::before {
  top: -30px;
  left: -265px !important; 
  background-position: left top;
  background-image: url("/assets/side_pattern_long.png");
}

/* Second pattern exactly 200px below */
.pattern-stack::after {
  top: -30px;
  right: -260px !important; 
  background-position: right top;
  background-image: url("/assets/side_pattern_long.png");
}

/* in custom.css */
ul.custom-bullets li {
  position: relative;
  padding-left: 24px;      /* make room for the icon */
  margin-bottom: 0.5em;
  list-style: none;        /* remove default dot */
}

ul.custom-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;              /* tweak to vertically center */
  display: block;          /* inline-block also works */
  width: 16px;             /* your desired bullet width */
  height: 16px;            /* your desired bullet height */
  background-image: url("/assets/cell_bullet.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* stretch to exactly the width/height above */
}


/* assets/custom.css */
.list-group-flush .list-group-item-action:hover {
  background-color: #c6c7ca !important;
}

/* light grey / white alternating backgrounds */
.zebra-list .list-group-item:nth-child(odd) {
  background-color: #e2e4e6;
}
.zebra-list .list-group-item:nth-child(even) {
  background-color: #ffffff;
}

/* make dropdown items use the same flush‐hover colour */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
  background-color: #c6c7ca !important;
}


.custom-navbar .dropdown-toggle,
.custom-navbar .dropdown-item {
    color: #1a1a1a !important;
}

.custom-navbar .dropdown-item:hover,
.custom-navbar .dropdown-item:focus {
    color: #1a1a1a !important;
}

.zebra-list .list-group-item {
    color: #1a1a1a !important;
}

body,
body * {
    color: #1a1a1a;
}