/* src/styles/common.css */

/* 引入 Layui 核心样式 */
@import '../vendor/layui/css/layui.css';

/* 引入 FontAwesome 图标库 */
@import '../vendor/fontawesome/css/all.min.css';

/* ---------- CSS Reset ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- 工具类 ---------- */
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }

.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }

.flex { display: flex; }
.flex-center { justify-content: center; }
.flex-align-center { align-items: center; }
.flex-between { justify-content: space-between; }
.flex-column { flex-direction: column; }
.flex-1 { flex: 1; }

/* ---------- 覆盖 Layui 焦点颜色（蓝色 #409EFF） ---------- */
/* 正常状态：蓝色焦点 */
.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus {
    border-color: #409EFF !important;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

/* 输入框悬浮 */
.layui-input:hover,
.layui-textarea:hover,
.layui-select:hover {
    border-color: #409EFF !important;
}

/* 前缀图标聚焦变蓝 */
.layui-input-wrap:focus-within .layui-input-prefix i {
    color: #409EFF !important;
}
.layui-input-prefix i {
    transition: color 0.25s;
}

/* ---------- 校验失败状态：红色边框（关键！） ---------- */
/* 使用更高优先级的选择器，覆盖蓝色焦点样式 */
.layui-input.layui-form-danger:focus,
.layui-textarea.layui-form-danger:focus,
.layui-select.layui-form-danger:focus {
    border-color: #FF5722 !important;
    box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.2) !important;
}

/* 校验失败时，即使未聚焦也显示红色边框 */
.layui-input.layui-form-danger,
.layui-textarea.layui-form-danger,
.layui-select.layui-form-danger {
    border-color: #FF5722 !important;
}

/* ---------- Layui 行内提示样式覆盖 ---------- */
/* 提示文字颜色（红色） */
.layui-form-mid {
    color: #FF5722 !important;
}

/* 提示文字位置调整（在输入框下方） */
.layui-input-block .layui-form-mid {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.6;
}

/* ---------- 复选框/单选框 ---------- */
.layui-form-checked[lay-skin="primary"] i {
    border-color: #409EFF !important;
    background-color: #409EFF !important;
}

.layui-form-checkbox[lay-skin="primary"]:hover i {
    border-color: #409EFF !important;
}

.layui-form-switch.layui-form-onswitch {
    border-color: #409EFF !important;
    background-color: #409EFF !important;
}

/* ---------- 按钮 ---------- */
.layui-btn-normal {
    background-color: #409EFF !important;
}