/* --- base typography ------------------------------------------------ */
body, .container-fluid, .container, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  color: #1a1f2c;
  -webkit-font-smoothing: antialiased;
}
body { background: #ffffff; color: #1a1f2c; }
h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -0.01em; }
/* App header: title left, action buttons right, sits as a unified bar
   across the top of the page with a subtle separator below. Negative
   horizontal margins bleed it past the container's 15px gutters so
   the bottom border runs edge-to-edge. */
.title-bar {
  background: #ffffff;
  border-bottom: 1px solid #e3e6ea;
  padding: 10px 24px;
  margin: 0 -15px 12px -15px;
  flex: 0 0 auto;
}
/* Trim the default Bootstrap titlePanel — it's huge and bold. */
.title-bar h2 { font-size: 22px; font-weight: 600; margin: 0;
                letter-spacing: -0.015em; color: #0f1726;
                line-height: 1.2; }
.title-bar .title-actions .btn { padding: 5px 12px; }

/* --- buttons -------------------------------------------------------- */
.btn-default {
  background: #ffffff; border: 1px solid #d4d8df; color: #2a3142;
  border-radius: 5px; font-weight: 500; transition: all 0.15s ease;
  box-shadow: none;
}
.btn-default:hover, .btn-default:focus {
  background: #f5f7fa; border-color: #b8bec8; color: #0f1726;
}
.btn-default:active { background: #eceff3; }

/* --- tabs: flat underline style ------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid #e3e6ea; margin-bottom: 0; padding-left: 2px;
}
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a {
  border: none; border-bottom: 2px solid transparent;
  background: transparent; color: #5a6478; font-weight: 500;
  padding: 10px 16px; margin-right: 4px; border-radius: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs > li > a:hover {
  background: transparent; border-bottom-color: #c8ced6; color: #1F4E8C;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent; border: none;
  border-bottom: 2px solid #1F4E8C; color: #1F4E8C; font-weight: 600;
}

.title-actions { display: flex; align-items: center; gap: 8px; }
.title-actions .btn { padding: 4px 12px; font-size: 13px; }
#nma { background: #fafbfc; border: 1px solid #e3e6ea; border-radius: 6px; }
.endpoint-picker,
.drug-search { margin: 0; padding: 6px 0; background: #ffffff;
               height: 46px; box-sizing: border-box; }
.endpoint-picker .form-group,
.drug-search .form-group { margin-bottom: 0; }
.endpoint-picker select { width: 100%; height: 34px; padding: 4px 8px;
                          border: 1px solid #ccc; border-radius: 4px;
                          background: #ffffff; font-size: 14px; }
.endpoint-picker select option:disabled { color: #b0b0b0; }
/* Match the endpoint dropdown's look; selectize renders its own markup
   in place of a native <select>, so it needs separate styling. A hard
   height + overflow:hidden (not just min-height) keeps this clamped to
   exactly 34px regardless of selectize's own internal metrics - without
   it, selectize can render a touch taller than a native <select> and spill
   under the sticky .view-summary bar directly below. flex/align-items
   centers the single-line content within that fixed height. */
.drug-search .selectize-input { height: 34px; overflow: hidden;
                                box-sizing: border-box;
                                padding: 4px 8px; border: 1px solid #ccc;
                                border-radius: 4px; font-size: 14px;
                                box-shadow: none;
                                display: flex; align-items: center; }
.drug-search .selectize-input.focus { border-color: #1F4E8C;
                                      box-shadow: none; }
.drug-search .selectize-input > input { height: auto; padding: 0; margin: 0; }
.selectize-dropdown .optgroup-header {
  font-weight: 600; color: #5a6478; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.02em; padding: 6px 8px 2px;
}
/* Use flexbox so left/right columns share the row's full height; sticky
   then has room to stick as the user scrolls the table. */
/* Lock the page so only the table column scrolls; the diagram never moves. */
html, body { height: 100%; overflow: hidden; }
.container-fluid, .container { height: 100%; display: flex; flex-direction: column; }
.row.split { display: flex; align-items: stretch; flex: 1 1 auto;
             min-height: 0; }
.row.split > [class*='col-'] { float: none; }
/* Only the table body scrolls; tabs stay pinned at the top of the column. */
.row.split .col-table { display: flex; flex-direction: column;
                        max-height: 100%; min-height: 0; }
.row.split .col-table .tabbable { display: flex; flex-direction: column;
                                   flex: 1 1 auto; min-height: 0; }
.row.split .col-table .tab-content { flex: 1 1 auto; overflow: auto;
                                      min-height: 0; }
/* Pin the endpoint dropdown + drug/comparison search box at the top of the
   scrolling tab-content, and pin the summary line + table header directly
   underneath. .endpoint-controls stacks two 46px children (92px total), so
   the .view-summary offset below is exactly that. Its own height isn't
   fixed (min-height only - the summary text can wrap onto a second line
   at narrow widths), so the thead offset (145px = 92 + 53) is empirically
   tuned to the summary's typical single-line rendered height rather than
   computed from min-height; if the summary's content/layout changes
   materially, re-measure and adjust. */
/* z-index must beat .view-summary's: sticky+z-index makes this a stacking
   context, which caps how high its descendants (incl. the open selectize
   dropdown) can paint relative to siblings - without this the dropdown
   list renders underneath .view-summary regardless of its own z-index. */
.row.split .col-table .tab-content .endpoint-controls {
  position: sticky; top: 0; z-index: 4;
}
/* Let the sticky .view-summary's containing block be the scrolling
   .tab-content rather than this Shiny wrapper (which has no extra
   height of its own and would pin sticky in place). */
.view-summary-wrap { display: contents; }
.row.split .col-table .tab-content .view-summary {
  position: sticky; top: 92px; z-index: 3;
  background: #ffffff; padding: 9px 4px;
  min-height: 52px; box-sizing: border-box;
  font-size: 16px; font-weight: 500; color: #1a1f2c;
  border-bottom: 1px solid #e3e6ea;
  display: flex; align-items: center; gap: 12px;
}
.view-summary-text { flex: 1 1 auto; min-width: 0; }
.view-summary .ma-btn {
  flex: 0 0 auto; align-self: center;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  background: #1F4E8C; border-color: #1F4E8C; color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.view-summary .ma-btn:hover,
.view-summary .ma-btn:focus {
  background: #163a6b; border-color: #163a6b; color: #ffffff;
}
.view-summary .ma-btn .fa { margin-right: 4px; }
.row.split .col-table .tab-content table.dataTable thead th {
  position: sticky; top: 145px; background: #ffffff; z-index: 2;
  box-shadow: inset 0 -1px 0 #ddd;
}
/* Bigger tap target for the modal's top-right close "x" than Bootstrap's
   default bare glyph, so it's easy to hit on a touchscreen. */
.modal-header .close { padding: 8px; margin: -8px -8px -8px 8px; }
/* Trial-name link styling. */
a.trial-pop { color: #1F4E8C; cursor: pointer; }
a.trial-pop:hover { text-decoration: underline; }
/* Trial detail modal. */
.trial-modal .modal-dialog { width: 92%; max-width: 1100px; }
.trial-modal .modal-body { max-height: 75vh; overflow-y: auto;
                           padding: 14px 18px; }
.trial-modal-title { font-weight: 600; }
.trial-modal-subtitle { font-weight: 400; font-size: 16px; color: #333a44;
                        margin-top: 4px; }
.trial-modal-refid { font-weight: 400; color: #aaaaaa; }
.trial-modal-rob-warning {
  display: inline-block; margin-top: 6px; padding: 3px 10px;
  background: #fbe4e1; color: #c0392b; border-radius: 8px;
  font-size: 13px; font-weight: 600;
}
.trial-modal-layout { display: block; }
.trial-modal-layout > h4 { margin-top: 20px; padding-top: 16px;
                           border-top: 1px solid #e3e6ea;
                           color: #1F4E8C; font-size: 15px; }
.trial-modal-refs { font-size: 13px; line-height: 1.45; }
.trial-modal-refs .trial-cite { margin-bottom: 8px; }
.trial-modal-refs .trial-cite:last-child { margin-bottom: 0; }
.trial-modal-refs a { color: #1F4E8C; word-break: break-all; }
.trial-modal-data { min-width: 0; }
.trial-modal-data h4 { margin-top: 16px; color: #1F4E8C; font-size: 15px; }
.trial-modal-data h4:first-child { margin-top: 0; }
.trial-modal-data table { width: 100%; table-layout: fixed;
                          border-collapse: collapse;
                          font-size: 13px; margin-bottom: 12px; }
.trial-modal-data th, .trial-modal-data td {
  padding: 4px 8px; text-align: left; border-bottom: 1px solid #e3e6ea;
  overflow-wrap: break-word;
}
.trial-modal-data th { font-weight: 600; background: #f5f7fa; }
.trial-modal-data th:first-child, .trial-modal-data td:first-child {
  width: 26%;
}
.trial-modal-data tr:first-child th { text-align: center;
                                      border-bottom: 1px solid #d7dce3; }
.trial-modal-data tr:nth-child(2) th { text-align: center; font-weight: 400;
                                       font-size: 12px; color: #5a6478; }
.trial-modal-data td:not(:first-child) { text-align: center; }
.trial-modal-data .subcat-row td { font-weight: 600; color: #5a6478;
                                   background: #f0f2f5; padding-top: 8px; }
.trial-modal-empty { color: #5a6478; font-style: italic; padding: 8px 0; }
/* Per-trial banding applied by drawCallback above. */
table.dataTable tr.trial-band > td { background-color: #f3f5f8; }

/* Risk-of-bias (RoB2) badges in the trial modal. */
.rob-table th:first-child, .rob-table td:first-child { width: 34%; text-align: left; }
.rob-caption { font-size: 12px; color: #5a6478; margin: -4px 0 8px; }
.rob-badge {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  cursor: default;
}
.rob-low     { background: #3bb08f; }
.rob-some    { background: #d9a441; }
.rob-high    { background: #c0392b; }
.rob-unknown { background: #9aa1ab; }
.title-bar { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; }
.title-bar .about-btn { margin-right: 4px; }
/* Roomy About modal. */
.about-modal .modal-dialog { width: 80%; max-width: 900px; }
.about-modal .modal-body { font-size: 14px; line-height: 1.55;
                           max-height: 70vh; overflow-y: auto; }
.about-modal .modal-body h4 { margin-top: 18px; color: #1F4E8C; }
.about-modal .modal-body h4:first-child { margin-top: 0; }
/* Meta-analysis modal: a touch wider than About for forest plots. */
.ma-modal .modal-dialog { width: 92%; max-width: 1100px; }
.ma-modal .modal-body { max-height: 75vh; overflow-y: auto;
                        padding: 14px 18px; }
.ma-modal h4 { margin-top: 4px; color: #1F4E8C; font-size: 15px; }
.ma-modal .ma-summary { font-size: 13px; color: #5a6478;
                        margin-bottom: 8px; }
.ma-method-toggle { margin-bottom: 12px; }
.ma-method-toggle .shiny-input-container { margin: 0; }
.ma-method-toggle label.radio-inline { margin-right: 16px; font-size: 13px; }
.ma-modal .ma-plot-block { margin-bottom: 22px; }
.ma-modal .ma-plot-title { font-weight: 600; color: #1a1f2c;
                           font-size: 14px; margin: 8px 0 2px 0; }
.ma-modal .ma-plot-stats { font-size: 12px; color: #5a6478;
                           margin-bottom: 6px; }
.ma-modal .ma-empty { color: #5a6478; font-style: italic;
                      padding: 12px 0; }
/* Inline-SVG forest plot styling. All forest plots share these rules;
   the SVG content itself is produced by forest_svg() (no ggplot). */
.ma-forest { display: block; max-width: 100%; height: auto;
             font-family: inherit; }
.ma-forest .ma-plot-bg   { fill: #fafbfc; stroke: none; }
.ma-forest .ma-refline   { stroke: #aab1bd; stroke-width: 1;
                            stroke-dasharray: 4 4; }
.ma-forest .ma-axis      { stroke: #5a6478; stroke-width: 1; }
.ma-forest .ma-tick      { stroke: #5a6478; stroke-width: 1; }
.ma-forest .ma-ticklabel { fill: #5a6478; font-size: 11px;
                            text-anchor: middle; }
.ma-forest .ma-rowlabel  { fill: #1a1f2c; font-size: 12px;
                            text-anchor: end; }
.ma-forest .ma-rowlabel-sub { fill: #7f8fa6; font-size: 10px;
                               text-anchor: end; font-style: italic; }
.ma-forest .ma-ci        { stroke: #5a6478; stroke-width: 1.2; }
.ma-forest .ma-ci-arrow  { fill: #5a6478; stroke: none; }
.ma-forest .ma-square    { stroke: none; }
.ma-forest .ma-square-default { fill: #1a1f2c; }
.ma-forest .ma-square-fe { fill: #7f8fa6; }
.ma-forest .ma-square-re { fill: #1F4E8C; }
.ma-forest .ma-citext    { fill: #1a1f2c; font-size: 11px;
                            text-anchor: start; }
.ma-forest .ma-pooled-fe .ma-diamond { fill: #7f8fa6; stroke: #5a6478;
                                        stroke-width: 1; }
.ma-forest .ma-pooled-re .ma-diamond { fill: #1F4E8C; stroke: #14376a;
                                        stroke-width: 1; }
.ma-forest .ma-pooled-label { font-weight: 400; }
.ma-forest .ma-pooled-heading { fill: #1a1f2c; font-size: 13px; font-weight: 700;
                                  text-anchor: end; }
.ma-forest .ma-axislabel { fill: #1a1f2c; font-size: 12px;
                            text-anchor: middle; font-weight: 500; }
.ma-forest .ma-dir       { fill: #5a6478; font-size: 11px;
                            font-style: italic; }
.ma-forest .ma-dir-left  { text-anchor: start; }
.ma-forest .ma-dir-right { text-anchor: end; }
/* Invisible row hit-area: gives the cursor a wide target so the tooltip
   fires almost anywhere on the row, not just over the 8 px square. */
.ma-forest .ma-rowhit { fill: transparent; pointer-events: all;
                        cursor: default; }
.ma-forest .ma-row:hover .ma-square,
.ma-forest .ma-row:hover .ma-ci   { stroke: #c0392b; }
.ma-forest .ma-row:hover .ma-square-default { fill: #c0392b; }
.ma-forest .ma-pooled:hover .ma-diamond { stroke: #c0392b; stroke-width: 1.5; }
/* --- mobile reflow ---------------------------------------------------
   Desktop (>=768px) is untouched by everything below: .mobile-tab-bar
   stays empty/hidden, and the JS in ui() never relocates the nav tabs /
   endpoint-controls blocks out of their normal spot. Below 768px, that JS
   moves the nav tabs + the active tab's endpoint-controls (dropdown +
   drug/comparison search box) into #mobile-tab-bar, and this media query
   switches the two-column desktop grid into a single stacked column:
   title, actions, tabs+dropdown+search, network diagram, table. */
.mobile-tab-bar { display: none; }

@media (max-width: 767px) {
  .title-bar { flex-direction: column; align-items: flex-start; }
  .title-bar .title-actions { margin-top: 8px; }

  /* Desktop locks the page and only scrolls the table column; mobile
     just lets the whole page scroll normally. */
  html, body { height: auto; overflow: visible; }
  .container-fluid, .container { height: auto; display: block; }

  .row.split { display: block; flex: none; }
  .row.split > [class*='col-'] { width: 100%; }
  .row.split .col-table { display: block; max-height: none; }
  .row.split .col-table .tabbable { display: block; flex: none; }
  .row.split .col-table .tab-content { overflow: visible; flex: none; }

  /* Undo desktop's sticky-within-scrolling-column positioning - the page
     scrolls as a whole now, so these would just pin at odd offsets. */
  .row.split .col-table .tab-content .endpoint-controls,
  .row.split .col-table .tab-content .view-summary,
  .row.split .col-table .tab-content table.dataTable thead th {
    position: static;
  }

  .dataTables_wrapper { overflow-x: auto; }

  #nma { height: 380px !important; }

  .mobile-tab-bar {
    display: block; margin: 0 -15px 12px -15px; padding: 0 15px 10px;
    border-bottom: 1px solid #e3e6ea;
  }
  .mobile-tab-bar .nav-tabs { margin-bottom: 10px; }
  /* Only the active tab's controls block (relocated here alongside the
     other two) is shown; JS toggles this class on tab switch. */
  .mobile-tab-bar .endpoint-controls { display: none; }
  .mobile-tab-bar .endpoint-controls.controls-active { display: block; }
}

/* Fast-popup tooltip (JS-driven; replaces native <title>). */
.ma-tt-popover {
  position: absolute; z-index: 1100; pointer-events: none;
  background: #1a1f2c; color: #f6f7f9; font-size: 12px;
  line-height: 1.4; padding: 6px 9px; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18); white-space: pre-line;
  max-width: 320px;
}