body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  color: #2e2e2e;
  background-color: #ffffff;
}

a, a:visited { 
  color: rgb(8, 66, 102);
  border-bottom: 1px solid rgb(186, 199, 216);
  background-color: transparent;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
}
a:hover, a:focus { 
  /* Hover and Focus States */
  color: rgb(8, 66, 102);
  border-bottom: 1px solid rgb(8, 66, 102);
  background-color: transparent;
  outline: none; /* Removes the default focus outline */
}
/*h1, h2, h3, h4, h5, h6 {*/
/*    color: hotpink*/
/*}*/

/* Ensure headers are black and not link-colored */
h1, h2, h3, h4, h5, h6 {
  color: #000 !important;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit !important;
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: inherit !important;
  text-decoration: underline;
}

.nav a:hover, .dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav, .dropdown-content a {
  font-size: 18px;
  padding: 2px 0;
  margin-left: 0;
}

.dbc-navbar { background-color: #ffffff !important; }

.navbar.bg-light {
  background-image: none;
}

/* Active/selected menu item highlight: override Bootstrap blue with light gray */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar .dropdown-toggle.show {
  background-color: #f0f0f0 !important;
  color: #212529 !important; /* standard body text color */
  border-radius: 4px;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: #f0f0f0 !important;
  color: #212529 !important;
}

/* Ensure dropdown menus never render outside the viewport */
.navbar .dropdown-menu {
  max-width: calc(100vw - 24px); /* keep a small gutter */
  white-space: normal;            /* allow wrapping */
  overflow-wrap: anywhere;        /* break long words if necessary */
}

/* Wrap long dropdown items so text doesn't force horizontal overflow */
.dropdown-menu .dropdown-item {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* On very small screens, prefer left alignment to avoid clipping on the right */
@media (max-width: 576px) {
  .navbar .dropdown-menu-end {
    right: 12px !important; /* keep within viewport */
    left: auto !important;
  }
  /* add spacing so content does not crowd under navbar */
  #page-content {
    padding-top: 10px;
  }
}

/* Add extra breathing room around tabs to prevent overlap with headings */
.dash-tabs, .nav-tabs {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* Ensure tab content has padding and separation from tabs */
.tab-content, .dash-tab-content {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  clear: both;
}

/* App layout content container */
.app-content {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 0;
  text-align: left;
  color: #2e2e2e;
  background: #ffffff;
}

/* If a section is the first on a page, add top margin for breathing room */
section.app-content:first-of-type { margin-top: 1rem; }
/* Prevent double top margins on nested sections */
section.app-content section.app-content:first-of-type { margin-top: 0; }

/* Titles and markdown */
.title {
  text-align: center;
  font-size: 36px;
  margin-top: 0;
}
.markdown {
  text-align: left;
  font-size: 18px;
  line-height: 1.55;
  padding: 10px 0;
}

/* Sections with padding */
.section { padding: 20px; }

/* LMPs plot page: make long markdown flow into two columns on wide screens */
@media (min-width: 1200px) {
  #lmps-plot-section .markdown {
    column-count: 2;
    column-gap: 2rem;
    column-fill: balance;
    /* Improve readability in columns */
    hyphens: auto;
  }
  /* Avoid splitting key blocks across columns */
  #lmps-plot-section .markdown h1,
  #lmps-plot-section .markdown h2,
  #lmps-plot-section .markdown h3,
  #lmps-plot-section .markdown h4,
  #lmps-plot-section .markdown ul,
  #lmps-plot-section .markdown ol,
  #lmps-plot-section .markdown pre,
  #lmps-plot-section .markdown table,
  #lmps-plot-section .markdown blockquote {
    break-inside: avoid-column;
  }
  /* Ensure images/figures scale within a column */
  #lmps-plot-section .markdown img,
  #lmps-plot-section .markdown svg,
  #lmps-plot-section .markdown figure {
    max-width: 100%;
  }
}

/* When embedding, we set display:none inline on containers; ensure no residual spacing */
.hidden-in-embed { display: none !important; margin: 0 !important; padding: 0 !important; }

/* Controls */
.dropdown-short { width: 240px; background: transparent; }
.dropdown-long { width: 460px; background: transparent; }
.radioitems {
  display: grid;
  grid-template-columns: repeat(2, 3fr);
  grid-auto-flow: column dense;
  line-height: 1.1;
  width: 420px;
  height: 42px;
  padding: 0;
  gap: 10px;
  border-radius: 6px;
}
.btn-white {
  background-color: #f5f5f5;
  color: #2e2e2e;
  height: 30px;
  width: 80px;
  margin-top: 0;
  margin-right: 10px;
  border: 0;
}

/* Controls row: lay out horizontally and wrap on smaller screens */
.controls-row { align-items: flex-end; row-gap: 10px; }
.controls-row .dbc-col, .controls-row .col, .controls-row [class^="col-"] {
  margin-bottom: 6px;
  min-width: 0; /* allow content to shrink & wrap instead of overflowing */
}
.controls-row .dbc-col > *, .controls-row .col > *, .controls-row [class^="col-"] > * {
  max-width: 100%;
}

/* Make dropdowns expand to column width responsively */
.controls-row .dropdown-short, .controls-row .dropdown-long { 
  width: 100%;
  min-width: 10rem;
}

/* Ensure radioitems never overlap/overflow when arranged horizontally */
.controls-row .radioitems {
  width: 100%;
  height: auto;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.controls-row .radioitems label { white-space: normal; line-height: 1.2; }
.controls-row .radioitems input { margin-right: 6px; }

@media (max-width: 576px) {
  .radioitems { width: 100%; grid-template-columns: repeat(2, 1fr); height: auto; }
}

/* Mid-range breakpoint to prevent overlap before stacking kicks in */
@media (max-width: 992px) {
  .controls-row { row-gap: 12px; }
  .controls-row .dbc-col, .controls-row .col, .controls-row [class^="col-"] {
    flex: 1 1 100%;
  }
}

/* Graph helpers */
.graph-pad { padding-left: 10px; }

/* Map graph sizing: use CSS instead of inline style */
.graph-map { height: 80vh; width: 100%; }

/* Section divider to replace <hr> tags */
.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
  margin: 12px 0 16px 0;
  display: none;
}

/* Tabs styling via classes instead of inline style */
/* Default (wide screens): horizontal row, no wrapping; allow horizontal scroll if overflow */
.tabs,
.tab-container,
.dash-tabs,
.nav-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  overflow-x: auto;
}
.tab {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto; /* prevent expanding to 100% width */
  white-space: nowrap; /* keep label on one line */
  border-bottom: 1px solid #e6e6e6;
  padding: 8px 12px;
  color: #2e2e2e;
}
.tab--selected {
  border-top: 2px solid #E87722;
  border-bottom: 2px solid #E87722;
  background-color: #ffffff;
  color: #E87722;
  padding: 8px 12px;
  font-weight: 600;
}

/* Responsive: enable wrapping on smaller screens and adjust spacing */
@media (max-width: 768px) {
  .tabs,
  .tab-container,
  .dash-tabs,
  .nav-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Mobile tweaks to reduce crowding and avoid overlap */
@media (max-width: 576px) {
  .tab { padding: 6px 10px; font-size: 14px; }
  .tab-content, .dash-tab-content { margin-top: 0.75rem; }
}

/* Index card/title helpers for Risk Allocation */
.index-title { font-size: 30px; padding-left: 0; }
.index-num { font-size: 20px; padding-left: 20px; }

/* Simple inline helper */
.inline { display: inline; }

/* Accessible visualization data tables */
.vis-table-wrapper { margin-top: 8px; overflow-x: auto; max-height: 50vh; }
.vis-table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.3; }
.vis-table thead th { position: sticky; top: 0; background: #fafafa; z-index: 1; border-bottom: 2px solid #ddd; text-align: left; padding: 4px 6px; font-weight: 600; }
.vis-table tbody td { padding: 3px 6px; border-bottom: 1px solid #eee; }
/* Striped rows for readability */
.vis-table tbody tr:nth-child(odd) { background: #f9f9f9; }
.vis-table tbody tr:nth-child(even) { background: #ffffff; }
.vis-table tbody tr:hover { background: #f0f5ff; }
/* Focus outline for keyboard navigation */
.vis-table td:focus, .vis-table th:focus { outline: 2px solid #005a9e; outline-offset: 2px; }
details > summary { cursor: pointer; font-weight: 600; margin-top: 6px; }
details[open] > summary { color: #E87722; }

/* Accessible custom tablist styles */
.a11y-tablist { display: flex; gap: 0.5rem; margin: 0 0 1rem 0; }
.a11y-tab { background: #f5f5f5; border: 1px solid #ccc; border-radius: 4px 4px 0 0; padding: 0.4rem 0.9rem; cursor: pointer; font-weight: 600; }
.a11y-tab[aria-selected="true"] { background: #ffffff; border-bottom-color: #ffffff; box-shadow: 0 -2px 4px rgba(0,0,0,0.05); }
.a11y-tab:focus-visible { outline: 2px solid #005a9e; outline-offset: 2px; }

/* Visually hidden utility for screen-reader-only content */
.visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Utility to hide UI rows via class instead of inline styles */
.hidden-toggle-row { display: none !important; }