.annotation-pill {
  display: inline-block !important;
  padding: 0.5rem;
  background-color: #ffbce5 !important; /* post-it yellow */
  color: #000 !important;
  border: 1px solid #000000 !important;
  border-radius: 9px !important;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important;
  transform: rotate(-2deg) !important;
  cursor: pointer;
  width: auto !important;
}

[id^="annotation-cell-"] > .annotation-pill {
  display: inline-block !important;
  padding: 0.5rem !important;
  background-color: #ffbce5 !important; /* post-it yellow */
  color: #000 !important;
  border: 1px solid #000000 !important;
  border-radius: 9px !important;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3) !important;
  transform: rotate(-2deg) !important;
  cursor: pointer !important;
  width: auto !important;
}

/* Force annotation pills to remain post-it yellow, overriding .bg-light or dark theme */
.annotation-pill.badge,
.annotation-pill.badge.bg-light,
[data-bs-theme="dark"] .annotation-pill.badge,
[data-bs-theme="dark"] .annotation-pill.badge.bg-light {
  background-color: #ffbce5 !important;
  border-color: #000000 !important;
  color: #000 !important;
}

/* INFO */
.btn-info {
  background-color: #e156ce !important;
  border-color: #e156ce !important;
}
.btn-info:hover, .btn-info:focus {
  filter: brightness(90%);
}
.bg-info {
  background-color: #e156ce !important;
}
.text-info {
  color: #e156ce !important;
}
.border-info {
  border-color: #e156ce !important;
}
.alert-info {
  background-color: #e156ce !important;
  border-color: #e156ce !important;
  color: #fff !important;
}
.badge.bg-info {
  background-color: #e156ce !important;
}

/* DANGER */
.btn-danger {
  background-color: #c1121f !important;
  border-color: #c1121f !important;
}
.btn-danger:hover, .btn-danger:focus {
  filter: brightness(90%);
}
.bg-danger {
  background-color: #c1121f !important;
}
.text-danger {
  color: #c1121f !important;
}
.border-danger {
  border-color: #c1121f !important;
}
.alert-danger {
  background-color: #c1121f !important;
  border-color: #c1121f !important;
  color: #fff !important;
}
.badge.bg-danger {
  background-color: #c1121f !important;
}

/* SUCCESS */
.btn-success {
  background-color: #6a994e !important;
  border-color: #6a994e !important;
}
.btn-success:hover, .btn-success:focus {
  filter: brightness(90%);
}
.bg-success {
  background-color: #6a994e !important;
}
.text-success {
  color: #6a994e !important;
}
.border-success {
  border-color: #6a994e !important;
}
.alert-success {
  background-color: #6a994e !important;
  border-color: #6a994e !important;
  color: #fff !important;
}
.badge.bg-success {
  background-color: #6a994e !important;
}

/* SECONDARY */
.btn-secondary {
  background-color: #7400b8 !important;
  border-color: #7400b8 !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  filter: brightness(90%);
}
.bg-secondary {
  background-color: #7400b8 !important;
}
.text-secondary {
  color: #7400b8 !important;
}
.border-secondary {
  border-color: #7400b8 !important;
}
.alert-secondary {
  background-color: #7400b8 !important;
  border-color: #7400b8 !important;
  color: #000 !important;
}
.badge.bg-secondary {
  background-color: #7400b8 !important;
  color: #000 !important;
}

/* LIGHT */
.btn-light {
  background-color: #feeafa !important;
  border-color: #feeafa !important;
}
.btn-light:hover, .btn-light:focus {
  filter: brightness(90%);
}
.bg-light {
  background-color: #feeafa !important;
}
.text-light {
  color: #feeafa !important;
}
.border-light {
  border-color: #feeafa !important;
}
.alert-light {
  background-color: #feeafa !important;
  border-color: #feeafa !important;
  color: #000 !important;
}
.badge.bg-light {
  background-color: #feeafa !important;
  color: #000 !important;
}

/* DARK */
.btn-dark {
  background-color: #0e0301 !important;
  border-color: #0e0301 !important;
}
.btn-dark:hover, .btn-dark:focus {
  filter: brightness(110%);
}
.bg-dark {
  background-color: #0e0301 !important;
}
.text-dark {
  color: #0e0301 !important;
}
.border-dark {
  border-color: #0e0301 !important;
}
.alert-dark {
  background-color: #0e0301 !important;
  border-color: #0e0301 !important;
  color: #fff !important;
}
.badge.bg-dark {
  background-color: #0e0301 !important;
}

/* WARNING */
.btn-warning {
  background-color: #fca311 !important;
  border-color: #fca311 !important;
}
.btn-warning:hover, .btn-warning:focus {
  filter: brightness(90%);
}
.bg-warning {
  background-color: #fca311 !important;
}
.text-warning {
  color: #fca311 !important;
}
.border-warning {
  border-color: #fca311 !important;
}
.alert-warning {
  background-color: #fca311 !important;
  border-color: #fca311 !important;
  color: #000 !important;
}
.badge.bg-warning {
  background-color: #fca311 !important;
  color: #000 !important;
}

/* WHITE */
.btn-white {
  background-color: #f5ebe0 !important;
  border-color: #f5ebe0 !important;
}
.btn-white:hover, .btn-white:focus {
  filter: brightness(90%);
}
.bg-white {
  background-color: #f5ebe0 !important;
}
.text-white {
  color: #f5ebe0 !important;
}
.border-white {
  border-color: #f5ebe0 !important;
}
.alert-white {
  background-color: #f5ebe0 !important;
  border-color: #f5ebe0 !important;
  color: #000 !important;
}
.badge.bg-white {
  background-color: #f5ebe0 !important;
  color: #000 !important;
}

/* PRIMARY */
.btn-primary {
  background-color: #4361ee !important;
  border-color: #4361ee !important;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(90%);
}
.bg-primary {
  background-color: #4361ee !important;
}
.text-primary {
  color: #4361ee !important;
}
.border-primary {
  border-color: #4361ee !important;
}
.alert-primary {
  background-color: #4361ee !important;
  border-color: #4361ee !important;
  color: #fff !important;
}
.badge.bg-primary {
  background-color: #4361ee !important;
}

/* FONT FOR ALL H1 */
h1 {
  font-family: 'Honk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 4rem);
}

.row.g-4>.col-md-6>.config-section {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
 
/* ===== Floating Menu Pill & Side Menu ===== */
:root { --og-menu-radius: 25px; }

.menu-pill {
  position: fixed;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 1060;
  background-color: rgba(255, 255, 255, .55);
  color: #000000;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
[data-bs-theme="dark"] .menu-pill {
  background-color: rgba(0, 0, 0, .55);
  color: #f8f9fa;
}
/* .menu-pill:hover {box-shadow: 0 10px 28px rgba(0,0,0,.24); } */
.menu-pill:active { transform: translateY(0); }
.menu-pill .menu-pill-indicator { display: inline-block; transition: transform .22s ease; }
.menu-pill.open .menu-pill-indicator { transform: rotate(180deg); }
.menu-pill #menuPillLabel { font-size: 0.98rem; }
.menu-pill .menu-pill-indicator { font-size: 1rem; }

.menu-overlay {
  position: fixed; inset: 0; background: transparent; z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.menu-overlay.show { opacity: 1; pointer-events: auto; }

.side-menu {
  position: fixed;
  left: 16px;
  top: 30%;
  transform: translateY(-25%) translateX(-12px);
  opacity: 0;
  pointer-events: none;
  z-index: 1050;
  width: min(90vw, 320px);
  max-height: 85vh;
  overflow: auto;
  padding: 16px;
  border-radius: var(--og-menu-radius);
  background-color: rgba(255, 255, 255, .55);
  color: #212529;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  /* box-shadow: 0 8px 32px rgba(0,0,0,.2); */
  transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease, width .22s ease;
}
[data-bs-theme="dark"] .side-menu { background-color: rgba(33,37,41,.55); color: #f8f9fa; }
.side-menu.open { opacity: 1; transform: translateY(-25%) translateX(0); pointer-events: auto; width: 64px; padding-left: 8px; }
.side-menu.open:hover { width: min(90vw, 320px); }
.side-menu .menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.side-menu .menu-title { margin: 0; font-weight: 600; font-size: 1rem; }
.side-menu .menu-close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: inherit; }
.side-menu .menu-section { margin-top: 8px; }
.side-menu a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; transition: background-color .15s ease; }
.side-menu a:hover { background-color: rgba(0,0,0,.06); }
[data-bs-theme="dark"] .side-menu a:hover { background-color: rgba(255,255,255,.08); }

@media (max-width: 576px) {
  .menu-pill {
    top: auto;
    bottom: 16px;
    left: auto;
    right: 12px;
    max-width: calc(100vw - 24px);
  }
  .side-menu {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .side-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    width: 100%;
    padding-left: 16px;
  }
  .side-menu.open .menu-label { opacity: 1; max-width: 200px; }
  body.menu-open { overflow: hidden; }
}

/* Small desktop/tablet landscape: move pill to bottom-right to avoid overlap */
@media (min-width: 577px) and (max-width: 992px) {
  .menu-pill {
    top: auto;
    bottom: 16px;
    left: auto;
    right: 16px;
  }
}

.menu-pill, .side-menu { border: 1px !important; }

/* Emoji + label links */
.side-menu .menu-link { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 12px; text-decoration: none; color: inherit; transition: background-color .15s ease; min-height: 44px; }
.side-menu .menu-emoji { font-size: 1.45rem; line-height: 1; }
.side-menu .menu-label { font-size: 1.06rem; }

/* Align header/footer content with links' left edge */
.side-menu .menu-header,
.side-menu .menu-footer { padding: 0 12px; }
.side-menu .menu-header #legend-popover { display: inline-flex; align-items: center; height: 44px; font-size: 1.2rem; }
.side-menu .menu-footer .form-check { display: inline-flex; align-items: center; gap: 8px; height: 44px; }
.side-menu .menu-footer #themeEmojiLabel { font-size: 1.2rem; }
.side-menu .menu-link:hover { background-color: rgba(0,0,0,.06); }
[data-bs-theme="dark"] .side-menu .menu-link:hover { background-color: rgba(255,255,255,.08); }

/* Labels hidden by default; reveal on hover or proximity */
.side-menu .menu-label { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .18s ease, max-width .18s ease; }
.side-menu.open:hover .menu-label { opacity: 1; max-width: 200px; }

/* Proximity: reveal labels and expand when cursor near left edge (set by JS) */
@media (hover: hover) and (pointer: fine) {
  body.proximity-left .side-menu.open { width: min(90vw, 320px); }
  body.proximity-left .side-menu.open .menu-label { opacity: 1; max-width: 200px; }
}

/* CodeMirror styles */
.CodeMirror {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  height: 600px;
  resize: vertical;
  overflow: auto !important;
}
@media (max-width: 768px) {
  .CodeMirror { height: 300px; }
}

[data-bs-theme="dark"] .CodeMirror {
  border-color: #495057;
}

.section-sticky {
    position: sticky; top: 0; z-index: 2;
    backdrop-filter: blur(4px);
  }

  /* FIX: bring back the missing top border after sticky labels */
  .accordion .section-sticky + .accordion-item {
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
    border-top-left-radius: var(--bs-accordion-border-radius);
    border-top-right-radius: var(--bs-accordion-border-radius);
  }

.accordion-button { padding-top: .9rem; padding-bottom: .9rem; }

/* Softer active background; keep text color */
.accordion-button:not(.collapsed) {
  background-color: var(--bs-body-bg);
  color: inherit;
}

/* Gentle shadow on the whole item */
.accordion-item { box-shadow: 0px 0px 10px rgba(0,0,0,.1); }