/* ISI-T2D Browser: custom styles */

/* ══ Three-panel top row ════════════════════════════════════════════════════ */
.top-panels {
  display:     flex;
  gap:         1rem;
  align-items: flex-start;
  margin-bottom: 1.75rem;
}

/* ── Controls column (fixed width, houses the card + stats) ────────────────── */
.left-column {
  flex:          0 0 900px;
  display:       flex;
  flex-direction: column;
  gap:           0.75rem;
}

/* ── Controls card ─────────────────────────────────────────────────────────── */
/* The 2-column grid is rendered by the OJS html` template inside the card.    */
/* CSS here only provides visual styling; no layout overrides needed. */
.controls-card {
  flex:          unset;
  background:    #f4f6fb;
  border:        1px solid #c5cfe0;
  border-radius: 10px;
  padding:       1rem 1.5rem 1.1rem;
  box-shadow:    0 2px 8px rgba(0,0,0,.08);
}

/* Tighten the OJS cell wrapper that holds the grid div */
.controls-card > .cell { margin: 0; }
.controls-card > .cell > .observablehq { overflow: visible !important; }

/* Bold label text for all Observable Inputs in the panel */
.controls-card form  > span,
.controls-card label > span:first-child {
  font-weight: 700;
  font-size:   0.84rem;
  color:       #2c3e50;
}

/* Cursor on interactive inputs */
.controls-card input[type="range"]    { cursor: pointer; }
.controls-card input[type="radio"],
.controls-card input[type="checkbox"] { cursor: pointer; }

/* ── Stats card ──────────────────────────────────────────────────────────── */
.stats-card {
  flex:          0 0 160px;
  background:    #eaf4fb;
  border:        1px solid #a8cce0;
  border-radius: 10px;
  padding:       1rem 1.1rem;
  box-shadow:    0 2px 8px rgba(0,0,0,.08);
}

/* Horizontal variant: same width as left-column, lives below controls */
.stats-card.stats-card--horizontal {
  flex: unset;
  width: 100%;
  padding: 0.6rem 0.9rem;
}

.stats-card.stats-card--horizontal .stat-block {
  flex-direction: row;
  justify-content: space-around;
  gap: 0.5rem;
  height: auto;
}

.stats-card.stats-card--horizontal .stat-item {
  flex: 1;
  padding: 0.3rem 0.2rem;
}

.stats-card.stats-card--horizontal .stat-num {
  font-size: 1.35rem;
}

.stat-block {
  display:        flex;
  flex-direction: column;
  gap:            0.9rem;
  height:         100%;
  justify-content: center;
}

.stat-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  background:     rgba(255,255,255,0.65);
  border-radius:  7px;
  padding:        0.45rem 0.3rem;
}

.stat-num {
  font-size:   1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color:       #1a5276;
}

.stat-lbl {
  font-size:  0.72rem;
  color:      #555;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-item.sig .stat-num { color: #c0392b; }

/* ── Citation card (footer) ─────────────────────────────────────────────── */
.citation-card {
  flex:          1;
  background:    #fffdf5;
  border:        1px solid #ddd0b0;
  border-radius: 10px;
  padding:       1rem 1.2rem;
  box-shadow:    0 2px 8px rgba(0,0,0,.08);
}

/* Footer variant: full width, sits below all content */
.citation-card.citation-footer {
  flex:       unset;
  margin-top: 2rem;
}

.citation-heading {
  font-size:   0.85rem;
  font-weight: 700;
  color:       #555;
  margin:      0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.citation-body {
  font-size:   0.84rem;
  color:       #444;
  line-height: 1.6;
  margin:      0;
}

/* ── Responsive collapse ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .top-panels { flex-wrap: wrap; }
  .left-column { flex: 1 1 100%; }
  .citation-card { flex: 1 1 100%; }
}

/* ── Page-width override (Quarto grid may still add padding) ─────────────── */
.page-full main,
#quarto-document-content {
  max-width: 100%;
  padding-left:  1.5rem;
  padding-right: 1.5rem;
}

/* ── Page description intro block ───────────────────────────────────────── */
.page-description {
  background:    #f0f4f8;
  border-left:   4px solid #2980b9;
  border-radius: 0 8px 8px 0;
  padding:       0.9rem 1.2rem;
  margin-bottom: 1.5rem;
  font-size:     0.93rem;
  color:         #2c3e50;
  line-height:   1.65;
}

/* ── Highlight row on hover in DT ───────────────────────────────────────── */
table.dataTable tbody tr:hover {
  background-color: #eaf2fb !important;
}

.dataTables_filter input {
  height: 26px;
  font-size: 0.82rem;
}
/* ── Plotly / heatmap responsive width fix ───────────────────────────────── */

/* Make Plotly outputs fill the available dashboard panel */
.html-widget,
.plotly,
.plot-container,
.svg-container,
.js-plotly-plot,
.js-plotly-plot .plotly,
.js-plotly-plot .svg-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Flexdashboard chart containers should not shrink the plot */
.chart-wrapper,
.chart-stage,
.chart-shim {
  width: 100% !important;
  max-width: 100% !important;
}

/* Avoid hidden width constraints inside panels */
.section.level3,
.section.level2 {
  width: 100% !important;
}

/* Useful if Plotly keeps old calculated dimensions */
.plotly.html-widget {
  width: 100% !important;
}