/*
 * 移动端登录页面样式
 * 用于修改iTop登录页面的外观和移动端适配
 * 供所有SSO模块（企业微信、飞书等）统一使用
 */

/* ========== 桌面端样式调整 ========== */

/* 登录logo容器样式 */
#login-logo {
    width: 390px !important;
	padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    margin-top: 110px !important;
    position: relative !important;
}

/* 登录内容框样式 */
#login-content {
    margin-top: 0 !important;
    position: relative !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Logo图片样式 - 确保100%填充容器 */
#login-logo img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    vertical-align: bottom;
}

/* ========== 小高度屏幕适配（继承并优化login.css的设计） ========== */
@media (max-height: 700px) and (min-width: 769px) {
    /* 桌面端小屏 + iPhone SE横屏适配 */
    #login-logo {
        margin-top: 25px !important;
        position: relative !important;
    }
    
    #login-content {
        margin-top: 0 !important;
        position: relative !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
}

@media (max-height: 600px) and (min-width: 769px) {
    /* 桌面端极小屏 + iPhone SE横屏适配 */
    #login-logo {
        margin-top: 0px !important;
        position: relative !important;
    }
    
    #login-content {
        margin-top: 0 !important;
        position: relative !important;
    }
}

/* ========== 移动端响应式设计 ========== */
@media screen and (max-width: 768px) {
    /* 重置body和容器 - 确保背景色覆盖整个页面包括滚动区域 */
    body {
        background: #E1E7EC !important;
        min-height: 100vh !important;
    }
    
    #login-body {
        /* padding: 10px !important; */
        background: #E1E7EC !important;
        min-height: 100vh !important;
    }
    
    /* 移动端logo容器 */
    #login-logo {
        width: 95% !important;
        max-width: 390px !important; /* 与桌面版保持一致 */
        margin-top: 20px !important;
        margin-bottom: 0px !important; /* 确保无下边距 */
        padding: 0 !important;
        position: relative !important;
        line-height: 0 !important; /* 确保父元素不会影响子元素的布局 */
    }
    
    /* 移动端Logo图片确保100%填充 */
    #login-logo img {
        width: 100% !important;
        max-height: none !important;
        padding: 15px 0px 0px 0px !important; /* 减少底部padding */
    }
    
    /* 移动端内容框 */
    #login-content {
        width: 95% !important;
        max-width: 350px !important; /* 保持350px与login.css一致 */
        margin-top: 0px !important; /* 紧贴logo，无间隙 */
        position: relative !important;
        padding: 20px !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* 移动端标题 */
    #login-title {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    h1 {
        font-size: 1.4rem !important;
        margin: 10px 0 !important;
        text-align: center !important;
    }
    
    /* 移动端表单样式 */
    #login-form-content > div {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 移动端输入框 - 修复溢出问题 */
    #login-additional-controls input {
        height: 44px !important; /* 增加触摸区域 */
        font-size: 16px !important; /* 防止iOS缩放 */
        border-radius: 6px !important;
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: solid 2px #DDD !important;
        max-width: 100% !important; /* 防止溢出 */
    }
    
    /* 确保所有输入框都不会溢出 */
    #login-input input[type="text"],
    #login-input input[type="password"],
    #login-input input[type="email"] {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        border: solid 2px #DDD !important;
        height: 44px !important;
        font-size: 16px !important;
        border-radius: 6px !important;
    }
    
    /* 移动端按钮 */
    #login-submit input {
        height: 44px !important;
        font-size: 16px !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 15px !important;
    }
    
    /* 移动端SSO按钮 */
    #login-sso-buttons {
        padding: 0 !important;
    }
    
    .sso-button {
        margin: 10px 0 !important;
        padding: 12px 15px !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .sso-image {
        position: relative !important;
        left: auto !important;
        margin-right: 10px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 移动端分隔线 */
    #login-form-content .divider hr {
        width: 30% !important;
    }
    
    /* 移动端链接 */
    a {
        font-size: 16px !important;
        /* padding: 5px !important; */
        /* display: inline-block !important; */
    }
}

/* ========== 小屏手机适配 ========== */
@media screen and (max-width: 480px) {
    #login-logo {
        width: 100% !important; /* 与移动端保持一致 */
        max-width: 350px !important; /* 与content保持对齐 */
        margin-top: 10px !important;
        margin-bottom: 0px !important;
        padding: 10px 0px 0px 0px !important; /* 减少底部padding */
        position: relative !important;
    }
    
    #login-content {
        width: 100% !important; /* 与logo保持一致 */
        max-width: 320px !important; /* 与logo保持对齐 */
        padding: 15px !important;
        margin-top: 0px !important; /* 确保紧贴 */
        position: relative !important;
    }
    
    h1 {
        font-size: 1.2rem !important;
    }
    
    #login-additional-controls input,
    #login-submit input {
        font-size: 14px !important;
    }
    
    /* 小屏下进一步确保输入框不溢出 */
    #login-form input[type="text"],
    #login-form input[type="password"],
    #login-form input[type="email"],
    #login-additional-controls input {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        padding: 0 12px !important; /* 小屏下减少padding */
    }
}

/* ========== 横屏手机适配 ========== */
@media screen and (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    /* 确保横屏模式下背景色覆盖整个区域 */
    body {
        background: #E1E7EC !important;
        min-height: 100vh !important;
        min-width: 100vw !important;
    }
    
    #login-body {
        background: #E1E7EC !important;
        min-height: 100vh !important;
        min-width: 100vw !important;
    }
    
    #login-logo {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding: 0px 0px 0px 0px !important;
    }
    
    #login-content {
        margin-top: 0px !important; /* 紧贴logo */
        padding: 15px !important;
    }
    
    h1 {
        font-size: 1.1rem !important;
        margin: 5px 0 !important;
    }
    
    #login-form {
        padding-top: 0.5em !important;
    }
}


/* ========== iPhone 14 Pro Max 横屏特殊适配 ========== */
@media screen and (max-width: 932px) and (max-height: 430px) and (orientation: landscape) {
    body {
        background: #E1E7EC !important;
        min-height: 100vh !important;
        min-width: 100vw !important;
        overflow-x: auto !important;
    }
    
    #login-body {
        background: #E1E7EC !important;
        min-height: 100vh !important;
        min-width: 932px !important; /* 确保覆盖整个宽度 */
        overflow-x: auto !important;
    }
    
    /* 确保login容器在横屏下居中 */
    #login-logo,
    #login-content {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========== 防止iOS Safari缩放 ========== */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
        -webkit-appearance: none !important;
        -webkit-border-radius: 0 !important;
    }
}

/* ========== 触摸优化 ========== */
@media screen and (max-width: 768px) {
    button,
    input[type="submit"],
    input[type="button"],
    .sso-button {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

/* ========== 备案信息样式统一 ========== */
/* 备案信息统一样式类 */
.footer-info {
    font-size: 12px !important;
    color: #666 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.footer-info a {
    color: #337ab7 !important;
    text-decoration: none !important;
    font-size: 12px !important;
}

.footer-info a:hover {
    color: #23527c !important;
    text-decoration: underline !important;
}

/* 移动端备案信息优化 */
@media screen and (max-width: 768px) {
    .footer-info {
        font-size: 11px !important;
        word-break: break-word !important; /* 防止长链接溢出 */
    }
    
    .footer-info a {
        font-size: 11px !important;
    }
}