/**
 * vanillaselect.css — Shared VanillaSelect + input-group styles
 *
 * Used by: calc2.php, login (portal.css/header.php)
 * Companion JS: compat.js (VanillaSelect)
 */

/* ---- Input-Group: VanillaSelect integration ---- */
.input-group{flex-wrap:nowrap}
.input-group>.vs-wrapper{width:auto;flex:1 1 auto;min-width:0}
.input-group>.vs-wrapper>.vs-btn{border-top-left-radius:0;border-bottom-left-radius:0}
.input-group>.vs-wrapper>.vs-dropdown{border-top-left-radius:0}
.input-group-text{min-width:42px;justify-content:center}
.input-group-text .fa,.input-group-text .fas,.input-group-text .far,.input-group-text .fab{width:1em;text-align:center}

/* ---- VanillaSelect Base ---- */
.vs-wrapper{position:relative;display:block;width:100%}
.vs-btn{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;cursor:pointer;background:var(--surface, #fff);min-height:38px;border-radius:10px;border:1px solid var(--hairline, rgba(71,75,90,.12));padding:6px 14px;font-size:13px;font-weight:500;color:var(--fg-strong, #1d1d1f);transition:border-color .15s,box-shadow .15s,background .15s}
.vs-btn:focus{border-color:var(--color-primary, #83bc41);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary, #83bc41) 15%, transparent);outline:0}
.vs-btn.form-control{display:flex;height:auto;min-height:38px;border-radius:10px}
.vs-btn-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px}
.vs-btn-content img{flex-shrink:0;vertical-align:middle}
.vs-btn .small2,.vs-btn .vs-btn-content .small2,.vs-btn br{display:none}
.vs-btn:hover{background:var(--surface-tint, #f5f5f5)}
.vs-wrapper.vs-disabled .vs-btn{background:#eee;cursor:not-allowed;opacity:0.65}
.vs-caret{display:inline-block;width:0;height:0;margin-left:auto;margin-right:0px;border-top:4px solid var(--fg-muted, #888);border-right:4px solid transparent;border-left:4px solid transparent;flex-shrink:0}

/* Material-Selector: vollständiger Text mit Umbruch */
.vs-wrapper:has(#material) .vs-btn{height:auto;min-height:34px;padding:8px 12px}
.vs-wrapper:has(#material) .vs-btn-content{white-space:normal;line-height:1.4}

/* Wicklung-Select: feste Hoehe wie andere Selects */
.vs-wrapper:has(#wicklung) .vs-btn{height:38px;min-height:38px}
.vs-wrapper:has(#wicklung) .vs-btn-content img.winding-icon{height:18px;width:auto}

/* Express-Select (Warenkorb) — :has() because VanillaSelect moves select INSIDE wrapper */
.vs-wrapper:has(.express-select) .vs-btn{white-space:normal;min-height:40px;height:auto;padding:8px 12px;line-height:1.4}
.vs-wrapper:has(.express-select) .vs-btn-content{white-space:normal;word-wrap:break-word}

/* Icons */
.vs-icon{margin-right:5px;flex-shrink:0;width:16px;text-align:center}
.vs-option i.fa{margin-right:5px;width:16px;text-align:center}

/* ---- Dropdown ---- */
.vs-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1060;background:var(--surface, #fff);border:1px solid var(--hairline, rgba(71,75,90,.12));border-radius:0 0 14px 14px;box-shadow:0 8px 24px rgba(71,75,90,.12);max-height:300px;overflow:hidden;display:flex;flex-direction:column}
.vs-search-wrap{padding:8px;border-bottom:1px solid var(--hairline, #eee)}
.vs-search{width:100%;border-radius:8px;border:1px solid var(--hairline, #ddd);padding:7px 12px;font-size:13px;outline:0;transition:border-color .15s;background:var(--surface-tint, #f5f5f5)}
.vs-search:focus{border-color:var(--color-primary, #83bc41);box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary, #83bc41) 15%, transparent);background:var(--surface, #fff)}
.vs-options{overflow-y:auto;max-height:250px}

/* ---- Options ---- */
.vs-option{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--hairline, rgba(71,75,90,.06));font-size:13px;transition:background .1s}
.vs-option:hover{background:var(--surface-tint, #f0f0f3)}
.vs-option.vs-selected{background:var(--color-primary, #83bc41);color:#fff}
.vs-option.vs-selected:hover{background:color-mix(in srgb, var(--color-primary, #83bc41) 85%, #000)}
.vs-option.vs-disabled{color:var(--fg-faint, #bbb);cursor:not-allowed;background:var(--surface-tint, #f0f0f0)}
.vs-option.vs-hidden{display:none}
.vs-option img{vertical-align:middle;margin-right:5px;border-radius:50%}
.vs-option .small2{font-size:11px;color:var(--fg-muted, #777)}
.vs-option.vs-selected .small2{color:rgba(255,255,255,.7)}

/* ---- Optgroups ---- */
.vs-optgroup{margin:0}
.vs-optgroup-label{padding:6px 12px;font-weight:700;font-size:10px;color:var(--fg-muted, #888);background:var(--surface-tint, #f0f0f0);border-bottom:1px solid var(--hairline, #ddd);text-transform:uppercase;letter-spacing:0.12em}
.vs-text{flex:1;overflow:hidden;text-overflow:ellipsis}

/* ---- Animations ---- */
.vs-wrapper.vs-open .vs-btn{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--color-primary, #83bc41);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary, #83bc41) 15%, transparent)}
.vs-dropdown{opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.vs-wrapper.vs-open .vs-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.vs-btn,.vs-option{transition:background .12s,border-color .12s,color .12s,box-shadow .12s}

/* ---- Unit Segmented Toggle ---- */
.calc-unit-seg{display:inline-flex;align-items:center;border:1px solid #dee2e6;border-radius:20px;overflow:hidden;vertical-align:middle}
.calc-unit-seg .seg-btn{padding:3px 8px;font-size:11px;cursor:pointer;background:transparent;color:#999;transition:background .15s,color .15s;line-height:1.4;user-select:none;white-space:nowrap}
.calc-unit-seg .seg-btn+.seg-btn{border-left:1px solid #dee2e6}
.calc-unit-seg .seg-btn:hover{background:#f0f0f0}
.calc-unit-seg .seg-btn.seg-active{background:#495057;color:#fff;font-weight:600}