/**
 * 登录页面专用样式
 * 文件作用：为login.php页面提供独立的样式定义
 * 影响文件：login.php - 用户登录页面
 * 创建时间：2025-02-01
 * 作者：Kaka工具箱
 */

/* ================================================
   页面布局样式
   ================================================ */

/**
 * 页面背景样式
 * 作用：设置登录页面的渐变背景
 */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/**
 * 主容器布局
 * 作用：将登录表单居中显示
 */
.nk-app-root {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

/**
 * 登录卡片容器
 * 作用：定义登录表单的背景和阴影效果
 */
.nk-split {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    max-width: 900px;
    width: 100%;
    overflow: hidden;
}

.nk-split-content {
    padding: 60px;
}

/* ================================================
   登录类型切换标签
   ================================================ */

/**
 * 登录标签容器
 * 作用：用户登录和管理员登录的切换按钮容器
 */
.login-tabs {
    display: flex;
    margin-bottom: 30px;
    background: #f8f9fc;
    border-radius: 12px;
    padding: 4px;
}

/**
 * 登录标签按钮
 * 作用：普通用户和管理员登录的切换按钮样式
 */
.login-tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #8094ae;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-tab.active {
    background: #fff;
    color: #364a63;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ================================================
   表单样式
   ================================================ */

/**
 * 表单组间距
 */
.form-group {
    margin-bottom: 25px;
}

/**
 * 表单标签样式
 */
.form-label {
    font-weight: 600;
    color: #364a63;
    margin-bottom: 8px;
}

/**
 * 表单控件样式
 * 作用：输入框的基础样式和焦点效果
 */
.form-control {
    border: 2px solid #e5e9f2;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/**
 * 主要按钮样式
 * 作用：登录按钮的渐变效果和悬停动画
 */
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    padding: 16px 30px;
    font-weight: 600;
    font-size: 16px;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

/* ================================================
   提醒消息样式
   ================================================ */

/**
 * 提醒框基础样式
 */
.alert {
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 25px;
}

/**
 * 错误消息样式
 * 作用：红色渐变的错误提示
 */
.alert-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

/**
 * 成功消息样式
 * 作用：绿色渐变的成功提示
 */
.alert-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

/* ================================================
   品牌标识样式
   ================================================ */

/**
 * 品牌区域样式
 * 作用：显示网站Logo和名称
 */
.nk-brand {
    text-align: center;
    margin-bottom: 40px;
}

.logo-link {
    font-size: 28px;
    font-weight: 700;
    color: #364a63;
    text-decoration: none;
}

/* ================================================
   底部链接样式
   ================================================ */

/**
 * 表单底部注释区域
 * 作用：注册链接和返回首页链接的样式
 */
.form-note {
    text-align: center;
    margin-top: 25px;
}

.form-note a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
}

.form-note a:hover {
    text-decoration: underline;
}

/* ================================================
   管理员登录提醒
   ================================================ */

/**
 * 管理员登录提醒样式
 * 作用：提醒用户管理员登录需要特殊权限
 */
.admin-notice {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

/* ================================================
   响应式设计
   ================================================ */

/**
 * 移动端适配
 * 作用：在小屏幕设备上调整内边距
 */
@media (max-width: 768px) {
    .nk-split-content {
        padding: 40px 30px;
    }
}