/*
 * Copyright (c) 2026 Apurva Nakade. All rights reserved.
 * Released under Apache 2.0 license as described in the file LICENSE.
 * Authors: Apurva Nakade
 */

/* ── Parameter controls panel ────────────────────────────────────── */
/* Composable primitives: .ojs-panel is chrome only, .ojs-row/.ojs-grid are
 * layout only. Combine them (e.g. class="ojs-panel ojs-row") for a
 * standalone panel, or nest a bare .ojs-row/.ojs-grid inside a .ojs-panel
 * for a control group within a larger panel — nesting two .ojs-panels
 * would double up the border/background. */

.ojs-panel {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  background: var(--bs-light, #f8f9fa);
}

.ojs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: flex-end;
}

/* First control grows to fill the row; later ones (e.g. a button) keep their natural width */
.ojs-row > div { margin: 0; }
.ojs-row > div:first-child { flex: 1 1 200px; }
.ojs-row > div:last-child { flex: 0 0 auto; }

/* auto-fit so empty tracks collapse instead of pinning real ones to the minmax floor */
.ojs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.25rem 0.5rem;
  align-items: end;
}

/* Skin every native input inside a panel to match its chrome */
.ojs-panel input {
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: var(--bs-border-radius-sm, 0.25rem);
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  background: white;
}

/* !important overrides Observable Inputs' own flex-shrink on the number spinner */
.ojs-panel input[type="number"] {
  width: 5.5em;
  flex: none !important;
}

.ojs-panel input[type="text"] {
  width: 28em;
  max-width: 100%;
  flex: none !important;
}

.ojs-panel input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.2);
}

.ojs-panel input[type="range"] {
  border: none;
  padding: 0;
  background: none;
  accent-color: #2563eb;
  width: 100%;
}

/* Observable Inputs' button has no class of its own to skin, and its
 * browser-default text color doesn't adapt to the dark theme's panel
 * background — style it explicitly instead of relying on defaults.
 * Scoped to Observable Inputs' generated form (class^="oi-", per
 * quarto-ojs.css) so this doesn't also catch Quarto's own per-cell
 * "Copy to Clipboard" button, which lives in the same panel. */
.ojs-panel form[class^="oi-"] button {
  border: 1px solid #2563eb;
  border-radius: var(--bs-border-radius-sm, 0.25rem);
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  color: #fff;
  background: #2563eb;
  cursor: pointer;
}

.ojs-panel form[class^="oi-"] button:hover {
  background: #1d4ed8;
}

.ojs-panel form[class^="oi-"] button:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.35);
}

/* Attach to an Inputs.* wrapper div to make it fill the row, overriding
 * Observable Inputs' own default max-width: 360px cap on its form wrapper. */
.ojs-fill { width: 100% !important; max-width: none !important; }

/* Attach to an Inputs.* wrapper div to keep it at its natural width instead
 * of Observable Inputs' 100%-wide default, which would otherwise force the
 * row to wrap. */
.ojs-auto { width: auto !important; flex: none !important; }

/* Short numeric-expression fields (e.g. "Max iterations") use Inputs.text
 * so they accept expressions like "2*10", but should stay as compact as the
 * plain number input they replaced rather than the default 28em text width. */
.ojs-auto input[type="text"] { width: 6em; }

/* ── Output area ─────────────────────────────────────────────────── */

/* Let layout-ncol cells shrink below the Plotly chart's intrinsic width */
.quarto-layout-cell {
  min-width: 0;
}

.plotly-box-large {
  width: 100%;
  height: 78vh;
  min-height: 500px;
}

/* Plotly's own 78vh/100% sizing above would otherwise cap the plot well
 * short of the screen while fullscreen (js/plotly-fullscreen-button.js). */
.plotly-box-large:fullscreen {
  width: 100vw;
  height: 100vh;
  background: var(--bs-body-bg, #fff);
}

/* ── Navbar search ───────────────────────────────────────────────── */

/* Quarto's default inline (type: textbox) navbar search is 180px; widen it. */
#quarto-search.type-textbox .aa-Autocomplete .aa-Form {
  width: 320px;
  max-width: 100%;
}

/* ── Listing cards ───────────────────────────────────────────────── */

.quarto-grid-item {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.07);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  cursor: pointer;
}

.quarto-grid-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.13), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.quarto-grid-item:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* ── Iteration table ─────────────────────────────────────────────── */

.ojs-table-container {
  overflow-x: auto;
}

.ojs-table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-layout-full main.content { padding-inline: 0.75rem; }
  .plotly-box-large { height: 65vh; min-height: 400px; }
  .ojs-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .ojs-grid { grid-template-columns: 1fr; }
}