.dash-bootstrap .form-group > div {
     display: block !important;
}
 .dash-bootstrap.form-group > div {
     display: block !important;
}

/* ===== DASH 4 THEME VARIABLE OVERRIDES ===== */
/* Map Dash 4 design tokens to pfolio brand / Bootstrap Flatly values */
/* This is the cleanest approach: Dash 4 components use these variables */
/* internally, so overriding them avoids specificity fights. */

:root {
    --Dash-Stroke-Strong: #CED4DA;
    --Dash-Fill-Interactive-Strong: #264653;
    --Dash-Fill-Inverse-Strong: #fff;
    --Dash-Text-Disabled: #95a5a6;
    --Dash-Text-Strong: #1F2F36;
    --Dash-Spacing: 4px;
}

/* ===== DATE PICKER (Dash 4) ===== */

.dash-datepicker-input-wrapper {
    height: calc(1.5em + 0.75rem + 2px);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    max-width: 100%;
}

.dash-datepicker {
    max-width: 100%;
}

.dash-datepicker-input {
    height: auto;
    font-size: 0.9375rem;
    text-align: center;
    color: #1F2F36;
}

.dash-datepicker-input::placeholder {
    color: #95a5a6;
}

.dash-datepicker-input:focus {
    outline: none;
}

.dash-datepicker-input-wrapper:focus-within {
    border-color: #264653;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(38, 70, 83, 0.25);
}

.dash-datepicker-input-wrapper:has(:focus-visible) {
    outline: none;
}

.dash-datepicker-input-wrapper-disabled {
    background-color: #F9F9F9;
    opacity: 1;
}

.dash-datepicker-input-wrapper-disabled .dash-datepicker-input {
    background-color: #F9F9F9;
    font-style: normal;
    cursor: default;
}

.dash-datepicker-content {
    background: #fff;
    border-radius: 0.3rem;
}

/* ===== DROPDOWN (Dash 4) ===== */

.dash-dropdown {
    height: calc(1.5em + 0.75rem + 3.5px);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
}

.dash-dropdown:focus {
    border-color: #264653;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(38, 70, 83, 0.25);
}

.dash-dropdown:disabled {
    background-color: #F9F9F9;
    background: #F9F9F9;
    opacity: 1;
}

.dash-dropdown-value {
    color: #1F2F36;
}

.dash-dropdown-placeholder {
    color: #95a5a6;
}

/* Inherit border-radius from wrapper inline styles (for dropdown+button combos) */
.dash-dropdown-wrapper[style*="border-top-right-radius: 0"] .dash-dropdown,
.dash-dropdown-wrapper[style*="border-top-right-radius:0"] .dash-dropdown {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dash-dropdown-content {
    border-radius: 0.375rem;
    box-shadow: none;
    min-width: var(--radix-popover-trigger-width);
    max-width: var(--radix-popover-trigger-width);
}

.dash-dropdown-option {
    color: #7b8a8b !important;
    background: #fff !important;
    height: calc(1.5em + 0.75rem) !important;
    overflow: hidden;
}

.dash-options-list-option-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

.dash-dropdown-option:has(input:checked) {
    font-weight: 600;
}

.dash-dropdown-option:focus,
.dash-dropdown-option:focus-visible,
.dash-dropdown-option:focus-within {
    background: #fff !important;
    color: #7b8a8b !important;
    outline: none;
}

.dash-dropdown-option:hover {
    background-color: rgba(44, 62, 80, 0.1) !important;
    color: #7b8a8b !important;
}

/* ===== SLIDER ===== */

 .dash-bootstrap .rc-slider {
     height: 0.5rem;
     padding: 0;
}

 .dash-bootstrap .rc-slider-handle {
     border: 0;
     width: 1rem;
     height: 1rem;
     margin-top: calc( (0.5rem - 1rem) / 2);
     margin-left: -0.5rem;
     background-color: #2c3e50;
     border-radius: 1rem;
     transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
 @media (prefers-reduced-motion: reduce) {
     .dash-bootstrap .rc-slider-handle {
         transition: none;
    }
}
 .dash-bootstrap .rc-slider-handle:focus {
     outline: 0;
     box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}
 .dash-bootstrap .rc-slider-rail {
     background-color: #dee2e6;
     height: 0.5rem;
     border-radius: 1rem;
}
 .dash-bootstrap .rc-slider-track {
     background-color: #808b96;
     height: 0.5rem;
     border-radius: 1rem;
}
 .dash-bootstrap .rc-slider-step {
     height: 0.5rem;
}
 .dash-bootstrap .rc-slider-dot {
     border: 0;
     background-color: #dee2e6;
     bottom: calc( (0.5rem - 1rem) / 2 + 2px);
     margin-left: -0.5rem;
     height: calc(1rem - 4px);
     width: calc(1rem - 4px);
}
 .dash-bootstrap .rc-slider-dot.rc-slider-dot-active {
     background-color: #808b96;
}
 .dash-bootstrap .rc-slider-mark-text {
     color: #95a5a6;
}
 .dash-bootstrap .rc-slider-mark-text.rc-slider-mark-text-active {
     color: #343a40;
}

/* ===== FORM ===== */

 .dash-bootstrap .form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
     opacity: 1.0;
}
