/**
 * 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:#fff;min-height:38px}
/* Ensure flex wins over .form-control{display:block} regardless of load order */
.vs-btn.form-control{display:flex;height:auto;min-height:38px}
.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:#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 #333;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:#fff;border:1px solid rgba(0,0,0,.08);border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:300px;overflow:hidden;display:flex;flex-direction:column}
.vs-search-wrap{padding:8px;border-bottom:1px solid #eee}
.vs-search{width:100%}
.vs-options{overflow-y:auto;max-height:250px}

/* ---- Options ---- */
.vs-option{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f5f5f5}
.vs-option:hover{background:#f5f5f5}
.vs-option.vs-selected{background:#337ab7;color:#fff}
.vs-option.vs-selected:hover{background:#286090}
.vs-option.vs-disabled{color:#bbb;cursor:not-allowed;background:#f0f0f0}
.vs-option.vs-hidden{display:none}
.vs-option img{vertical-align:middle;margin-right:5px}
.vs-option .small2{font-size:11px;color:#777}
.vs-option.vs-selected .small2{color:#ccc}

/* ---- Optgroups ---- */
.vs-optgroup{margin:0}
.vs-optgroup-label{padding:6px 12px;font-weight:bold;font-size:12px;color:#555;background:#f0f0f0;border-bottom:1px solid #ddd;text-transform:uppercase;letter-spacing:0.5px}
.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}
.vs-dropdown{opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s ease;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-color 0.15s ease,border-color 0.15s ease,color 0.15s ease,box-shadow 0.15s ease}

/* ---- 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}