/* Universal Value/Formula input — component styles.
 *
 * Scoped to `.universal-value-input` so they don't bleed elsewhere.
 * Three rules + a Tabler btn-close icon override:
 *
 *   1. focus-within sync — the `input-group-flat` form-control gets
 *      a primary border on focus by default; extend that to the
 *      attached chevron prefix so the whole group reads as one.
 *   2. formula-toggle ring — the active formula toggle (ƒ) gets a
 *      tiny primary outline so the "this mode is on" affordance is
 *      visible even when the input is unfocused.
 *   3. tiny labels — the help-rail section labels and autocomplete
 *      kind chips need a 0.7rem / 0.75rem size that Tabler's
 *      `.small` typography utility doesn't expose.
 *   4. .uvi-btn-close-minimize — overrides Tabler's `.btn-close` mask
 *      (`--tblr-btn-close-bg`) with the "arrows-diagonal-minimize-2"
 *      SVG so the modal's collapse button paints a minimize icon
 *      instead of the default X.
 */

.universal-value-input .input-group-flat:focus-within > .btn {
  border-color: var(--tblr-primary);
}

.universal-value-input [data-universal-value-input-target="formulaToggle"].is-active {
  border: 1px solid var(--tblr-primary);
  border-radius: var(--tblr-border-radius);
  padding: 0.1rem 0.25rem;
  margin: -0.1rem -0.25rem;
}

.uvi-help-section-label {
  font-size: 0.7rem;
}

.uvi-ac-kind {
  font-size: 0.75rem;
}

/* Tabler 1.4 paints `.btn-close` via CSS `mask` (not background-
 * image), with the mask URL stored in `--tblr-btn-close-bg`. We
 * swap that variable + bump the mask size to 1em so the
 * arrows-diagonal-minimize SVG renders at the same visual weight as
 * the original X. The viewBox is tightened to "4 4 16 16" because
 * the path coordinates run from 4 to 20 in a 24x24 source — keeps
 * the strokes filling the 16x16 box rather than swimming with
 * empty padding. */
.btn-close.uvi-btn-close-minimize {
  --tblr-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 16 16' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 10h-4v-4'/%3E%3Cpath d='M20 4l-6 6'/%3E%3Cpath d='M6 14h4v4'/%3E%3Cpath d='M10 14l-6 6'/%3E%3C/svg%3E");
  -webkit-mask-size: 1em;
          mask-size: 1em;
}

/* ---------- CodeMirror formula editor ---------- *
 * The CM6 modal editor renders @ns.key references as atomic badge
 * widgets and colors operators / keywords / strings / numbers /
 * function calls. Theme-side font + border is set in the CM6 theme
 * extension; the rules below own visual identity (badge shape,
 * token colors, host container reset). */

.universal-value-input .cm-formula-host {
  /* The host div replaces the textarea visually — same border /
   * background contract as `.form-control`, so the modal layout
   * keeps working with the editor inside. */
  border-radius: var(--tblr-border-radius);
}

/* Inline CM6 host — slots into `.input-group-flat` between the
 * (hidden in formula mode) chip toggle and the icon cluster. The
 * host carries the visible `.form-control` border on top / bottom /
 * left only — the icon-cluster carries the right border so the two
 * meet flush. Left corners are rounded because in formula mode the
 * structural `:first-child` is the hidden `<input>` and the chip
 * toggle is also hidden, making the host the visible leftmost
 * item; Bootstrap's input-group radius rule strips the radius
 * (`:not(:first-child)`).
 *
 * Selector specificity: `.universal-value-input .input-group >
 * .cm-formula-inline-host` is (0,3,0) — strictly higher than
 * Bootstrap's `.input-group > :not(:first-child):not(.dropdown-menu)`
 * (also 0,3,0 but earlier in the cascade) and Bootstrap's
 * `.input-group-flat .form-control:not(:first-child)` (0,3,0). The
 * tie-break is source order: this rule is loaded AFTER Tabler via
 * `design_system_stylesheets` so it wins without `!important`. */
.universal-value-input .input-group > .cm-formula-inline-host {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: var(--tblr-bg-surface, #fff);
  border-top:    var(--tblr-border-width, 1px) solid var(--tblr-border-color, #dadfe5);
  border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #dadfe5);
  border-left:   var(--tblr-border-width, 1px) solid var(--tblr-border-color, #dadfe5);
  border-right:  0;
  border-top-left-radius:    var(--tblr-border-radius, 0.25rem);
  border-bottom-left-radius: var(--tblr-border-radius, 0.25rem);
}

.universal-value-input .input-group-flat:focus-within > .cm-formula-inline-host {
  border-color: var(--tblr-primary, #4263eb);
}

.universal-value-input .cm-formula-inline-host > .cm-editor {
  width: 100%;
}

/* Badge pill — Notion-style. Background is the Tabler "-lt" tint of
 * the reference's inferred kind (date / number / text / dictionary
 * / …); dot is the solid color. Layout is inline-baseline so the
 * badge sits on the textline like any other token. */
.cm-formula-badge {
  display: inline-block;
  padding: 0.05em 0.5em;
  margin: 0 0.05em;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
  background: var(--tblr-secondary-lt, #f4f5f7);
  color: var(--tblr-body-color, #1d273b);
  border: 1px solid transparent;
  cursor: default;
  user-select: all; /* delete-as-one-unit affordance */
}

/* Per-kind tints. Tabler ships `--tblr-<color>-lt` (light bg) and
 * `--tblr-<color>` (solid) — we use the lt for the bg only. The
 * label always renders in body color so contrast stays readable on
 * the light tint; identity is communicated by the dot + bg. */
.cm-formula-badge--azure     { background: var(--tblr-azure-lt); }
.cm-formula-badge--cyan      { background: var(--tblr-cyan-lt); }
.cm-formula-badge--green     { background: var(--tblr-green-lt); }
.cm-formula-badge--purple    { background: var(--tblr-purple-lt); }
.cm-formula-badge--orange    { background: var(--tblr-orange-lt); }
.cm-formula-badge--yellow    { background: var(--tblr-yellow-lt); }
.cm-formula-badge--indigo    { background: var(--tblr-indigo-lt); }
.cm-formula-badge--teal      { background: var(--tblr-teal-lt); }
.cm-formula-badge--secondary { background: var(--tblr-secondary-lt); }

/* Token colors — operators slightly muted, keywords/strings/numbers
 * keyed off Tabler colors so they stay readable against both light
 * and dark theme bases. */
.cm-formula-op       { color: var(--tblr-secondary, #6c757d); }
.cm-formula-keyword  { color: var(--tblr-purple,    #ae3ec9); font-weight: 600; }
.cm-formula-string   { color: var(--tblr-green,     #2fb344); }
.cm-formula-number   { color: var(--tblr-orange,    #f76707); }
.cm-formula-fn       { color: var(--tblr-cyan,      #17a2b8); font-weight: 500; }
.cm-formula-comment  { color: var(--tblr-secondary, #6c757d); font-style: italic; }

/* CM6 host — strip the editor's ambient "I am a textarea"
 * affordance in favor of Tabler form-control look-and-feel. The
 * actual border + radius come from the theme extension to keep
 * focus-ring behavior in JS land. */
.universal-value-input .cm-editor.cm-focused {
  outline: none;
}

.universal-value-input .cm-editor {
  width: 100%;
}

/* Z-scale for CM6 popups (autocomplete + completion-info pane).
 * Sourced as Bootstrap's `--tblr-zindex-modal` (1055) + headroom.
 * Defined once and referenced from both popup classes so a future
 * Bootstrap z-scale bump only needs to touch this var. */
:root {
  --uvi-popup-z: 1080;
}

/* CM6 autocomplete popup — re-themed to match the Tabler dropdown
 * the inline input renders, so the two surfaces feel like one
 * widget. Selectors target CM6's tooltip-autocomplete tree
 * (`.cm-tooltip.cm-tooltip-autocomplete.uvi-completion > ul > li`) and override
 * the ambient CM6 defaults (system font, light gray selection,
 * italic detail). */
.cm-tooltip.cm-tooltip-autocomplete.uvi-completion {
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: var(--tblr-border-radius, 0.25rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
  padding: 0.25rem 0;
  font-family: var(--tblr-font-monospace, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.8125rem;
  min-width: 18rem;
  z-index: var(--uvi-popup-z);
}

.cm-tooltip.cm-tooltip-autocomplete.uvi-completion > ul {
  max-height: 14rem;
  font-family: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cm-tooltip.cm-tooltip-autocomplete.uvi-completion > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.75rem;
  color: var(--tblr-body-color);
  line-height: 1.4;
}

.cm-tooltip.cm-tooltip-autocomplete.uvi-completion > ul > li[aria-selected] {
  background: var(--tblr-primary, #4263eb);
  color: #fff;
}

.cm-tooltip.cm-tooltip-autocomplete.uvi-completion > ul > li[aria-selected] .cm-completionDetail,
.cm-tooltip.cm-tooltip-autocomplete.uvi-completion > ul > li[aria-selected] .cm-completionMatchedText {
  color: rgba(255, 255, 255, 0.85);
}

.cm-tooltip-autocomplete.uvi-completion .cm-completionLabel {
  font-family: inherit;
}

.cm-tooltip-autocomplete.uvi-completion .cm-completionMatchedText {
  text-decoration: none;
  font-weight: 600;
  color: var(--tblr-primary);
}

.cm-tooltip-autocomplete.uvi-completion .cm-completionDetail {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--tblr-secondary, #6c757d);
  margin-left: auto;
  white-space: nowrap;
}

.cm-tooltip-autocomplete.uvi-completion .cm-completionIcon {
  /* Hide CM6's leading kind icon — the right-side detail chip
   * already carries the same info, and the icon glyphs read as
   * generic squares without a CM6 icon font registered. */
  display: none;
}

/* Long-form info pane (rendered on the right of a focused row when
 * the completion source provides `info`). Match the dropdown
 * surface so it doesn't look like a separate floating widget. */
.cm-tooltip.cm-completionInfo {
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: var(--tblr-border-radius, 0.25rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
  padding: 0.5rem 0.75rem;
  font-family: var(--tblr-font-sans-serif, system-ui, sans-serif);
  font-size: 0.8125rem;
  color: var(--tblr-body-color);
  max-width: 22rem;
  z-index: var(--uvi-popup-z);
}


/* Locked-inline visual cue — the controller sets `data-modal-locked`
 * on the universal-value-input root while the fullscreen formula
 * modal owns the draft. Mute the inline surface so a user who
 * clicks back into it (e.g. minimized modal, transition flash)
 * gets immediate visual feedback that input is locked. The CM6
 * readOnly compartment + input.readOnly already block input
 * programmatically; this just makes the lock visible. */
.universal-value-input[data-modal-locked] {
  opacity: 0.5;
  pointer-events: none;
}