/* ══════════════════════════════════════════════════
   Universal Form Controls — reusable across panels
   ══════════════════════════════════════════════════ */

/* ── Parameter row layout ── */
.fc-row{
  display:grid;grid-template-columns:90px 1fr;gap:6px;align-items:center;
  padding:4px 14px;min-height:28px;
}
.fc-row.three{grid-template-columns:90px 1fr 52px;}
.fc-label{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-unit-label{font-size:10px;color:var(--text-muted);text-align:center;}

/* ── Range slider ── */
.fc-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary) var(--val,0%), var(--border) var(--val,0%), var(--border) 100%);
  outline:none;cursor:pointer;margin:0;
}
.fc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--primary);border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(74,108,245,.15), 0 1px 3px rgba(0,0,0,.18);
  cursor:pointer;transition:box-shadow .12s ease;
}
.fc-slider::-webkit-slider-thumb:hover{
  box-shadow:0 0 0 3px rgba(74,108,245,.18), 0 1px 4px rgba(0,0,0,.2);
}
.fc-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;border:2px solid #fff;
  background:var(--primary);
  box-shadow:0 0 0 1px rgba(74,108,245,.15), 0 1px 3px rgba(0,0,0,.18);
  cursor:pointer;
}
.fc-slider::-moz-range-track{
  height:4px;border-radius:2px;background:var(--border);border:none;
}
.fc-slider:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:2px;}

/* ── Number input (spinner with stacked arrows) ── */
.fc-num{
  position:relative;display:flex;align-items:center;
  height:26px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-raised);overflow:hidden;
  transition:border-color var(--tr);
}
.fc-num:hover{border-color:var(--border-focus);}
.fc-num:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(74,108,245,.1);}
.fc-num input{
  width:100%;height:100%;border:none;background:none;color:var(--text);
  font-size:11px;font-family:inherit;text-align:center;padding:0 2px 0 2px;
  -moz-appearance:textfield;outline:none;min-width:0;
}
.fc-num input::-webkit-inner-spin-button,
.fc-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.fc-num-arrows{
  display:flex;flex-direction:column;width:16px;min-width:16px;
  border-left:1px solid var(--border-light);height:100%;
}
.fc-num-btn{
  display:flex;align-items:center;justify-content:center;
  flex:1;border:none;background:none;color:var(--text-muted);cursor:pointer;
  padding:0;transition:color .1s,background .1s;user-select:none;
}
.fc-num-btn:hover{color:var(--text);background:var(--bg);}
.fc-num-btn:active{background:var(--border-light);}
.fc-num-btn.inc{border-bottom:1px solid var(--border-light);}
.fc-num-btn svg{width:7px;height:7px;pointer-events:none;}
/* Disabled state — dim arrows when input is disabled */
.fc-num:has(input:disabled) .fc-num-arrows{opacity:.3;pointer-events:none;}
.fc-num input:disabled{opacity:.5;cursor:not-allowed;}

/* ── Toggle switch ── */
.fc-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.fc-toggle input{position:absolute;opacity:0;width:0;height:0;}
.fc-toggle-track{
  display:block;width:32px;height:18px;border-radius:9px;
  background:var(--border);transition:background .18s ease;position:relative;
}
.fc-toggle input:checked + .fc-toggle-track{background:var(--primary);}
.fc-toggle-thumb{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:transform .15s ease;
}
.fc-toggle input:checked + .fc-toggle-track .fc-toggle-thumb{transform:translateX(14px);}

/* ── Color picker + hex ── */
.fc-color{
  width:26px;height:26px;min-width:26px;border:1px solid var(--border);border-radius:var(--r-sm);
  cursor:pointer;padding:0;
  background:repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50%/6px 6px;
  transition:border-color var(--tr);
  -webkit-appearance:none;appearance:none;
}
.fc-color::-webkit-color-swatch-wrapper{padding:0;}
.fc-color::-webkit-color-swatch{
  border:none;border-radius:calc(var(--r-sm) - 1px);
  opacity:var(--fc-opacity, 1);
}
.fc-color::-moz-color-swatch{
  border:none;border-radius:calc(var(--r-sm) - 1px);
  opacity:var(--fc-opacity, 1);
}
.fc-color:hover{border-color:var(--border-focus);}
/* Diagonal stripes when color is "Mixed" (multiple values) */
.fc-color.mixed{
  background:repeating-linear-gradient(
    -45deg,
    #e06c75 0 3px, #61afef 3px 6px, #98c379 6px 9px, #e5c07b 9px 12px
  );
  position:relative;
}
.fc-color.mixed::-webkit-color-swatch{opacity:0;}
.fc-color.mixed::-moz-color-swatch{opacity:0;}
.fc-hex{
  font-size:11px;font-family:inherit;
  padding:4px 6px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-raised);color:var(--text);text-align:center;
  transition:border-color var(--tr);width:100%;box-sizing:border-box;
}
.fc-hex:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(74,108,245,.1);}
.fc-color-wrap{display:flex;align-items:center;gap:6px;}

/* ── Native select ── */
.fc-select{
  width:100%;height:26px;box-sizing:border-box;
  font-family:inherit;font-size:11px;color:var(--text);
  padding:0 24px 0 8px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-raised);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23667085' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  cursor:pointer;transition:border-color var(--tr);outline:none;
}
.fc-select:hover{border-color:var(--border-focus);}
.fc-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(74,108,245,.1);}

/* ── Custom dropdown (based on optimizer pattern) ── */
.fc-dropdown-wrap{position:relative;flex:1;}
.fc-dropdown-btn{
  display:flex;align-items:center;
  width:100%;height:26px;box-sizing:border-box;
  text-align:left;font-family:inherit;font-size:11px;
  padding:0 24px 0 8px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-raised);color:var(--text);
  cursor:pointer;transition:border-color var(--tr),box-shadow var(--tr);
  position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fc-dropdown-btn::after{
  content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:3.5px solid var(--text-muted);transition:border-color var(--tr);
}
.fc-dropdown-btn:hover{border-color:var(--border-focus);}
.fc-dropdown-btn:hover::after{border-top-color:var(--text-secondary);}
.fc-dropdown-menu{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:120;
  margin-top:4px;padding:4px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh);max-height:240px;overflow-y:auto;
}
.fc-dropdown-menu.open{display:block;}
.fc-dropdown-menu.above{top:auto;bottom:100%;margin-top:0;margin-bottom:4px;}
/* .fc-dropdown-item base → components.css */

/* ── Text input ── */
.fc-text-wrap{
  height:26px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-raised);overflow:hidden;
  transition:border-color var(--tr);display:flex;
}
.fc-text-wrap:hover{border-color:var(--border-focus);}
.fc-text-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px rgba(74,108,245,.1);}
.fc-text{
  width:100%;height:100%;border:none;background:none;color:var(--text);
  font-size:11px;font-family:inherit;padding:0 8px;outline:none;
}
/* .fc-dropdown-sep base → components.css */
.fc-dropdown-sep{margin:3px 0;}

/* ── Color swatch (small input[type=color]) ── */
.fc-color-swatch{
  width:26px;height:26px;padding:2px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-raised);cursor:pointer;flex-shrink:0;
}
.fc-color-swatch:hover{border-color:var(--border-focus);}
.fc-color-swatch::-webkit-color-swatch-wrapper{padding:0;}
.fc-color-swatch::-webkit-color-swatch{border:none;border-radius:2px;}

/* ── Section group (for grouping rows visually) ── */
.fc-group{
  border-top:1px solid var(--border-light);
  padding-top:6px;margin-top:2px;
}
.fc-group:first-child{border-top:none;padding-top:0;margin-top:0;}

/* ── Chip toggle group ── */
.fc-chip-group{display:flex;gap:4px;flex:1;}
.fc-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:4px 12px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface-raised);color:var(--text-secondary);
  font-size:11px;font-weight:500;cursor:pointer;transition:var(--tr);
  white-space:nowrap;flex:1;
}
.fc-chip:hover{background:var(--bg);color:var(--text);border-color:var(--border-focus);}
.fc-chip.active{background:var(--primary-bg);color:var(--primary);border-color:var(--primary-light);font-weight:600;}