/* public/css/auth.css */

/* ================= 1. 核心层级与交互修复 ================= */

/* 强制 Header 提升层级，确保在任何情况下（除非弹窗出现）都可点击 */
.site-header {
    position: relative !important;
    z-index: 1000 !important; 
}

/* 遮罩层：全屏固定，作为背景 */
.modal-overlay {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99998 !important; 
    
    opacity: 0; visibility: hidden; 
    pointer-events: none; 
    
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

/* 激活状态：遮挡鼠标 */
.modal-overlay.visible { 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
}

/* 弹窗容器：回归经典绝对居中 */
.modal {
    position: fixed !important;
    
    /* 经典居中公式 */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
    margin: 0 !important;
    
    background: #fff; 
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    z-index: 99999 !important; 
    
    display: flex; flex-direction: column;
    overflow: hidden; 
    
    /* 尺寸限制 ：高度不超过视口 85%，确保上下留白，防止切头 */
    max-height: 85vh !important; 
    width: auto; 
    min-width: 360px; 
    max-width: 95vw !important;
    
    opacity: 0; visibility: hidden; 
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 激活状态 */
.modal.visible { 
    opacity: 1; 
    visibility: visible; 
    transform: translate(-50%, -50%) scale(1) !important; 
}

/* 特定模态框宽度 */
#auth-modal { width: 400px; }

/* 大屏弹窗：订阅与帮助 */
#help-modal, .modal-pricing {
    width: 1200px; 
    /* 在小屏下会自动受 max-width: 95vw 限制 */
}

/* 内容区域滚动 [关键] */
.modal-content { 
    padding: 24px; 
    overflow-y: auto; 
    flex: 1; 
    min-height: 150px; 
}

/* 模态框组件样式 */
.modal-header {
    padding: 16px 24px; border-bottom: 1px solid #f3f4f6;
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; flex-shrink: 0;
}
.modal-header h2 { font-size: 1.15rem; color: #1f2937; font-weight: 600; margin: 0; }

.close-btn { 
    font-size: 1.5rem; color: #9ca3af; cursor: pointer;
    background: transparent; border: none; padding: 4px; 
    line-height: 1; border-radius: 4px; transition: all 0.2s;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.close-btn:hover { background: #f3f4f6; color: #ef4444; }

.modal-footer { padding: 16px 24px; border-top: 1px solid #f3f4f6; text-align: right; background: #f9fafb; flex-shrink: 0; }

/* ================= 2. 表单与按钮组件 ================= */
.auth-form-container { display: flex; flex-direction: column; gap: 16px; }
.input-group { position: relative; }
.input-group .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: #9ca3af; pointer-events: none; z-index: 10; }
.auth-input { width: 100%; padding: 10px 12px 10px 40px; border: 1px solid #e5e7eb; border-radius: 6px; background-color: #f9fafb; color: #1f2937; font-size: 0.95rem; box-sizing: border-box; transition: all 0.2s; }
.auth-input:focus { background-color: #fff; border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.auth-input:focus + .input-icon { fill: #3b82f6; }
.extra-field { display: none; }
.modal.register-mode .extra-field { display: block; animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.auth-btn { width: 100%; padding: 12px; background-color: #2563eb; color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: 500; cursor: pointer; margin-top: 8px; transition: background-color 0.2s; }
.auth-btn:hover { background-color: #1d4ed8; }
.auth-btn:disabled { background-color: #93c5fd; cursor: not-allowed; }
.auth-switch-text { margin-top: 16px; text-align: center; font-size: 0.85rem; color: #6b7280; }
.auth-switch-link { color: #2563eb; cursor: pointer; font-weight: 600; margin-left: 4px; text-decoration: none; }
.auth-switch-link:hover { text-decoration: underline; }
.error-message { color: #dc2626; font-size: 0.85rem; text-align: center; min-height: 20px; display: none; margin-top: -5px; }
.error-message.visible { display: block; }

/* ============================================================
   个人中心 (Profile Modal) 完全重构版 - 最终对齐与样式修复
   ============================================================ */

/* 1. 模态框本体：锁死尺寸，禁止外层溢出 */
#profile-modal {
    width: 820px !important; 
    height: 580px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important; /* 核心：禁止外层溢出 */
    padding: 0 !important;
    border: none !important;
}

/* 2. 左侧边栏 */
.profile-sidebar {
    width: 230px;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* --- 1. 侧边栏头部布局 --- */
.profile-sidebar-header {
    padding: 24px 15px; /* 适当减少左右边距，给单行排版留空间 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 确保勋章和状态标签不拉伸 */
    gap: 10px;
    border-bottom: 1px solid #f3f4f6;
}
/* --- 第一行：姓名和ID的水平容器 --- */
.profile-name-row {
    display: flex;
    align-items: baseline; /* 确保不同大小的文字底部对齐 */
    white-space: nowrap;   /* 核心：强制不换行 */
    width: 100%;           /* 占满宽度 */
    gap: 4px;              /* 姓名与ID之间的间距 */
    overflow: hidden;      /* 超出部分隐藏（防破损） */
}

.profile-sidebar-header h3 {
    margin: 0; font-size: 1.15rem; color: #111827; font-weight: 700;
}
.profile-status {
    display: inline-block;
    background: #ecfdf5; color: #10b981;
    padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-top: 6px;
}

/* 左侧垂直菜单 */
.profile-tabs {
    flex: 1;
    display: flex;
    flex-direction: column !important;
    padding: 0 12px;
    overflow-y: auto;
    border-bottom: none !important;
}

.profile-tab {
    /* 布局基础 */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* 尺寸与间距 */
    padding: 12px 16px !important;
    margin-bottom: 4px;
    border-radius: 8px;
    gap: 12px; 
    
    /* 字体与颜色 */
    font-size: 14px;
    color: #4b5563 !important;
    cursor: pointer;
    transition: all 0.2s;
    border: none !important;
    white-space: nowrap;
}

/* --- 强制统一图标宽度 --- */
.profile-tab i { 
    font-size: 18px; 
    width: 24px !important; 
    text-align: center;
    flex-shrink: 0; 
    
    display: inline-block;
    line-height: 1;
}

.profile-tab:hover { background: #f3f4f6; color: #2563eb !important; }
.profile-tab.active {
    background: #eff6ff;
    color: #2563eb !important;
    font-weight: 600;
}

.profile-sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}
#logout-btn-profile {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}
#logout-btn-profile:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; }

/* 3. 右侧容器布局 */
.profile-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden !important;
}


/* 右侧标题栏：固定高度 */
.profile-main-header {
    height: 64px;
    padding: 0 24px !important; /* 左对齐基准 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 4. 内容滚动区：这是全场唯一允许滚动的区域 */
/* 右侧内容区微调 */
.profile-main-content {
    flex: 1;
    padding: 24px 28px 24px 24px !important; 
    overflow-y: auto !important;
    background: #fff;
    box-sizing: border-box;
}

/* 5. 内部列表容器：必须是静态的，只负责撑开高度 */
#subscription-list, 
#my-request-list, 
#order-list, 
#login-history-list,
#device-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important; 
    padding: 0 !important; 
    margin: 0 !important;
}

/* 6. 卡片样式：防止向右凸出 */
.sub-item, .req-item, .order-item, .dev-item {
    width: 100% !important;
    box-sizing: border-box !important; 
    padding: 18px 20px !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    background: #fff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.2s ease;
    margin: 0 !important; /* 清除默认外边距 */
}

.sub-item:hover, .req-item:hover, .order-item:hover, .dev-item:hover {
    border-color: #3b82f6 !important;
    background: #f8fbff !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.06);
}

/* 文字区弹性缩放 */
.sub-item > div:first-child, 
.req-item > div:first-child, 
.order-item > div:first-child, 
.dev-item > div:first-child {
    flex: 1;
    min-width: 0;
}

/* 5. 设备管理样式修复（按钮美化） */
.dev-item .btn-dan {
    margin-left: 15px;
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 13px;
    background: #fff;
    color: #ef4444;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.dev-item .btn-dan:hover {
    background: #ef4444;
    color: #fff;
}

/* 7. 美化这唯一的滚动条 */
.profile-main-content::-webkit-scrollbar {
    width: 6px;
}
.profile-main-content::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}
.profile-main-content::-webkit-scrollbar-track {
    background: transparent;
}

/* 修改密码表单限制宽度，防止过宽 */
#tab-security .form-row { max-width: 400px; margin-bottom: 20px; }
#tab-security .auth-input { width: 100% !important; padding-left: 12px !important; }

/* ================= 登录日志 ================= */

/* 1. 容器重置 */
#login-history-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* 卡片间距 */
    width: 100% !important;
    padding: 0 !important;
}

/* 2. 强制转换 Table 结构为 Block 布局，彻底摆脱表格限制 */
#login-history-list table, 
#login-history-list tbody, 
#login-history-list tr {
    display: block !important;
    width: 100% !important;
}

/* 3. 单个卡片 (原 tr) */
#login-history-list tr {
    display: flex !important; /* 开启 Flex 布局，实现左右对齐 */
    justify-content: space-between !important; /* 关键：两端对齐，撑开中间 */
    align-items: center !important;
    
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 16px 20px;
    box-sizing: border-box; /* 确保 padding 不撑大 */
    transition: all 0.2s;
}

#login-history-list tr:hover {
    border-color: #dbeafe;
    background: #f8fbff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 4. 单元格 (原 td) */
#login-history-list td {
    display: block !important;
    border: none !important; /* 去掉所有默认边框 */
    padding: 0 !important;
    font-size: 14px;
}

/* 左侧时间列 */
#login-history-list td:first-child {
    flex: 1; /* 占据左侧剩余空间 */
    color: #64748b;
    font-family: 'Consolas', monospace;
    position: relative;
    padding-left: 24px !important; /* 留出圆点位置 */
}

/* 右侧 IP 列 */
#login-history-list td:last-child {
    flex-shrink: 0; /* 防止 IP 被压缩 */
    text-align: right;
    font-weight: 600;
    color: #1e293b;
    font-family: sans-serif;
    letter-spacing: 0.5px;
}

/* 5. 圆点装饰 */
#login-history-list td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cbd5e1;
}

/* 6. 最新记录高亮 */
#login-history-list tr:first-child {
    border-color: #3b82f6; /* 边框变蓝 */
    background: #fff;
}

#login-history-list tr:first-child td:first-child {
    color: #0f172a;
    font-weight: 600;
}

#login-history-list tr:first-child td:first-child::before {
    background-color: #10b981;
    box-shadow: 0 0 0 3px #d1fae5;
}
/* =========================================
   审计日志表格布局
   ========================================= */

/* 1. 强制表格固定布局 */
#page-logs table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse;
}

/* 2. 精确列宽定义 (共6列) */

/* 第1列：序号 (50px 足够，居中) */
#page-logs th:nth-child(1),
#page-logs td:nth-child(1) {
    width: 50px !important;
    text-align: center !important;
    padding: 0 !important;
    color: #94a3b8; /* 序号颜色淡一点 */
    font-weight: bold;
}

/* 第2列：时间 (170px) */
#page-logs th:nth-child(2),
#page-logs td:nth-child(2) {
    width: 170px !important;
    text-align: center !important; 
    padding-left: 0 !important;
    /* 统一字体 */
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 0.9rem !important; 
    color: #475569 !important; 
    font-weight: normal !important;
}

/* 第3列：操作人 (15%) */
#page-logs th:nth-child(3),
#page-logs td:nth-child(3) {
    width: 15%; 
    min-width: 140px;
    text-align: center !important;
    font-weight: normal !important;
    color: #475569 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 第4列：动作 (100px) */
#page-logs th:nth-child(4),
#page-logs td:nth-child(4) {
    width: 100px;
    text-align: center !important;
}

/* 第5列：目标 (120px) */
#page-logs th:nth-child(5),
#page-logs td:nth-child(5) {
    width: 120px;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 第6列：详情 (占据剩余全部) */
#page-logs th:nth-child(6),
#page-logs td:nth-child(6) {
    width: auto;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-all;
    padding-left: 15px !important;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 个人中心 ID 文字特殊颜色 */
.text-fancy-gold {
    color: #d97706 !important;
    font-weight: bold !important;
}

/* 用户名样式 */
.profile-username-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    flex-shrink: 0; /* 防止名字被挤压 */
}

/* --- 靓号 ID 精修：金属橙 + 微光 --- */
.profile-id-fancy {
    font-family: 'Consolas', 'Monaco', monospace;
    color: #ea580c; 
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    flex-shrink: 0; /* 防止ID被挤压 */
    /* 精细微光效果 */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.8), 0px 0px 3px rgba(234, 88, 12, 0.2);
}
.profile-id-fancy:hover {
    color: #c2410c;
    text-shadow: 0px 0px 8px rgba(234, 88, 12, 0.4);
}
@keyframes fancy-text-glow {
    from { text-shadow: 0 0 4px rgba(217, 119, 6, 0.2); }
    to { text-shadow: 0 0 12px rgba(217, 119, 6, 0.6), 0 0 20px rgba(245, 158, 11, 0.2); }
}
/* 普通 ID 样式（灰色） */
.profile-id-normal {
    color: #64748b;
    font-size: 0.9rem;
    flex-shrink: 0;
}
/* --- FANCY 勋章：珠宝级扫光特效 --- */
.fancy-id-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(145deg, #f59e0b, #d97706); 
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(217, 119, 6, 0.3);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
}
.fancy-id-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.4);
}
/* 扫光特效 */
.fancy-id-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 25px;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-30deg);
    animation: gold-shimmer 5s infinite;
}
@keyframes gold-shimmer {
    0% { left: -150%; }
    8% { left: 200%; }
    100% { left: 200%; }
}
@keyframes badge-glint {
    0% { left: -100%; }
    10% { left: 150%; } /* 10%的时间跑完，产生“快闪”感 */
    100% { left: 150%; }
}

@keyframes badge-shimmer {
    0% { left: -60%; }
    30% { left: 120%; }
    100% { left: 120%; }
}

/* 钻石图标轻微跳动 */
.fancy-id-badge i {
    margin-right: 4px;
    font-size: 11px;
    animation: icon-float 2s infinite ease-in-out;
}
@keyframes icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}
@keyframes diamond-sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}
/* 正常状态标签 */
.status-badge-green {
    display: inline-block;
    background: #ecfdf5;
    color: #10b981;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
/* 优化个人中心内的操作按钮 */
.p-tab-content .auth-btn {
    width: 80%;     /* 覆盖之前的 width: 100%; width: auto !important;*/
    min-width: 150px;           /* 设置一个最小宽度，保证平衡感 */
    padding: 10px 32px;         /* 增加左右内边距，让按钮看起来更精干 */
    display: inline-block;      /* 允许并排或左对齐 */
    margin-top: 20px;
}

/* 确保安全设置页面的容器是左对齐的 */
#tab-security {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* 核心：确保内部元素不拉伸，而是左对齐 */
}

/* 如果有管理员 ID 修改区域，也应用同样的间距逻辑 */
#admin-code-section .auth-input {
    max-width: 400px;           /* 限制输入框最大宽度，防止太长 */
}
/* 计算记录卡片 */
.calc-record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}
.calc-record-item:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.calc-record-item .btn-del:hover {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
}