/* ========================================
   登录页样式 - 左右分栏设计
   版本: v2.0
   ======================================== */

@layer admin-components {
    /* 登录容器 - 全屏居中 */
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background: var(--admin-gradient-login-bg);
    }

    /* 登录主框体 1200x800 */
    .login-box {
        width: 1200px;
        height: 800px;
        display: flex;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
        animation: boxFadeIn 0.6s ease-out;
    }

    @keyframes boxFadeIn {
        from {
            opacity: 0;
            transform: scale(0.96);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* ===== 左侧品牌区 ===== */
    .login-left {
        width: 480px;
        flex-shrink: 0;
        background: var(--admin-gradient-purple);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .login-left-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 60px 50px;
        color: #fff;
    }

    .brand-logo {
        width: 300px;
        height: 75px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .brand-logo .el-icon {
        color: #fff;
        width: 90px;
        height: 90px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 24px;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }

    .brand-logo-img {
        max-width: 300px;
        max-height: 75px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .brand-title {
        font-size: 32px;
        font-weight: 800;
        margin: 0 0 6px 0;
        letter-spacing: 2px;
    }

    .brand-subtitle {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.2em;
        opacity: 0.8;
        margin: 0 0 6px 0;
        text-transform: uppercase;
    }

    /* 品牌分割线 */
    .brand-divider {
        width: 40px;
        height: 3px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 2px;
        margin: 0 auto 36px;
    }

    /* 功能特性列表 */
    .brand-features {
        display: flex;
        flex-direction: column;
        gap: 28px;
        text-align: left;
        max-width: 320px;
        margin: 0 auto;
    }

    .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 18px;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        flex-shrink: 0;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .feature-icon .el-icon {
        color: #fff;
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

    .feature-icon .el-icon svg {
        width: 24px;
        height: 24px;
    }

    .feature-icon.icon-monitor {
        background: linear-gradient(135deg, #36d1dc, #5b86e5);
    }

    .feature-icon.icon-shield {
        background: linear-gradient(135deg, #f7971e, #ffd200);
    }

    .feature-icon.icon-data {
        background: linear-gradient(135deg, #11998e, #38ef7d);
    }

    .feature-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 4px;
    }

    .feature-name {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.5px;
    }

    .feature-desc {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
        line-height: 1.5;
    }

    /* 左侧装饰圆 */
    .brand-decoration {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
    }

    .deco-circle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
    }

    .deco-circle-1 {
        width: 300px;
        height: 300px;
        top: -80px;
        left: -80px;
    }

    .deco-circle-2 {
        width: 200px;
        height: 200px;
        bottom: -60px;
        right: -40px;
    }

    .deco-circle-3 {
        width: 120px;
        height: 120px;
        bottom: 120px;
        left: 30px;
    }

    /* ===== 右侧登录表单区 ===== */
    .login-right {
        flex: 1;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    .login-right-content {
        padding: 60px 64px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* 表单头部 */
    .login-header {
        margin-bottom: 40px;
    }

    .login-header .login-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--admin-color-text-primary);
        margin: 0 0 8px 0;
    }

    .login-header .login-subtitle {
        font-size: 14px;
        color: var(--admin-color-text-light);
        margin: 0;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }

    /* 表单标签 */
    .form-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--admin-color-text-secondary);
        margin-bottom: 8px;
    }

    /* 表单区域 */
    .login-form {
        width: 100%;
    }

    .login-form .el-form-item {
        margin-bottom: 24px;
    }

    /* 输入框样式 */
    .login-form .el-input__wrapper {
        background: var(--admin-color-bg-light);
        border: 2px solid var(--admin-color-border);
        border-radius: var(--admin-radius-md);
        height: 48px;
        box-shadow: none;
        transition: var(--admin-transition-fast);
    }

    .login-form .el-input__wrapper:hover {
        border-color: var(--admin-color-border-dark);
        background: var(--admin-color-bg-lighter);
    }

    .login-form .el-input__wrapper.is-focus {
        border-color: var(--admin-color-primary-light);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .login-form .el-input__inner {
        font-size: 15px;
        font-weight: 500;
        color: var(--admin-color-text-primary);
    }

    .login-form .el-input__inner::placeholder {
        color: var(--admin-color-text-light);
        font-weight: 400;
    }

    /* 登录选项 */
    .login-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 28px;
        margin-top: -4px;
    }

    .login-options .el-checkbox__label {
        color: var(--admin-color-text-muted);
        font-size: 13px;
        font-weight: 500;
    }

    .login-options .el-link {
        font-weight: 600;
        font-size: 13px;
        color: var(--admin-color-primary-light);
    }

    /* 登录按钮 */
    .login-button,
    .login-button.el-button,
    .login-button.el-button--primary,
    button.login-button {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        background: var(--admin-gradient-purple);
        background-color: var(--admin-color-primary-light);
        border: none;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #fff;
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
        transition: var(--admin-transition-smooth);
    }

    .login-button span,
    .login-button .el-icon,
    .login-button.el-button span,
    .login-button.el-button .el-icon {
        color: #fff;
    }

    .login-button:hover,
    .login-button.el-button:hover,
    .login-button.el-button--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(99, 102, 241, 0.45);
        background: var(--admin-gradient-primary-hover);
        background-color: var(--admin-color-violet-600);
        color: #fff;
    }

    .login-button:active,
    .login-button.el-button:active {
        transform: translateY(0);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    }

    .login-button:focus,
    .login-button.el-button:focus,
    .login-button.el-button--primary:focus {
        background: var(--admin-gradient-purple);
        background-color: var(--admin-color-primary-light);
        color: #fff;
        outline: none;
    }

    /* 底部提示 */
    .login-footer {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 32px;
        font-size: 12px;
        color: var(--admin-color-text-muted);
        font-weight: 500;
    }

    .login-footer .el-icon {
        color: var(--admin-color-warning);
        font-size: 14px;
    }

    /* 版权信息 */
    .copyright {
        text-align: center;
        padding: 20px 64px;
        color: var(--admin-color-text-light);
        font-size: 12px;
        font-weight: 500;
    }

    .copyright p {
        margin: 0;
    }

    /* ===== 响应式：屏幕较小时竖向堆叠 ===== */
    @media (max-width: 1280px) {
        .login-box {
            width: 90vw;
            max-width: 1200px;
            height: auto;
            min-height: 600px;
        }
    }

    @media (max-width: 900px) {
        .login-box {
            flex-direction: column;
            width: 95vw;
            max-width: 520px;
            height: auto;
        }

        .login-left {
            width: 100%;
            padding: 40px 30px;
        }

        .login-left-content {
            padding: 30px 20px;
        }

        .brand-title {
            font-size: 24px;
        }

        .brand-desc {
            display: none;
        }

        .login-right-content {
            padding: 40px 36px;
        }

        .copyright {
            padding: 16px 36px;
        }
    }
}