/* /assets/grid.css */
.ag-theme-alpine .cell-cheapest {
  background: #e6f4ea;   /* soft green */
  font-weight: 600;
}
/* Make dcc.Dropdown look like a Bootstrap input (harmonised with .form-control) */
.input-select .Select-control {
  border: 1px solid #ced4da;
  border-radius: .375rem;
  min-height: 38px;                 /* BS default control height */
  box-shadow: none;
  background-color: #fff;
}
.input-select.is-open .Select-control {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);  /* BS focus ring */
}
.input-select .Select-placeholder,
.input-select .Select--single > .Select-value .Select-value-label,
.input-select .Select-multi-value-wrapper .Select-value-label {
  color: #495057;                   /* BS text color */
}
.input-select .Select-input > input { height: 36px; }
.input-select .Select-value {
  background: #eef2f7;
  border: 1px solid #dee2e6;
  color: #334155;
}
.input-select .Select-menu-outer { z-index: 2000; } /* above cards */
/* assets/pi_filters.css */

/* Ensure the control itself has a stable height */
.input-select .Select-control {
  height: 40px;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Center placeholder, single value and multi chips text vertically */
.input-select .Select-placeholder,
.input-select .Select--single > .Select-control .Select-value,
.input-select .Select-value,
.input-select .Select-value-label {
  line-height: 40px;
}

/* Make the typing caret sit on the same baseline */
.input-select .Select-input {
  height: 40px;
}
.input-select .Select-input > input {
  height: 38px;
  line-height: 38px;
  padding: 0;
  margin: 0;
}

/* If your font stack renders the placeholder 1px high, nudge it */
.input-select .Select-placeholder {
  transform: translateY(1px);
}

/* Slight gap between control and its menu */
.input-select .Select-menu-outer { margin-top: 4px; }
/* Make the text input match the 40px dropdown */
.filter-input.form-control {
  height: 40px;
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
/* Filters bar – make the text input and dropdown the same height */
.filter-input.form-control {
  height: 40px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* dcc.Dropdown (react-select) normalisation */
.input-select .Select-control {
  min-height: 40px;
  height: 40px;
  border-radius: 0.5rem;
}
.input-select .Select-placeholder,
.input-select .Select--single > .Select-control .Select-value-label,
.input-select .Select-input > input {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-select .Select--multi .Select-value {
  margin-top: 4px; /* keep chips vertically centred */
}

/* ─── Filters: make Input and Dropdown the same height & keep single row ─── */
.filter-input.form-control {
  height: 40px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* dcc.Dropdown (react-select v1) – normalise multi-value height */
.input-select .Select-control {
  min-height: 40px;
  height: 40px;                 /* lock control height */
  display: flex;                /* vertically center content */
  align-items: center;
  border-radius: 0.5rem;
}

/* keep chips on one line, no vertical expansion */
.input-select .Select-multi-value-wrapper {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;             /* hide overflow instead of wrapping */
  height: 38px;                 /* match line-height below */
}

/* reduce chip vertical margins to avoid extra height */
.input-select .Select--multi .Select-value {
  margin: 0 6px 0 0;            /* remove default top/bottom margins */
  padding: 2px 6px;
}

/* align placeholder, single-value label and caret vertically */
.input-select .Select-placeholder,
.input-select .Select--single > .Select-control .Select-value-label,
.input-select .Select-input > input {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

/* avoid extra vertical space from the input element */
.input-select .Select-input {
  margin: 0;
}

/* --- Filters: make input + dropdown the same compact height ---------------- */

/* Text search */
.filter-input.form-control {
  height: 38px;                 /* Bootstrap form-control height */
  line-height: 1.25rem;
}

/* React-Select (dcc.Dropdown) */
.input-select .Select-control {
  min-height: 38px;
  height: 38px;                 /* prevents jump when a tag appears */
  border-radius: .5rem;
  border-color: #ced4da;
  box-shadow: none;
}

/* Single-line multi-select; scroll horizontally if needed */
.input-select .Select-multi-value-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;               /* centers chips vertically */
}

/* Chip / tag styling (smaller so the control stays 38px) */
.input-select .Select-value {
  background: #eef4ff;
  border: 1px solid rgba(0,0,0,.08);
  color: #334155;
  border-radius: .375rem;
  margin: 0 .25rem 0 0;
  padding: 2px 6px;
}
.input-select .Select-value-icon {
  border: 0;
  padding-right: .25rem;
  color: #64748b;
}
.input-select .Select-value-label {
  font-size: .95rem;
  line-height: 1.25rem;
  padding-right: 0;
}

/* Remove the tiny down-chevron that crowds the text */
.input-select .Select-arrow-zone,
.input-select .Select-arrow {
  display: none !important;
}

/* Keep the clear “x” aligned on the right */
.input-select .Select-clear-zone {
  display: flex;
  align-items: center;
  padding-right: .25rem;
}

/* Vertically center placeholder text */
.input-select .Select-placeholder {
  line-height: 36px;
}/* Uses Bootstrap 5's button CSS variables so all states are ours */
.btn-clear {
  /* base metrics (optional) */
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .6rem;
  --bs-btn-font-weight: 600;

  /* palette */
  --bs-btn-color:              var(--blue-800, #1e40af);
  --bs-btn-bg:                 var(--blue-050, #eef5ff);
  --bs-btn-border-color:       var(--blue-200, #bfdbfe);

  --bs-btn-hover-color:        var(--blue-900, #1e3a8a);
  --bs-btn-hover-bg:           var(--blue-100, #dbeafe);
  --bs-btn-hover-border-color: var(--blue-300, #93c5fd);

  --bs-btn-active-color:       var(--blue-900, #1e3a8a);
  --bs-btn-active-bg:          var(--blue-150, #d1e7ff);
  --bs-btn-active-border-color:var(--blue-400, #60a5fa);

  --bs-btn-focus-shadow-rgb:   0,102,204;

  border-width: 1px;
  background-image: none;
  appearance: none;                /* avoid iOS grey tap highlight */
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, border-color .12s, box-shadow .12s, color .12s;
}

/* remove the tiny fade on press to avoid any flash */
.btn-clear:active { transition: none; }

/* ──────────────────────────────────────────────────────────────
   AG Grid tooltip shell (keeps the Plotly-like card look)
   ────────────────────────────────────────────────────────────── */
.ag-tooltip {
  /* card shell */
  background: #ffffff !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(33, 37, 41, 0.18), 0 1px 2px rgba(33, 37, 41, 0.08) !important;
  padding: 10px 12px !important;

  /* typography baseline to match your figures */
  color: #222;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.25;
}

/* ──────────────────────────────────────────────────────────────
   Inner content styled like the Plotly hover card
   ────────────────────────────────────────────────────────────── */
.pi-tt { max-width: 520px; }

.pi-tt .tt-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.pi-tt .tt-sub {
  color: #6c757d;            /* Bootstrap gray-600 */
  font-size: 12px;
  margin-bottom: 6px;
}

/* Grid for aligned key–value rows */
.pi-tt .tt-grid {
  display: grid;
  grid-auto-rows: minmax(18px, auto);
  row-gap: 2px;
}

/* Each row has 2 columns: label | value */
.pi-tt .tt-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  align-items: baseline;
  /* Monospace for tidy numbers, similar to the figure hover */
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Labels add the ":" separator via CSS for consistent alignment */
.pi-tt .tt-label {
  position: relative;
  color: #222;
  font-family: "Segoe UI Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.pi-tt .tt-label::after {
  content: " :";
  opacity: 0.7;
}

/* Values use a slightly higher contrast and allow wrapping */
.pi-tt .tt-value {
  color: #222;
  font-family: "Segoe UI Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* When a line had no "Label: Value" we render it full width */
.pi-tt .tt-note {
  grid-column: 1 / -1;
}

/* Optional: dark mode */
@media (prefers-color-scheme: dark) {
  .ag-tooltip {
    background: #1f1f1f !important;
    border-color: #2c2c2c !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.35) !important;
    color: #eaeaea;
  }
  .pi-tt .tt-sub { color: #a0a0a0; }
  .pi-tt .tt-label::after { opacity: 0.8; }
  .pi-tt .tt-value { color: #eaeaea; }
}