/* Element UI style datetimepicker */
.bootstrap-datetimepicker-widget {
    background-color: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    padding: 12px;
    width: 320px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header styles */
.bootstrap-datetimepicker-widget .datepicker-days .table-condensed thead tr:first-child th {
    padding: 8px;
    font-weight: 500;
    color: #606266;
    border: none;
}

.bootstrap-datetimepicker-widget .datepicker-days .table-condensed thead tr:first-child th:hover {
    background-color: #f5f7fa;
    border-radius: 4px;
    cursor: pointer;
}

/* Calendar grid styles */
.bootstrap-datetimepicker-widget table td {
    padding: 4px;
    border-radius: 4px;
}

.bootstrap-datetimepicker-widget table td.day {
    height: 32px;
    line-height: 32px;
    width: 32px;
    border-radius: 4px;
    color: #606266;
}

.bootstrap-datetimepicker-widget table td.day:hover {
    background-color: #f5f7fa;
    cursor: pointer;
}

.bootstrap-datetimepicker-widget table td.active {
    background-color: #409eff !important;
    color: #fff !important;
    border-radius: 4px;
}

.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #66b1ff !important;
}

.bootstrap-datetimepicker-widget table td.today {
    color: #409eff;
    font-weight: bold;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #c0c4cc;
}

/* Time picker styles */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    text-align: center;
    color: #606266;
    font-size: 14px;
}

.bootstrap-datetimepicker-widget .timepicker-hour:hover,
.bootstrap-datetimepicker-widget .timepicker-minute:hover,
.bootstrap-datetimepicker-widget .timepicker-second:hover {
    border-color: #c0c4cc;
}

/* Button styles */
.bootstrap-datetimepicker-widget .btn {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    background-color: #fff;
    color: #606266;
    transition: all .3s;
}

.bootstrap-datetimepicker-widget .btn:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

.bootstrap-datetimepicker-widget .btn-primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}

.bootstrap-datetimepicker-widget .btn-primary:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}

/* Input group styles */
.input-group.date {
    display: flex;
    width: 100%;
    position: relative;
}

.input-group.date .cve-input {
    flex: 1;
    width: calc(100% - 40px); /* 减去图标按钮的宽度 */
}

.input-group.date .cve-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    padding-right: 30px; /* 为图标留出空间 */
}

.input-group.date .input-group-addon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-left: none;
    color: #909399;
    cursor: pointer;
    transition: all .3s;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* 固定宽度 */
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 1;
}

.input-group.date .input-group-addon:hover {
    color: #409eff;
}

/* Dropdown arrow */
.input-group.date .input-group-addon .glyphicon {
    font-size: 14px;
    line-height: 1;
}

/* Date range picker specific styles */
.date-range-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range-picker .input-group-text {
    padding: 0 8px;
    color: #606266;
    background: none;
    border: none;
}

/* Today and Clear buttons */
.bootstrap-datetimepicker-widget .btn-today,
.bootstrap-datetimepicker-widget .btn-clear {
    margin: 0 4px;
}

/* Time picker arrows */
.bootstrap-datetimepicker-widget .timepicker-picker .btn {
    padding: 4px 8px;
    margin: 0 2px;
}

/* Disabled state */
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: #c0c4cc;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bootstrap-datetimepicker-widget {
        width: 280px;
    }
    
    .bootstrap-datetimepicker-widget table td.day {
        height: 28px;
        line-height: 28px;
        width: 28px;
    }
}