html {
  scroll-behavior: smooth;
}

#over-bondtopia {
  scroll-margin-top: 64px; /* navbar height */
}

#obligatiescreener-demo {
  scroll-margin-top: 64px; /* navbar height */
}

.logo, h1{
    font-family: 'Playfair Display', serif;
}

/* -- Toggle table width -- */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: visible !important;
}

/* Standard table width */
#bond-table {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  transition: width 180ms ease !important;
  display: block !important;
}

/* Wide table widthmodus */
#bond-table.wide {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100vw - 72px) !important;   /* total margin of 72px: 36px left + 36px right */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

#bond-table > .tabulator {
  width: 100% !important;
  box-sizing: border-box !important;
}

.tabulator {
  background-color: #f8fafc; /* bg-slate-50 */
  /*border-top: 1px solid #e2e8f0; /* border-slate-200 */
  font-family: Inter, sans-serif;
}

/* modify styling of border between frozen and scrolling part */
.tabulator-frozen.tabulator-frozen-left {
  border-right: 2px solid #cbd5e1 !important; /* border-slate-300 */
}

/* header */

.tabulator .tabulator-header {
  background-color: #f8fafc; /* bg-slate-50 */
  color: #334155; /* slate-700 */
  font-weight: 700;
  border-top: 2px solid #cbd5e1; /* border-slate-300 */
  border-bottom: 2px solid #cbd5e1; /* border-slate-300 */
}

.tabulator .tabulator-header .tabulator-col {
  background-color: #f8fafc; /* bg-slate-50 */
  color: #334155; /* slate-700 */
}

.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-content {
  background-color: #e2e8f0; /* bg-slate-200 */
}

/* arrow none */

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter {
    color: #94a3b8;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    right: 0;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    align-items: center;
    bottom: 0;
    display: flex;
    position: absolute;
    right: 4px;
    top: 0;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #94a3b8;
    border-top: none;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #94a3b8;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    width: 0;
}

/* arrow ascending */

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter {
    color: #334155;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    right: 0;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    align-items: center;
    bottom: 0;
    display: flex;
    position: absolute;
    right: 4px;
    top: 0;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #334155;
    border-top: none;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #94a3b8;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    width: 0;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #334155;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    width: 0;
}

/* arrow descending */

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter {
    color: #334155;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    right: 0;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    align-items: center;
    bottom: 0;
    display: flex;
    position: absolute;
    right: 4px;
    top: 0;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: none;
    border-top: 6px solid #334155;
    color: #94a3b8;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #94a3b8;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    width: 0;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #334155;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    height: 0;
    width: 0;
}

/* row */

.tabulator .tabulator-row {
  background-color: #f8fafc; /* bg-slate-50 */;
  border-bottom: 1px solid #cbd5e1; /* border-slate-300 */
  color: #1e293b; /* text-slate-800 */
  cursor: default !important; /* Make table rows not look clickable */
}

.tabulator .tabulator-row:hover {
  background-color: #f8fafc !important; /* bg-slate-50 */;
}

/* Increase left/right padding inside cells */
.tabulator .tabulator-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 3rem; /* default ~0.5rem */
}

/* footer */

.tabulator .tabulator-footer {
    border-top: 1.5px solid #cbd5e1; /* border-slate-300 */
}

.tabulator .tabulator-footer .tabulator-page.active {
    background-color: #0f766e; /* bg-teal-700 */
    border-color: #0f766e; /* border-teal-700 */
    color: #fff; /* text-white*/
}

.tabulator .tabulator-footer .tabulator-page.active:hover {
    background-color: #115e59 !important; /* bg-teal-800 */
    border-color: #115e59 !important; /* border-teal-800 */
    color: #fff !important; /* text-white*/
}

.tabulator .tabulator-footer .tabulator-page {
    background: #e2e8f0; /* slate-200 */
    border: 1px solid #cbd5e1; /* border-slate-300 */
    color: #334155; /* slate-700 */
}

.tabulator .tabulator-footer .tabulator-page:hover {
    background: #cbd5e1 !important; /* slate-300 */
    border: 1px solid #cbd5e1 !important; /* border-slate-300 */
    color: #334155 !important; /* slate-700 */
}

.tabulator .tabulator-footer .tabulator-page:disabled {
    background: #f1f5f9; /* bg-slate-100 */
    border-color: #cbd5e1; /* border-slate-300 */
    color: #94a3b8; /* slate-400 */
    opacity: .6;
}

.tabulator .tabulator-footer .tabulator-page:disabled:hover {
    background: #f1f5f9 !important; /* bg-slate-100 */
    border-color: #cbd5e1 !important; /* border-slate-300 */
    color: #94a3b8 !important; /* slate-400 */
    opacity: .6 !important;
}

/* Customise text before dropdown */
.tabulator-paginator label {
    color: #334155; /* slate-700 */
}

/* Customise dropdown */
.tabulator .tabulator-footer .tabulator-page-size {
    background: #e2e8f0; /* slate-200 */
    border: 1px solid #cbd5e1; /* border-slate-300 */
    color: #334155; /* slate-700 */
}

/* Style the options in the dropdown */
.tabulator .tabulator-footer .tabulator-page-size option {
    background: #e2e8f0; /* slate-200 */
    color: #334155; /* slate-700 */
}

/* Style the hovered option (when user moves mouse over) */
.tabulator .tabulator-footer .tabulator-page-size option:hover {
    background-color: #0f766e !important; /* bg-teal-700 */
    color: #fff !important; /* text-white*/
}

.transition-dropdown {
  display: none;      /* hidden by default */
  pointer-events: auto;
  position: absolute;
  z-index: 50;
}

.transition-dropdown.show {
  display: block;     /* shown instantly */
}

/* Arrow rotation */
.filter-button-arrow {
  display: inline-block;
  transition: transform 0.5s ease; /* same speed as dropdown */
}

.filter-button-arrow.rotate {
  transform: rotate(180deg); /* points up */
}

/* All filter buttons */
[id$="-filter-button"] {
  background-color: #e2e8f0; /* bg-slate-200 */
  color: #334155; /* slate-700 */
  border: 1px solid #cbd5e1; /* border-slate-300 */
}

/* Hover state for all filter buttons */
[id$="-filter-button"]:hover {
  background: #cbd5e1; /* slate-300 */
  border: 1px solid #cbd5e1; /* border-slate-300 */
  color: #334155; /* slate-700 */
}

/* Dropdown panels */
.filter-btn {
  text-align: left;            /* left-aligned text */
  overflow: visible;           /* width will be set by JS */
  white-space: nowrap;         /* single line, no wrap */
}

/* Dropdown panels: auto width based on content, but constrained */
.dropdown-content {
  box-sizing: border-box;      /* padding included in width */
  width: auto;                 /* let content define width */
  min-width: 12rem;            /* floor (JS will overwrite to match button width) */
  max-width: 36rem;            /* ceiling — tweak per-dropdown via class if needed */
  white-space: normal;         /* allow wrapping inside dropdown list items */
  padding: .75rem;             /* breathing room */
}

/* Allow list items to wrap inside dropdowns */
.dropdown-content .dropdown-item,
.dropdown-content label {
  white-space: normal;
}

[id$="-dropdown"] {
  background-color: #e2e8f0; /* bg-slate-200 */
  border: 1px solid #cbd5e1; /* border-slate-300 */
  box-shadow: none; /* no shadow */
}

/* Dropdown list items */
[id$="-dropdown"] label {
  padding-right: 0.5rem;
  color: #334155; /* slate-700 */
}

/* Hover effect for list items */
[id$="-dropdown"] label:hover {
  color: #0f766e; /* teal-700 */
}

/* Active filter (when at least 1 item selected) */
button[id$="-filter-button"].active-filter {
  background-color: #0f766e; /* bg-teal-700 */
  border-color: #0f766e; /* border-teal-700 */
  color: #fff;
}

button[id$="-filter-button"].active-filter:hover {
  background-color: #115e59; /* bg-teal-700 */
  border-color: #115e59; /* border-teal-700 */
  color: #fff;
}

/* Style for the count number inside buttons */
.filter-count {
  color: #fff;
}

/* Custom style for disabled dropdown options */
.disabled-option {
  cursor: not-allowed;
  pointer-events: none;
}

.disabled-option span {
  /* this changes the text color of the option */
  color: #94a3b8; /* slate-400 */
}

/* --- Filter Chips --- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  border-radius: 6px;
  background-color: #f1f5f9; /* bg-slate-100 */
  color: #334155; /* slate-700 */
  border: 1px solid #cbd5e1; /* border-slate-300 */
  cursor: default;
}

/* --- Remove "X" button inside chip --- */
.remove-chip {
  border: none;
  background: transparent;
  color: #334155; /* slate-700 */
  font-weight: bold;
  cursor: pointer;
}

.remove-chip:hover {
  color: #0f766e; /* teal-700 */
}

.clear-all-btn {
  font-size: 0.75rem; /* text-xs */
  color: #1e293b; /* slate-800 */
  background: none; /* remove button background */
  border: none; /* remove border */
  padding: 0; /* no padding */
  cursor: pointer; /* pointer cursor */
}

.clear-all-btn:hover {
  text-decoration: underline; /* hover:underline */
}

/* Filters title */
.filter-title {
  display: flex;
  align-items: center;
  text-align: center;
  color: #0f172a; /* slate-900 */
  font-weight: 600;
  margin: 1rem 0;
  font-size: 1.125rem; /* same as text-lg */
}

.filter-title::before,
.filter-title::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid #e2e8f0; /* slate-200, thicker */
}

.filter-title:not(:empty)::before {
  margin-right: .75em;
}
.filter-title:not(:empty)::after {
  margin-left: .75em;
}

/* Gekozen filters title */
.chosen-filters-title {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.chosen-filters-title span {
  margin-right: .75em;
  font-weight: 600;
  color: #0f172a; /* slate-900 */
  font-size: 1rem; /* same as text-base */
}

.chosen-filters-title .line {
  flex: 1;
  border-bottom: 1.5px solid #e2e8f0; /* slate-200, thicker */
}

.hidden {
  display: none;
}

#toggleFilters {
  position: relative; /* makes z-index effective */
  font-size: 0.75rem; /* text-xs */
  color: #1e293b; /* slate-800 */
  background: none; /* remove button background */
  border: none; /* remove border */
  padding: 0; /* no padding */
  cursor: pointer; /* pointer cursor */
}

.toggle-label:hover {
  text-decoration: underline; /* hover:underline */
}

/* arrow in front, larger, no underline */
.toggle-arrow {
  display: inline-block;
  margin-right: 0.25rem; /* small gap between arrow and text */
  font-size: 1rem; /* bigger arrow */
  line-height: 1;
  transform-origin: center;
  color: inherit; /* use the button text color */
  transition: transform 0.5s ease;
}

/* rotate arrow on toggle */
.toggle-arrow.rotate {
  transform: rotate(180deg);
}

/* Column presets */

/* Dropdown panels */
.preset-btn {
  text-align: left;            /* left-aligned text */
  white-space: nowrap;         /* single line, no wrap */
}

/* All preset buttons */
[id$="-preset"] {
  background-color: #e2e8f0; /* bg-slate-200 */
  color: #334155; /* slate-700 */
  border: 1px solid #cbd5e1; /* border-slate-300 */
}

/* Hover state for all preset buttons */
[id$="-preset"]:hover {
  background: #cbd5e1; /* slate-300 */
  border: 1px solid #cbd5e1; /* border-slate-300 */
  color: #334155; /* slate-700 */
}

/* Active preset */
button[id$="-preset"].active-filter {
  background-color: #0f766e; /* bg-teal-700 */
  border-color: #0f766e; /* border-teal-700 */
  color: #fff;
}

button[id$="-preset"].active-filter:hover {
  background-color: #115e59; /* bg-teal-700 */
  border-color: #115e59; /* border-teal-700 */
  color: #fff;
}

/* Number of bonds shown & ISIN search button */

.status-and-search {
  display: flex;                  /* put items next to each other */
  justify-content: space-between; /* push left/right */
  align-items: flex-end;            /* vertical centering */
  margin-bottom: 12px;            /* space below entire bar */
}

@media (max-width: 600px) {
  .status-and-search {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
}

#bond-status {
  font-weight: 500;
  font-size: 14px;
  margin: 0; /* reset inner margins */
}

/* ensure wrapper height matches the input and centers children */
.status-and-search .isin-search-wrap {
  display: inline-flex;    /* change only via CSS, no HTML edits needed */
  align-items: center;
  position: relative;      /* already set in HTML, safe to restate */
  box-sizing: border-box;
}

/* remove bottom margin on input that was enlarging the wrapper */
.status-and-search .isin-search-input {
  line-height: 1;
  box-sizing: border-box;
  margin-bottom: 4px; /* small offset from bottom edge of row */
  border-color: #e2e8f0; /* border-slate-200 */
  background-color: #ffffff; /* white */
  color: #1e293b; /* text-slate-800 */
  font-size: 14px;
}

/* Placeholder color */
.isin-search-input::placeholder {
  color: #94a3b8; /* slate-400 */
}

/* Focus state */
.isin-search-input:focus {
  outline: none;
  border-color: #cbd5e1; /* focus:border-slate-300 */
}

/* Clear X button */
.status-and-search .isin-search-wrap .isin-clear-x {
  margin-bottom: 4px; /* small offset from bottom edge of row */
  position: absolute;
  right: 0.5rem;          /* same as right-2; change if you want different spacing */
  top: 0;
  bottom: 0;              /* spans the full vertical area of the wrapper */
  transform: none;        /* override any translate-y from tailwind classes */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;      /* horizontal hit area */
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;        /* keep same as your design */
  font-weight: 700;
  box-sizing: border-box;
  color: #374151; /* gray-700 */
}

.status-and-search .isin-search-wrap .isin-clear-x:hover {
  color: #0f766e; /* teal-700 */
}

/* keep the .hidden helper working */
.status-and-search .isin-search-wrap .isin-clear-x.hidden { display: none; }

/* --- Warning triangle column --- */
.warning-triangle-cell {
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

.warning-triangle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.warning-triangle {
  display: inline-block;
  border-radius: 50%;
}

/* mainly controls size of the triangle */
.warning-triangle {
  display: inline-block;
  border-radius: 9999px;
  transition: transform 0.15s ease;
}

/* scale the dot when user hovers the wrapper */
.warning-triangle-wrapper:hover .warning-triangle {
  transform: scale(1.10); /* 10% growth */
}

/* --- Tradability dot column --- */
.tradable-dot-cell {
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

.dot-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* --- Prevent frozen column double lines --- */
.tabulator-frozen-rows-holder,
.tabulator-frozen-columns-holder {
  border: none !important;
}

/* --- Ensure frozen separator line stays aligned --- */
.tabulator-frozen .tabulator-cell {
  border-right: 1px solid #d1d5db !important; /* your light gray separator */
}

/* --- Keep fixed column widths when toggling columns --- */
.tabulator {
  table-layout: fixed !important;
  overflow: hidden !important; /* contain table within its bounds */
  max-width: 100%; /* never exceed container */
}

/* --- Proper internal horizontal scroll --- */
.tabulator-tableholder {
  overflow-x: auto !important;
  overflow-y: auto !important; /* vertical scroll */
  max-width: 100% !important;
  max-height: 658px !important; /* same as Tabulator maxHeight */
  box-sizing: border-box;
}

/* --- Prevent header misalignment --- */
.tabulator-header {
  overflow: hidden !important;
}

/* 1) Target any header column that is NOT sortable and prevent hover bg */
.tabulator .tabulator-header .tabulator-col:not(.tabulator-sortable):hover .tabulator-col-content {
  background-color: transparent !important;
  cursor: default !important;
}

/* 2) Also target the column if it has the cssClass you set on the column definition */
.tabulator .tabulator-header .tabulator-col.warning-triangle-cell:hover .tabulator-col.tradable-dot-cell:hover .tabulator-col-content {
  background-color: transparent !important;
  cursor: default !important;
}

/* 3) Extra: target header by Tabulator field attribute if present (fallback) */
.tabulator .tabulator-header .tabulator-col[tabulator-field="Warnings"]:hover .tabulator-col[tabulator-field="Beschikbaar om te traden"]:hover .tabulator-col-content {
  background-color: transparent !important;
  cursor: default !important;
}

.header-info-tooltip {
  position: absolute;
  background-color: #fff;       /* white background */
  color: #334155;               /* text-slate-700 */
  border: 1px solid #e2e8f0;   /* border-slate-200 */
  font-size: 0.875rem;          /* text-sm */
  font-weight: 500;             /* font-medium */
  border-radius: 0.5rem;        /* rounded-lg */
  padding: 0.5rem 1rem;         /* px-4 py-2 */
  box-shadow: 0 10px 15px rgba(0,0,0,0.15), 0 4px 6px rgba(0,0,0,0.1); /* shadow-lg style */
  line-height: 1.25;
  z-index: 9999;
  max-width: 240px;
  white-space: normal;
}

/* body-tooltip has same styling as header-info-tooltip */
.hover-tooltip-body {
  position: absolute;
  background-color: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 10px 15px rgba(0,0,0,0.15), 0 4px 6px rgba(0,0,0,0.1);
  line-height: 1.25;
  z-index: 999999;
  max-width: 240px;
  white-space: normal;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

/* mainly controls size of the dot */
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  transition: transform 0.15s ease;
}

/* scale the dot when user hovers the wrapper */
.dot-wrapper:hover .dot {
  transform: scale(1.20); /* 20% growth */
}

/* important: ensure Tabulator cells/rows allow overflow visible so you can also use in-DOM tooltips.
   but since we append to body, overflow shouldn't matter. Still helpful for other elements. */
.tabulator .tabulator-row,
.tabulator .tabulator-cell {
  overflow: visible;
}

.tabulator-placeholder {
  justify-content: flex-start !important; /* left aligned */
  align-items: flex-start !important; /* top aligned */
  text-align: left !important; /* left aligned */
}

.tabulator-placeholder-contents {
  color: #94a3b8 !important; /* slate-400 */
  font-size: 14px !important;
}

/* Loading screen */
#loading-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.85);
  z-index: 2147483647;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease;
}

#loading-overlay.visible{
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}

body.no-scroll {
  overflow: hidden !important;
  height:100%;
  touch-action: none !important;
}

.spinner {
  border: 6px solid rgba(0,0,0,0.1);
  border-top:6px solid #0f766e;
  border-radius:50%;
  width:56px;
  height:56px;
  animation:spin 1s linear infinite;
  margin-bottom:12px;
}

.loading-text{
  margin:0;
  font-weight:700;
  color: #334155;
  font-size: 1rem;
  text-align: center;
}

@keyframes spin{ to{ transform:rotate(360deg);} }

/* Tabulator table placeholder */
.table-placeholder {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  height: 658px;
  background: #f8fafc; /* bg-slate-50 */
}

/* Make sure that site-headers/logo keep Playfair font */
.logo, h1 {
  font-family: 'Playfair Display', serif !important;
}

/* Force MailerLite embed to Inter */
#mlb2-33467662, #mlb2-33467662 * ,
#bond-newsform, #bond-newsform * {
  font-family: 'Inter', sans-serif !important;
}