/**
 * 山西永盛云saas管理系统 - 登录页专用样式文件
 * 本文件编写程序员：刘永盛
 * 开发时间：2026-03-21 09:42:15
 * 登录页面专用样式，包括小程序码悬浮组件等样式
 * @author 山西永盛网络科技开发团队
 * @version 2.0
 */

/**
 * 小程序码Popover样式
 * 用于控制小程序码弹出层的样式，包括宽度、内边距和内容样式
 */
/* 控制Popover的最大宽度 */
.popover {
    max-width: 250px !important; /* 设置Popover最大宽度为250px */
}

/* 控制Popover内容区域的内边距 */
.popover-body {
    padding: 10px !important; /* 设置内容区域内边距为10px */
}

/* 控制Popover中的图片样式 */
.popover-body img {
    width: 200px !important; /* 设置图片宽度为200px */
    height: 200px !important; /* 设置图片高度为200px */
    object-fit: contain !important; /* 保持图片比例，完整显示 */
}

/* 控制Popover中的文本样式 */
.popover-body p {
    margin: 5px 0 0 0 !important; /* 设置文本上边距为5px，其他边距为0 */
    font-size: 12px !important; /* 设置文本字体大小为12px */
}

/**
 * 小程序码悬浮按钮样式
 * 用于控制页面右下角的小程序码悬浮按钮样式
 */
/* 控制悬浮按钮的定位和层级 */
.miniprogram-widget {
    position: fixed; /* 固定定位 */
    left: 20px; /* 距离左侧20px */
    bottom: 100px; /* 距离底部100px */
    z-index: 1000; /* 设置层级为1000，确保显示在最上层 */
}

/* 控制悬浮按钮的尺寸和阴影 */
.miniprogram-widget .btn {
    width: 50px; /* 设置按钮宽度为50px */
    height: 50px; /* 设置按钮高度为50px */
    padding: 0; /* 去除内边距 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 添加阴影效果，增强立体感 */
}

/* 控制二维码图标的大小 */
.miniprogram-widget .fa-qrcode {
    font-size: 24px; /* 设置图标字体大小为24px */
}

/* 控制"小程序"文本的样式 */
.miniprogram-widget .text-center {
    font-size: 12px; /* 设置文本字体大小为12px */
    color: #6c757d; /* 设置文本颜色为灰色 */
}

/**
 * 登录表单输入字段高度样式
 * 为登录表单中的三个主要输入字段设置统一高度为35px
 */
/* 企业号输入框高度设置 */
.login-form #tenant_code {
    height: 35px !important; /* 设置企业号输入框高度为35px */
    line-height: 35px !important; /* 设置行高与高度一致，确保文本垂直居中 */
}

/* 用户名输入框高度设置 */
.login-form #username {
    height: 35px !important; /* 设置用户名输入框高度为35px */
    line-height: 35px !important; /* 设置行高与高度一致，确保文本垂直居中 */
}

/* 密码输入框高度设置 */
.login-form #password {
    height: 35px !important; /* 设置密码输入框高度为35px */
    line-height: 35px !important; /* 设置行高与高度一致，确保文本垂直居中 */
}

/* 输入组前缀图标高度适配 */
.login-form .input-group-text {
    height: 35px !important; /* 设置输入组前缀图标高度为35px */
    line-height: 35px !important; /* 设置行高与高度一致，确保图标垂直居中 */
}

/* 密码可见性切换按钮高度适配 */
.login-form #togglePassword {
    height: 35px !important; /* 设置密码可见性切换按钮高度为35px */
    line-height: 35px !important; /* 设置行高与高度一致，确保图标垂直居中 */
   /* padding: 0 !important; /* 移除内边距，确保按钮内容垂直居中 */
    display: flex !important; /* 使用flex布局 */
    align-items: center !important; /* 垂直居中 */
    justify-content: center !important; /* 水平居中 */
}

/* 密码可见性切换按钮图标样式 */
.login-form #togglePassword i {
    font-size: 16px !important; /* 调整图标大小 */
    line-height: 1 !important; /* 重置图标行高 */
}

/* 输入组整体高度适配 */
.login-form .input-group {
    height: 35px !important; /* 设置输入组整体高度为35px */
}

/* 输入框和按钮在输入组内的垂直对齐 */
.login-form .input-group .form-control,
.login-form .input-group .input-group-text,
.login-form .input-group .btn {
    vertical-align: middle !important; /* 垂直居中对齐 */
}

/* 登录按钮高度和样式设置 */
.login-form button[type="submit"],
.login-form button[type="button"] {
    height: 35px !important; /* 设置登录按钮高度为35px */
    line-height: 35px !important; /* 设置行高与高度一致，确保文本垂直居中 */
    padding: 0 !important; /* 移除内边距，使用line-height控制垂直居中 */
    font-size: 14px !important; /* 调整按钮文字大小 */
    display: flex !important; /* 使用flex布局 */
    align-items: center !important; /* 垂直居中 */
    justify-content: center !important; /* 水平居中 */
}

/* 登录按钮图标样式 */
.login-form button[type="submit"] i,
.login-form button[type="button"] i {
    font-size: 14px !important; /* 调整图标大小与文字一致 */
    line-height: 1 !important; /* 重置图标行高 */
    margin-right: 6px !important; /* 调整图标与文字间距 */
}

/* 左侧宣传图片样式 */
.left-image-container {
    width: 100%; /* 容器宽度100% */
    height: calc(100% - 50px); /* 容器高度减去顶部30px */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 0 30px 0 10px; /* 左右内边距保持不变，上下内边距为0 */
    margin-top: 50px; /* 顶部外边距30px，实现减去30px后的居中效果 */
}

.left-image {
    max-width: 60%; /* 最大宽度为容器宽度 */
    max-height: 60%; /* 最大高度为容器高度 */
    width: auto; /* 宽度自适应 */
    height: auto; /* 高度自适应 */
    object-fit: contain; /* 保持图片比例，完整显示 */
    border-radius: 8px; /* 添加圆角 */
   /* box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 添加轻微阴影，增强立体感 */
}

/* 响应式调整：在小屏幕设备上调整图片显示 */
@media (max-width: 768px) {
    .left-image-container {
        padding: 15px; /* 在小屏幕上减少内边距 */
    }
    
    .left-image {
        max-width: 90%; /* 在小屏幕上稍微缩小图片 */
        max-height: 90%;
    }
}

/* 输入框placeholder文字样式 */
.login-form .form-control::placeholder {
    font-size: 13px !important; /* 设置placeholder文字大小为13px */
    line-height: 35px !important; /* 设置行高与输入框高度一致 */
    color: #6c757d !important; /* 设置placeholder文字颜色为灰色 */
    opacity: 1 !important; /* 确保placeholder文字完全显示 */
}

/* 针对不同浏览器的placeholder样式兼容 */
.login-form .form-control::-webkit-input-placeholder {
    font-size: 13px !important; /* Chrome/Safari/Opera */
    line-height: 35px !important;
    color: #6c757d !important;
    opacity: 1 !important;
}

.login-form .form-control::-moz-placeholder {
    font-size: 13px !important; /* Firefox */
    line-height: 35px !important;
    color: #6c757d !important;
    opacity: 1 !important;
}

.login-form .form-control:-ms-input-placeholder {
    font-size: 13px !important; /* IE 10+ */
    line-height: 35px !important;
    color: #6c757d !important;
    opacity: 1 !important;
}

.login-form .form-control:-moz-placeholder {
    font-size: 13px !important; /* Firefox 18- */
    line-height: 35px !important;
    color: #6c757d !important;
    opacity: 1 !important;
}

/**
 * 自定义提示框样式
 * 用于控制固定在屏幕中央的提示框样式
 */
.alert-fixed-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    max-width: 90%;
    z-index: 1050;
    display: flex;
    align-items: center;
}

.alert-content {
    flex: 1;
}

.alert-fixed-center .btn-close {
    margin-left: 1rem;
}