/* ==================== Cost Basis Reducer Tab Styles ==================== */

/* Compact Input Groups with Gradient Labels */
.calc-input-label-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    border: none;
    min-width: 90px;
    justify-content: center;
}

.calc-slider-config-label {
    background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border: none;
    min-width: 50px;
    justify-content: center;
}

.input-group-sm .form-control {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
}

.input-group-sm .btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.input-group-sm .form-select {
    font-size: 0.875rem;
    padding: 0.375rem 0.5rem;
    font-weight: 500;
}

/* Readonly input styling */
.input-group .form-control:read-only {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

/* Compact spacing utilities */
.calc-mb-2, .mb-2 {
    margin-bottom: 0.5rem !important;
}

/* Section Divider */
.calc-section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #dee2e6, transparent);
    margin: 0.75rem 0;
}

/* Compact form labels */
.calc-form-label {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: #495057;
}

/* Hover effects for input groups */
.input-group:hover .calc-input-label-gradient {
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.input-group:hover .calc-slider-config-label {
    box-shadow: 0 2px 4px rgba(72, 198, 239, 0.3);
}

/* Input Mode Tab Buttons */
.calc-mode-buttons {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    overflow: hidden;
}

.calc-mode-buttons .btn {
    border-radius: 0;
    font-weight: 600;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.calc-mode-buttons .btn:first-of-type {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.calc-mode-buttons .btn:last-of-type {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.calc-mode-buttons .btn-check:checked + .btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calc-mode-buttons .btn-check:not(:checked) + .btn:hover {
    background-color: #e9ecef;
    transform: translateY(-1px);
}

.calc-mode-buttons .btn i {
    margin-right: 0.25rem;
}

/* Slider Configuration Inputs */
.calc-form-label-sm {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* Shares to Buy Slider */
.calc-shares-slider-row,
.calc-reduction-slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.calc-shares-label,
.shares-label {
    font-weight: 600;
    color: #495057;
    font-size: 1rem;
}

.calc-slider-section {
    flex: 1;
}

.calc-slider-value-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 100px;
}

.calc-slider-value-display .calc-form-control {
    width: 70px;
    text-align: center;
    padding: 0.375rem 0.5rem;
    font-weight: 600;
    border: 2px solid #dee2e6;
}

.calc-reduction-label {
    font-weight: 600;
    color: #495057;
    font-size: 1rem;
}

/* Modern Slider Styles */
.calc-modern-slider {
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--val) - var(--min)) / var(--range));
    --sx: calc(0.5 * 1.5em + var(--ratio) * (100% - 1.5em));

    width: 100%;
    height: 1.5em;
    margin: 0;
    padding: 0;
    background: transparent;
    font: 1em/1 arial, sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.calc-modern-slider:focus {
    outline: none;
}

/* Webkit (Chrome/Safari) Slider Track */
.calc-modern-slider::-webkit-slider-runnable-track {
    box-sizing: border-box;
    border: none;
    width: 100%;
    height: 0.5em;
    background: linear-gradient(#667eea, #764ba2) 0 / var(--sx) 100% no-repeat #e9ecef;
    border-radius: 0.25em;
}

.calc-modern-slider::-webkit-slider-thumb {
    margin-top: -0.5em;
    box-sizing: border-box;
    border: none;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    -webkit-appearance: none;
}

/* Firefox Slider Track */
.calc-modern-slider::-moz-range-track {
    box-sizing: border-box;
    border: none;
    width: 100%;
    height: 0.5em;
    background: #e9ecef;
    border-radius: 0.25em;
}

.calc-modern-slider::-moz-range-progress {
    height: 0.5em;
    background: linear-gradient(#667eea, #764ba2);
    border-radius: 0.25em;
}

.calc-modern-slider::-moz-range-thumb {
    box-sizing: border-box;
    border: none;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    cursor: pointer;
}

/* Modern Slider Form with CSS Variables */
.calc-modern-slider-form {
    --k: calc((var(--val) - var(--min)) / (var(--max) - var(--min)));
    --pos: calc(1rem + var(--k) * (100% - 2rem));
    display: grid;
    grid-gap: 0.5em;
    width: 100%;
    filter: saturate(var(--hl, 0.8));
    transition: filter 0.3s ease-out;
}

.calc-modern-slider-form:focus-within,
.calc-modern-slider-form:hover {
    --hl: 1;
}

/* Updated Modern Slider with Gradient Fill */
.calc-modern-slider-form .calc-modern-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 2.25em;
    border-radius: 1.125em;
    box-shadow: 0 -1px #eaeaea, 0 1px #fff, inset 0 2px 6px rgba(0, 0, 0, 0.1);
    background: linear-gradient(#c3c3c3, #f1f1f1);
    cursor: pointer;
    outline: none;
}

.calc-modern-slider-form .calc-modern-slider::-webkit-slider-container {
    margin: 0.375em;
    height: 1.5em;
    border-radius: 0.75em;
    box-shadow: inset 0 1px 4px #8c8c8c;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) 0 / var(--pos) no-repeat,
                linear-gradient(#efefef, #c9c9c9);
}

.calc-modern-slider-form .calc-modern-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    border: solid 0.375em transparent;
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    box-shadow: 0 2px 5px #7d7d7d;
    background: linear-gradient(#c5c5c5, whitesmoke) padding-box,
                linear-gradient(#fbfbfb, #c2c2c2) border-box;
    cursor: ew-resize;
}

.calc-modern-slider-form .calc-modern-slider::-moz-range-track {
    margin: 0.375em;
    height: 1.5em;
    border-radius: 0.75em;
    box-shadow: inset 0 1px 4px #8c8c8c;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) 0 / var(--pos) no-repeat,
                linear-gradient(#efefef, #c9c9c9);
}

.calc-modern-slider-form .calc-modern-slider::-moz-range-thumb {
    box-sizing: border-box;
    border: solid 0.375em transparent;
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    box-shadow: 0 2px 5px #7d7d7d;
    background: linear-gradient(#c5c5c5, whitesmoke) padding-box,
                linear-gradient(#fbfbfb, #c2c2c2) border-box;
    cursor: ew-resize;
}

/* Shares slider row - slider and input on same row */
.calc-shares-slider-row, .shares-slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calc-slider-section, .slider-section {
    flex: 1;
    min-width: 0;
}

.calc-slider-value-display, .slider-value-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.calc-slider-value-display .calc-form-control,
.slider-value-display .calc-form-control {
    width: 100px;
    text-align: center;
    font-weight: 600;
    font-size: 1.125rem;
    border: 2px solid #dee2e6;
}

/* Disabled slider styling */
.calc-slider-value-display .calc-form-control:disabled,
.slider-value-display .calc-form-control:disabled {
    background-color: #e9ecef;
    opacity: 0.6;
    cursor: not-allowed;
}

.calc-slider-value-display .calc-form-control:disabled + .calc-shares-label,
.slider-value-display .calc-form-control:disabled + .shares-label {
    opacity: 0.6;
    color: #6c757d;
}

.calc-modern-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.calc-slider-value-display .calc-shares-label,
.slider-value-display .shares-label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calc-datalist {
    display: grid;
    grid-row: 1;
    grid-template-columns: 3em 1fr 3em;
    place-content: end center;
    margin: 0 1rem - 1.5em;
    color: #bababa;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
}

.calc-datalist::after {
    place-self: end center;
    margin-bottom: 3px;
    width: min(12em, 100%);
    min-height: 0.5em;
    grid-area: 1 / 2;
    background: linear-gradient(90deg, transparent 2px, #dee2e6 0) -1px / 1em round;
    clip-path: polygon(0 calc(100% - 1px), 0 100%, 100% 100%, 100% 0);
    content: "";
}

/* Slider Container (Legacy) */
.calc-slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calc-slider-container .calc-form-range {
    flex-grow: 1;
}

.calc-slider-container .calc-form-control {
    width: 100px;
    text-align: center;
}

/* CSV Input Textarea */
.calc-csv-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    resize: vertical;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.calc-csv-input:focus {
    border-color: #667eea;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.15);
}

.calc-csv-input::placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Number inputs */
.calc-number-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.calc-number-input:focus {
    color: #212529;
    background-color: #fff;
    border-color: #667eea;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.15);
}

/* Active Badge Styling for Selected Ticker */
.calc-ticker-badge.active {
    border: 2px solid #0d6efd;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.25);
    font-weight: 700;
}

.calc-ticker-badge.active i {
    color: #0d6efd;
    margin-right: 0.25rem;
}

/* Results Header Ticker Badge */
#costBasisResultsHeader .calc-ticker-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

/* Saved Tickers - Delete Icon & Wrapper Styles */
.ticker-badge-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

#costBasisSavedTickers .calc-ticker-badge {
    flex: 1;
    text-align: center;
    min-width: 90px;
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.delete-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.delete-icon:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
    color: #dc3545 !important;     /* Bootstrap danger red */
}

/* Responsive Design */
@media (max-width: 768px) {
    .calc-slider-container {
        flex-direction: column;
        align-items: stretch;
    }

    .calc-slider-container .calc-form-control {
        width: 100%;
    }
}