/* Assay Import Studio — app-specific styling.
   Builds on the shared Studio design system (css/studio.css): reuses its tokens
   (--st-ok/--st-warn/--st-bad/--accent) so dark mode and the macOS theme work
   automatically. Everything is scoped under .studio with an `ais-` prefix. */

/* ---- Sheet / AOA preview ------------------------------------------------ */
.studio .ais-preview td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio .ais-preview .ais-headrow td {
  background: var(--accent-soft, rgba(47, 107, 255, 0.12));
  font-weight: 650;
}

/* ---- Column mapping grid ------------------------------------------------ */
.studio .ais-maprid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 16px;
}
.studio .ais-analyte-chips,
.studio .ais-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.studio .ais-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--win-border, rgba(0, 0, 0, 0.12));
  font-size: 12px; user-select: none;
}
.studio .ais-chip input { accent-color: var(--accent); }
.studio .ais-chip.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---- Plate grid (map + heatmap) ---------------------------------------- */
.studio .ais-plate-wrap { overflow: auto; padding: 4px 0; }
.studio .ais-plate {
  display: grid;
  gap: 3px;
  min-width: min-content;
}
.studio .ais-corner,
.studio .ais-colhead,
.studio .ais-rowhead {
  font-size: 10px;
  color: var(--ink-soft, #5d6675);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.studio .ais-rowhead { padding-right: 4px; }
.studio .ais-well {
  width: 38px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--win-border, rgba(0, 0, 0, 0.1));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.1s ease;
  position: relative;
}
.studio .ais-well.empty { background: var(--win-body-bg, #f4f5f8) !important; cursor: default; }
.studio .ais-well.filled:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 2; }
.studio .ais-well-lbl {
  font-size: 8.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  overflow: hidden; max-width: 36px; text-align: center;
}

/* ---- Role legend / paint tool ------------------------------------------ */
.studio .ais-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--win-border, rgba(0, 0, 0, 0.12));
  background: transparent; font-size: 12px; text-transform: capitalize;
}
.studio .ais-legend-item.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.studio .ais-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---- Canonical table ---------------------------------------------------- */
.studio .ais-table th { white-space: nowrap; position: sticky; top: 0; }
.studio .ais-role-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
}
.studio .ais-row-flag { background: color-mix(in srgb, var(--st-warn) 9%, transparent); }

/* ---- Curve params ------------------------------------------------------- */
.studio .ais-fig { display: flex; justify-content: center; padding: 6px 0; }
.studio .ais-params { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.studio .ais-param {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 5px 10px; border-radius: 8px;
  background: var(--win-body-bg, #f4f5f8);
  border: 1px solid var(--win-border, rgba(0, 0, 0, 0.08));
}
.studio .ais-param-k { font-size: 10px; color: var(--ink-soft, #5d6675); }
.studio .ais-param-v { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- QC flag summary ---------------------------------------------------- */
.studio .ais-flagsum { display: flex; flex-wrap: wrap; gap: 10px; }
.studio .ais-flagcard {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--win-border, rgba(0, 0, 0, 0.08));
  background: var(--win-body-bg, #f4f5f8);
}
.studio .ais-flagcard.bad { border-left: 3px solid var(--st-bad); }
.studio .ais-flagcard.warn { border-left: 3px solid var(--st-warn); }
.studio .ais-flagcard.info { border-left: 3px solid var(--st-ai); }
.studio .ais-flagcard strong { font-size: 16px; }

/* ---- Templates ---------------------------------------------------------- */
.studio .ais-tpl-list { display: flex; flex-direction: column; gap: 8px; }
.studio .ais-tpl {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--win-border, rgba(0, 0, 0, 0.08));
  background: var(--win-body-bg, #f4f5f8);
}