/* ═══════════════════════════════════════════════
   Formulogic – Form Styles
   Input controls, selects, validation, formula builder
   Laboratory / Scientific Theme
   ═══════════════════════════════════════════════ */

/* ── Base Controls ────────────────────── */
.form-control,
.form-select {
    background: var(--fl-input-bg);
    border-color: var(--fl-input-border);
    color: var(--fl-text);
    border-radius: var(--fl-radius-sm);
    transition: border-color var(--fl-transition), box-shadow var(--fl-transition);
}

.form-control:focus,
.form-select:focus {
    background: var(--fl-input-bg);
    border-color: var(--fl-accent);
    box-shadow: 0 0 0 .2rem var(--fl-accent-glow), 0 0 12px var(--fl-accent-glow);
    color: var(--fl-text);
}

.form-control::placeholder {
    color: var(--fl-muted);
    opacity: .6;
}

/* ── Select option visibility fix ────── */
.form-select option,
select.form-control option,
select.form-select-sm option {
    background: var(--fl-input-bg);
    color: var(--fl-text);
}

.form-select option:checked,
select option:checked {
    background: var(--fl-accent);
    color: #fff;
}

/* Multi-select (Bahan picker) */
select[multiple].form-select,
select[multiple].form-select-sm {
    background: var(--fl-input-bg);
    color: var(--fl-text);
    min-height: 60px;
}

select[multiple].form-select option {
    padding: 4px 8px;
    color: var(--fl-text);
}

.proc-material-select {
    color: var(--fl-text) !important;
    background: var(--fl-input-bg) !important;
}

.form-label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--fl-muted);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: .75rem;
}

/* ── Validation ───────────────────────── */
.form-control.is-invalid {
    border-color: var(--fl-danger);
    box-shadow: 0 0 0 .15rem rgba(248, 113, 113, .2);
}

.invalid-feedback {
    font-size: .8rem;
}

/* ── Formula Builder ──────────────────── */
.formula-item-row {
    background: var(--fl-surface-hover);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    transition: background var(--fl-transition), border-color var(--fl-transition), box-shadow var(--fl-transition);
    animation: fadeInUp .25s ease-out;
    position: relative;
}

.formula-item-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--fl-accent);
    border-radius: 3px 0 0 3px;
    opacity: 0;
    transition: opacity var(--fl-transition);
}

.formula-item-row:hover {
    background: var(--fl-surface);
    border-color: var(--fl-accent-subtle);
    box-shadow: 0 0 12px var(--fl-accent-glow);
}

.formula-item-row:hover::before {
    opacity: 1;
}

.formula-item-row .btn-remove {
    opacity: .5;
    transition: opacity var(--fl-transition), color var(--fl-transition);
}

.formula-item-row:hover .btn-remove {
    opacity: 1;
}

/* ── Cost Summary Bar ─────────────────── */
.cost-summary-bar {
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    padding: 1rem 1.5rem;
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -4px 20px var(--fl-accent-glow);
}

.cost-summary-bar .hpp-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace, 'Inter';
    color: var(--fl-accent);
}

/* ── Search Bar ───────────────────────── */
.nex-search {
    position: relative;
}

.nex-search .bi-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fl-muted);
    pointer-events: none;
}

.nex-search input {
    padding-left: 2.5rem;
}