/* Velorex Essentials form controls: dropdowns, number steppers and colour pickers that follow
   the tool's theme. Load after the tool's app.css. Token names differ between tools, so each
   value falls back across them. */
:root{--vx-c-text:var(--text,var(--ink,#edf3ff));--vx-c-field:var(--bg,#070b14);--vx-c-panel:var(--panel,#111827);--vx-c-raised:var(--raised,var(--raise,#172238));--vx-c-line:var(--line,#273349);--vx-c-muted:var(--muted,#a4b1c8);--vx-c-focus:var(--focus,var(--accent,#20c7f7))}

/* Dropdowns: themed field, own chevron, themed option list */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background-color:var(--vx-c-field);color:var(--vx-c-text);border:1px solid var(--vx-c-line);border-radius:8px;padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2379d7ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;cursor:pointer;transition:border-color .18s,background-color .18s}
:root[data-theme=light] select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231551ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
select:not([multiple]):not([size]):hover:enabled{border-color:color-mix(in srgb,var(--vx-c-focus) 55%,var(--vx-c-line))}
select:disabled{opacity:.5;cursor:not-allowed}
select::-ms-expand{display:none}
select option,select optgroup{background-color:var(--vx-c-panel);color:var(--vx-c-text)}
select option:checked{background-color:var(--vx-c-raised)}
select option:disabled{color:var(--vx-c-muted)}

/* Number inputs: hide the browser's tiny arrows; .vx-stepper adds themed - and + buttons */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.vx-stepper{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--vx-c-line);border-radius:8px;background:var(--vx-c-field);overflow:hidden;transition:border-color .18s}
.vx-stepper:focus-within{border-color:var(--vx-c-focus);box-shadow:0 0 0 1px var(--vx-c-focus)}
.vx-stepper>input[type=number]{flex:1;min-width:0;width:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none}
.vx-stepper>button{flex:none;width:34px;min-width:34px;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--vx-c-panel)!important;color:var(--vx-c-text)!important;font:600 16px/1 system-ui,sans-serif;display:grid;place-items:center;cursor:pointer;transition:background-color .15s,color .15s;transform:none!important}
.vx-stepper>button:first-of-type{order:-1;border-right:1px solid var(--vx-c-line)!important}
.vx-stepper>button:last-of-type{border-left:1px solid var(--vx-c-line)!important}
.vx-stepper>button:hover:enabled{background:var(--vx-c-raised)!important;color:var(--vx-c-focus)!important}
.vx-stepper>button:active:enabled{background:color-mix(in srgb,var(--vx-c-focus) 18%,var(--vx-c-panel))!important}
.vx-stepper>button:disabled{opacity:.4;cursor:not-allowed}

/* Colour pickers and checkboxes */
input[type=color]{background:var(--vx-c-field);border:1px solid var(--vx-c-line);border-radius:8px;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--vx-c-focus)}
input[type=file]::file-selector-button{border:1px solid var(--vx-c-line);border-radius:8px;background:var(--vx-c-panel);color:var(--vx-c-text);padding:7px 12px;margin-right:10px;cursor:pointer}
@media(prefers-reduced-motion:reduce){select,.vx-stepper,.vx-stepper>button{transition:none}}