/* --- Completely Custom Adaptive Slider Design --- */
.custom-slider-container {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 20px;
    padding: 0 !important;
}

/* 1. Left Stepper (Input Number) */
.custom-stepper {
    width: 130px !important;
    flex-shrink: 0;
    position: relative;
}

/* Input Field Styling */
.custom-stepper .el-input__inner {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    font-weight: 600;
    color: var(--main-text) !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 36px !important;
    text-align: center;
    box-shadow: none !important; /* Ensure no red shadow */
}

/* Force override any hover/focus states globally that might cause red borders */
body .custom-stepper:hover .el-input__inner,
body .custom-stepper .el-input__inner:hover,
body .custom-stepper.is-active .el-input__inner,
body .custom-stepper .el-input.is-active .el-input__inner,
body .custom-stepper .el-input__inner:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important; /* Blue shadow instead of red */
}

/* Side +/- Buttons Styling */
.custom-stepper .el-input-number__decrease,
.custom-stepper .el-input-number__increase {
    width: 32px !important;
    height: 32px !important;
    top: 50% !important; /* Center vertically */
    margin-top: -16px !important; /* Half of height to perfectly center, overriding transform if it fails */
    transform: none !important; /* Remove transform as it sometimes conflicts with Element UI absolute positioning */
    background: #f8fafc !important;
    border: none !important;
    border-radius: 6px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    line-height: 32px !important; /* Ensure icon vertical alignment */
}

.custom-stepper .el-input-number__decrease {
    left: 3px !important;
    border-right: 1px solid transparent !important; /* Reset default Element UI borders */
}

.custom-stepper .el-input-number__increase {
    right: 3px !important;
    border-left: 1px solid transparent !important; /* Reset default Element UI borders */
}

/* Force icon to center within the +/- buttons */
.custom-stepper .el-input-number__decrease i,
.custom-stepper .el-input-number__increase i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.custom-stepper .el-input-number__decrease:hover,
.custom-stepper .el-input-number__increase:hover {
    color: var(--primary-color) !important;
    background: #eff6ff !important;
}

/* 2. Middle Slider (Flexible) */
.custom-slider {
    flex: 1 !important;
    min-width: 0;
    margin: 0 !important;
}

.custom-slider .el-slider__runway {
    height: 8px !important;
    border-radius: 4px !important;
    background-color: #e5ebf3 !important;
    margin: 15px 0 !important;
}

.custom-slider .el-slider__bar {
    height: 8px !important;
    border-radius: 4px !important;
    background: var(--primary-color) !important;
}

/* Rectangular Thumb with "|||" icon */
.custom-slider .el-slider__button {
    width: 16px !important;
    height: 28px !important; /* Slightly taller */
    border-radius: 4px !important;
    border: 1px solid #93c5fd !important;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important; /* Gradient like image */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s !important;
    position: relative;
    top: -2px !important; /* Adjust vertical alignment */
}

/* The three lines inside the thumb */
.custom-slider .el-slider__button::after {
    content: "|||";
    color: #2563eb;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: -1px;
    transform: scale(0.8);
}

.custom-slider .el-slider__button:hover,
.custom-slider .el-slider__button.dragging {
    transform: scale(1.1) !important;
    background: linear-gradient(180deg, #bfdbfe 0%, #93c5fd 100%) !important;
}

/* Force Tooltip Display Overrides */
body .el-tooltip__popper.is-dark {
    background: #fff !important; /* White background like image */
    color: #3b82f6 !important; /* Blue text */
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border: 1px solid #e2e8f0 !important;
}

/* Tooltip Arrow Color Override */
body .el-tooltip__popper.is-dark[x-placement^="top"] .popper__arrow::after {
    border-top-color: #fff !important;
}
body .el-tooltip__popper.is-dark[x-placement^="top"] .popper__arrow {
    border-top-color: #e2e8f0 !important;
}

body .el-slider__button-wrapper {
    z-index: 10 !important;
}

/* 3. Right Unit Box */
.slider-unit-box {
    display: flex;
    align-items: center; /* Align input and unit vertically */
    gap: 10px; /* Space between input and unit */
    flex-shrink: 0;
}

.slider-unit-box .harddisk-unit {
    font-size: 14px;
    color: var(--secondary-text);
    font-weight: 500;
    margin: 0 !important;
    white-space: nowrap;
}

.custom-slider .el-slider__input {
    display: none !important;
}