/* ── Shared form input ──────────────────────────────────────── */

/* Padding, size and line height are matched by repr.css's .repr-overlay, which lays coloured text
   over the input character for character; change them together. About 30px tall at --cpd-text-2. */
.form-input {
    padding: var(--cpd-space-xs) var(--cpd-space-sm);
    background: var(--cpd-surface-2);
    border: 1px solid var(--cpd-border-strong);
    border-radius: var(--cpd-radius-sm);
    color: var(--cpd-text);
    font-size: var(--cpd-text-2);
    line-height: 1.4;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--cpd-gold);
    background: var(--cpd-surface-3);
    box-shadow: 0 0 0 2px var(--cpd-gold-ring);
}

.form-input.monospace {
    font-family: var(--cpd-font-mono);
    letter-spacing: -0.02em;
}

.dark-dropdown option {
    background-color: var(--cpd-surface-raised);
    color: var(--cpd-text);
}

/* ── Detail row (NotionalInput, PercentInput, DateOnlyInput, Instrument's type and its link, …) ──
   One field's control when it is more than one element (a number and its unit). It lays out the
   parts of one control, never sibling fields. The field's label sits above it (json-component.css),
   so it adds no space of its own above. */

.property-detail-row {
    display: flex;
    align-items: center;
    gap: var(--cpd-space-xs);
}

.detail-spin {
    width: 6rem;
}

.detail-select {
    min-width: 5rem;
}

.detail-suffix {
    color: rgba(var(--cpd-contrast-rgb), calc(0.5 * var(--cpd-text-alpha-scale)));
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ── A label beside its input (InputNumberDecimal, InputNumberPercentage in Components/Inputs) ──
   Not used in a JSON editor, whose fields are JsonField (json-component.css). */

.input-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 1 auto;
    min-width: fit-content;
}

.input-field > label {
    color: var(--cpd-text);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* .btn-toggle-details is now a MudButton (CustomPeriodsInput/AccrualRuleInput/CurvePillarsInput
   footer + row actions) — Mud owns the button chrome; the class name is kept only as a stable
   hook, not a style target. */

.text-input-with-fallback {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.text-input-with-fallback > .repr-overlay-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* .btn-fallback-llm is now a MudButton (TextReprInput's LLM-fallback affordance) — Mud owns the
   button chrome, including its own disabled styling; the class name is kept only as a stable
   hook, not a style target. */