/**
 * 山西永盛云saas管理系统 - 管理员登录页面样式
 * 功能：管理员登录页面专用样式
 * 本文件编写程序员：刘永盛
 * 开发时间：2026-01-20 21:59:15 
 * @author 山西永盛网络科技开发团队
 * @version 1.0
 */

/* 登录页面主体容器样式 */
.admin-login-body {
    min-height: 100vh; /* 最小高度为视口高度 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    margin: 0; /* 重置默认外边距 */
    padding: 0; /* 重置默认内边距 */
    /* 135度角的线性渐变背景，从浅蓝色过渡到淡紫色 */
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) center/cover fixed;
    position: relative;
    overflow: hidden;
}

/* 装饰元素 - 顶部左侧 */
.admin-login-body::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    background: rgba(138, 43, 226, 0.08);
    border-radius: 40% 60% 70% 30%;
    z-index: 0;
    animation: morph 8s ease-in-out infinite;
}

/* 装饰元素 - 底部右侧 */
.admin-login-body::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: rgba(0, 123, 255, 0.08);
    border-radius: 60% 40% 30% 70%;
    z-index: 0;
    animation: morph 10s ease-in-out infinite reverse;
}

/* 形状变换动画 */
@keyframes morph {
    0% {
        border-radius: 40% 60% 70% 30%;
        transform: scale(1) rotate(0deg);
    }
    25% {
        border-radius: 60% 20% 30% 70%;
        transform: scale(1.05) rotate(5deg);
    }
    50% {
        border-radius: 30% 60% 70% 40%;
        transform: scale(1) rotate(10deg);
    }
    75% {
        border-radius: 50% 50% 20% 80%;
        transform: scale(0.95) rotate(5deg);
    }
    100% {
        border-radius: 40% 60% 70% 30%;
        transform: scale(1) rotate(0deg);
    }
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
}

/* 登录卡片样式 */
.admin-login-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
    -webkit-backdrop-filter: blur(10px); /* Webkit浏览器毛玻璃效果 */
    backdrop-filter: blur(10px); /* 标准毛玻璃效果 */
    border: none; /* 无边框 */
    border-radius: 15px; /* 圆角边框 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 登录卡片头部样式 */
.admin-login-header {
    background: linear-gradient(135deg, #2c3e50, #34495e); /* 深色渐变背景 */
    border-radius: 15px 15px 0 0; /* 顶部圆角 */
    padding: 0.8rem; /* 内边距 */
    text-align: center; /* 文本居中 */
}

/* 登录卡片头部标题样式 */
.admin-login-header h3 {
    font-size: 1.5rem; /* 标题字体大小 */
    margin-bottom: 0.5rem; /* 调整底部外边距 */
}

/* 登录卡片头部副标题样式 */
.admin-login-header p {
    font-size: 0.9rem; /* 缩小副标题字体大小 */
    margin-top: 0.5rem; /* 调整顶部外边距 */
}

/* 安全提示样式 */
.security-notice {
    background: #fff3cd; /* 浅黄色背景 */
    border: 1px solid #ffeaa7; /* 边框颜色 */
    border-radius: 5px; /* 圆角 */
    padding: 10px; /* 内边距 */
    font-size: 0.9rem; /* 字体大小 */
    margin-bottom: 1rem; /* 底部外边距 */
}

/* 验证码容器样式 */
.captcha-container {
    margin-bottom: 1rem; /* 底部外边距 */
}

/* 验证码显示区域样式 */
.captcha-display {
    min-width: 100px; /* 最小宽度 */
    font-family: 'Courier New', monospace; /* 等宽字体 */
    font-weight: bold; /* 粗体 */
    font-size: 16px; /* 字体大小 */
    height: 35px; /* 固定高度 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    letter-spacing: 2px; /* 字符间距 */
}

/* 验证码输入组样式 */
.captcha-input-group {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 元素间距 */
}

/* 验证码输入框样式 */
.captcha-input {
    flex: 1; /* 弹性填充剩余空间 */
    height: 35px; /* 固定高度 */
    font-size: 14px; /* 字体大小 */
}

/* 验证码刷新按钮样式 */
.captcha-refresh-btn {
    height: 35px; /* 固定高度 */
    width: 35px; /* 固定宽度 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 0; /* 无内边距 */
}

/* 输入框和按钮统一高度 */
.admin-login-card .form-control,
.admin-login-card .btn {
    height: 35px; /* 统一高度 */
    padding: 0 12px; /* 统一内边距 */
    display: inline-flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    line-height: 1; /* 行高 */
}

/* 输入框文字大小 */
.admin-login-card .form-control {
    font-size: 14px; /* 缩小字体大小 */
}

/* 验证码标签样式 */
.captcha-label {
    font-size: 0.875rem; /* 字体大小 */
    margin-bottom: 0.5rem; /* 底部外边距 */
}

/* 验证码帮助文本样式 */
.captcha-help {
    font-size: 0.75rem; /* 字体大小 */
    margin-top: 0.25rem; /* 顶部外边距 */
}

/* 版本信息样式 */
.version-info {
    color: #333; /* 深色文字，与浅色背景形成反差 */
    font-weight: 500; /* 稍微加粗，提高可读性 */
}

/* 自定义边距类 */
.mt-4 {
    margin-top: 1rem !important;
}