/* Match the app's h-sm; rsuite's own chrome is taller. */
.mc-date-range .rs-input-group,
.mc-date-range.rs-input-group {
    height: 38px;
    border-radius: 6px;
    background-color: var(--field-bg);
}

/* rsuite renders the picked range and its placeholder as plain <span> text
   inside the toggle, not a native <input> — some call sites nest this field
   in .mc-alert-modal/.mc-user-modal, both centred for their own icon/heading
   content, and without this the range text inherits that centring instead of
   reading left like every other field. */
.mc-date-range .rs-picker-toggle-value,
.mc-date-range .rs-picker-toggle-placeholder,
.mc-date-range .rs-picker-toggle-textbox {
    text-align: left;
}

.mc-date-range .rs-input {
    background-color: transparent;
    color: var(--textColor);
    font-size: 14px;
}

.mc-date-range .rs-input-group:focus-within {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}