/**
 * 金额输入框修复样式
 * 解决金额输入框显示为两个输入框的问题
 */

/* 移动端和桌面端通用样式 - 使用更强的选择器 */
.form-row .amount-input-group,
#recordForm .amount-input-group,
.amount-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background-color: white !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 货币符号样式 */
.form-row .amount-input-group .currency-symbol,
#recordForm .amount-input-group .currency-symbol,
.amount-input-group .currency-symbol {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-weight: 600 !important;
    color: #495057 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

/* 输入框样式 */
.form-row .amount-input-group .form-control,
#recordForm .amount-input-group .form-control,
.amount-input-group .form-control {
    width: 100% !important;
    padding-left: 25px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    outline: none !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    height: 38px !important;
}

/* 修复在移动端的显示问题 */
@media (max-width: 768px) {
    .form-row .amount-input-group,
    #recordForm .amount-input-group,
    .amount-input-group {
        width: 100% !important;
        display: flex !important;
    }
    
    .form-row .amount-input-group .form-control,
    #recordForm .amount-input-group .form-control,
    .amount-input-group .form-control {
        width: 100% !important;
        flex: 1 !important;
    }
}

/* 确保在所有浏览器中的一致显示 */
.form-row .amount-input-group:focus-within,
#recordForm .amount-input-group:focus-within,
.amount-input-group:focus-within {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 修复在Safari浏览器中的问题 */
@supports (-webkit-touch-callout: none) {
    .form-row .amount-input-group,
    #recordForm .amount-input-group,
    .amount-input-group {
        display: flex !important;
    }
    
    .form-row .amount-input-group .form-control,
    #recordForm .amount-input-group .form-control,
    .amount-input-group .form-control {
        -webkit-appearance: none !important;
    }
}

/* 确保金额输入框不会被其他样式覆盖 */
.form-row .amount-input-group *,
#recordForm .amount-input-group *,
.amount-input-group * {
    box-sizing: border-box !important;
}

/* 移除任何可能的双重边框 */
.form-row .amount-input-group .form-control,
#recordForm .amount-input-group .form-control,
.amount-input-group .form-control {
    border: none !important;
    background-image: none !important;
}

/* 修复在iOS设备上的问题 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .form-row .amount-input-group,
    #recordForm .amount-input-group,
    .amount-input-group {
        display: flex !important;
        width: 100% !important;
    }
    
    .form-row .amount-input-group .form-control,
    #recordForm .amount-input-group .form-control,
    .amount-input-group .form-control {
        -webkit-appearance: none !important;
        width: 100% !important;
    }
}