/* 统一的用户页面样式文件 */

/* 定义暗色主题变量 */
:root {
    --sp-primary: #00d2d3; /* 更换为青色/科技蓝 */
    --sp-primary-2: #0a3d62;
    --sp-bg: #1e2130;
    --sp-card: #27293d;
    --sp-text: #ffffff;
    --sp-muted: #a0a0b0;
    --sp-border: rgba(255, 255, 255, 0.08);
}

/* 全局背景色覆盖 */
body {
    background: var(--sp-bg) !important;
    color: var(--sp-text);
}

/* App WebView：去掉主题壳层留白，避免内容整体下沉 */
html.loading,
html.loading body {
    opacity: 1 !important;
}
body.app-webview {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100% !important;
}
body.app-webview .header-navbar,
body.app-webview .main-menu,
body.app-webview .sidenav-overlay,
body.app-webview .drag-target {
    display: none !important;
}

/* 容器布局 */
.my-card {
    min-height: auto !important;
    height: auto !important;
    display: block;
    background-color: var(--sp-bg) !important;
    overflow-x: hidden;
    overflow-y: auto;
}
.my-card.auth-card {
    min-height: 100vh !important;
    display: flex;
    flex-direction: column;
}

.g-flexview {
    display: block;
    padding: 20px !important;
    width: 100%;
    margin: 0 auto;
}

/* 电脑端主容器限制 */
@media (min-width: 769px) {
    .g-flexview {
        max-width: 1140px !important;
        padding: 30px !important;
    }
    
    /* 登录/注册页面全屏绝对居中 */
    .auth-card {
        justify-content: center !important; /* 垂直居中 */
        align-items: center !important; /* 水平居中 */
    }
    .auth-card .g-flexview {
        max-width: 480px !important;
        margin: 0 !important; /* 移除外边距，靠父容器 flex 居中 */
    }
}

/* 核心卡片/边框样式 */
.border {
    border: none !important;
    background: var(--sp-card) !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    margin-bottom: 20px !important;
    position: relative;
    overflow: visible !important;
}

/* 嵌套在卡片内部的边框框 */
.border .border {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* Bootstrap Card 兼容性优化 (防止重叠) */
.card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.card-header {
    background: transparent !important;
    border-bottom: none !important; /* 移除标题下方的白线 */
    padding: 1.25rem !important;
}

.card-body {
    padding: 1.25rem !important;
}

/* 仪表盘头部 */
.dashboard-header {
    background: linear-gradient(135deg, #0a3d62 0%, #3c6382 100%) !important;
    border-radius: 24px !important;
    color: white !important;
    padding: 2rem 2rem !important;
    margin-bottom: 1.2rem !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* 统计小卡片 */
.stat-card {
    background: var(--sp-card) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    transition: all 0.4s ease !important;
}
.stat-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--sp-primary) !important;
}

/* 快捷功能项 */
.quick-action-item {
    transition: all 0.3s ease !important;
    border-radius: 16px !important;
    padding: 1rem 0.8rem !important;
    background: var(--sp-card) !important;
    border: 1px solid var(--sp-border) !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.quick-action-item:hover {
    background: #2d304e !important;
    border-color: var(--sp-primary) !important;
}

/* 图标框优化 */
.icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 1rem !important;
    font-size: 22px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}
.icon-box i {
    color: #ffffff !important;
}

/* 按钮样式 */
.btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid transparent !important; /* 修改为透明边框，预留给 outline 按钮 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}
.btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -2px !important; /* 核心修复：向上微调图标位置，使其与文字中轴线平行 */
    margin-bottom: 0 !important;
    line-height: 0 !important;
    font-size: 1.15rem !important; /* 略微放大图标，增强平衡感 */
}
.btn i:first-child:not(:last-child) {
    margin-right: 8px !important;
}
.btn i:last-child:not(:first-child) {
    margin-left: 8px !important;
}
/* 兼容原有的 mr-25, mr-45 等类 */
.mr-25, .mr-1 { margin-right: 8px !important; }
.mr-45 { margin-right: 12px !important; }

.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
}
.btn-primary {
    background: linear-gradient(135deg, var(--sp-primary) 0%, #00a8a9 100%) !important;
    color: #ffffff !important;
}
.btn-success {
    background: linear-gradient(135deg, #55efc4 0%, #00b894 100%) !important;
    color: #ffffff !important;
}
.btn-danger {
    background: linear-gradient(135deg, #ff7675 0%, #d63031 100%) !important;
    color: #ffffff !important;
}

/* Outline 按钮修复 */
.btn-outline-primary {
    border: 1px solid var(--sp-primary) !important;
    color: var(--sp-primary) !important;
    background: transparent !important;
}
.btn-outline-success {
    border: 1px solid #55efc4 !important;
    color: #55efc4 !important;
    background: transparent !important;
}
.btn-outline-success:hover {
    background: rgba(85, 239, 196, 0.1) !important;
}

/* Light 按钮修复 */
.btn-light-success {
    background: rgba(85, 239, 196, 0.15) !important;
    color: #55efc4 !important;
    border: 1px solid transparent !important; /* 增加透明边框，确保与 outline 按钮高度和宽度对齐 */
}
.btn-light-success:hover {
    background: rgba(85, 239, 196, 0.25) !important;
}

/* 按钮块级化适配 */
.btn-block {
    display: flex !important;
    width: 100% !important;
}

/* 输入框样式 */
.form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--sp-border) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}
.form-control:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--sp-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.1) !important;
}

/* 修复图标位置与输入框文字重合 */
.has-icon-left .form-control {
    padding-left: 45px !important;
}
.has-icon-left .form-control-position {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sp-muted) !important;
    z-index: 2;
}
.has-icon-left .form-control-position i {
    font-size: 1.2rem;
}

/* 列表组 */
.list-group-item {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--sp-border) !important;
    color: var(--sp-text) !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
}

/* 文本辅助 */
.text-muted { color: var(--sp-muted) !important; }
.text-dark { color: var(--sp-text) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--sp-text) !important; }

/* 响应式调整 */
@media (max-width: 768px) {
    .g-flexview { padding: 8px 10px !important; }
    .border { border-radius: 16px !important; margin-bottom: 10px !important; }

    .card-body {
        padding: 0.85rem !important;
    }
    .card-header {
        padding: 0.75rem !important;
    }
    .header-title,
    h4.mt-0.header-title,
    .my-card > .card-body > h4,
    .my-card .card-body > h4:first-child {
        margin-top: 0 !important;
        margin-bottom: 0.35rem !important;
        line-height: 1.25 !important;
        padding-top: 0 !important;
    }
    .font-small-3 {
        margin-bottom: 0.5rem !important;
        line-height: 1.4 !important;
    }

    /* 标签页文字/图标垂直居中，避免「卡密」等文字视觉靠下 */
    .nav.nav-tabs .nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        line-height: 1.2 !important;
        padding: 0.55rem 0.75rem !important;
        vertical-align: middle !important;
    }
    .nav.nav-tabs .nav-link i {
        margin: 0 !important;
        line-height: 1 !important;
        position: relative !important;
        top: 0 !important;
    }
    
    /* 移动端间距紧凑化 */
    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }
    .col-6, .col-12, .col-md-3, .col-lg-4 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .mb-1, .mb-2, .mb-3, .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    .mt-1, .mt-2 {
        margin-top: 0.75rem !important;
    }
    
    /* 标题间距 */
    .section-title {
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* 快捷功能项间距 */
    .quick-action-item {
        padding: 0.75rem 0.6rem !important;
        margin-bottom: 4px !important;
        align-items: center !important;
    }
    .quick-action-item > div:not(.icon-box) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        min-width: 0 !important;
    }
    .icon-box {
        width: 36px !important;
        height: 36px !important;
        margin-right: 0.6rem !important;
        margin-top: 0 !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
    }
    .quick-action-item .font-weight-bold {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .quick-action-item small {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
        display: block !important;
    }
    .dashboard-header {
        padding: 1.25rem !important;
        border-radius: 20px !important;
        margin-bottom: 1rem !important;
        position: relative !important;
        min-height: 110px !important; /* 略微增加高度 */
    }
    .avatar {
        display: block !important;
        position: relative !important;
        margin-bottom: 8px !important; /* 增加头像下方的间距，彻底解决与 VIP 等级的重叠 */
    }
    .avatar-xl, .avatar-xl img {
        width: 64px !important;
        height: 64px !important;
        border-radius: 50% !important;
    }
    .mobile-user-title {
        font-size: 1.25rem !important;
        margin-bottom: 8px !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
    }
    .mt-05 {
        margin-top: 5px !important;
    }
    .btn-sign-mobile {
        background: #ffffff !important;
        color: #0a3d62 !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        border: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }
    .btn-sign-mobile i {
        font-size: 0.8rem !important;
        margin-right: 4px !important;
        margin-top: -1px !important;
    }
    /* 移除之前的绝对定位 */
    .sign-wrapper {
        display: none !important;
    }

    /* 移动端返回图标隐藏 */
    .header-title a.float-right:not(.btn), 
    h4 a.float-right:not(.btn), 
    h6 a.float-right:not(.btn) {
        display: none !important;
    }

    /* 修复移动端按钮粘连 */
    .input-group { gap: 0 !important; }
    .input-group > .form-control + .input-group-append {
        margin-left: 10px !important;
    }
    .btn + .btn { margin-left: 8px !important; }
}

/* 电脑端输入组恢复 */
@media (min-width: 769px) {
    .input-group { gap: 0 !important; }
    .input-group > .form-control + .input-group-append {
        margin-left: -1px !important;
    }
    .input-group-append .btn {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    .input-group > .form-control {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    
    /* 返回图标显示 */
    .header-title a.float-right:not(.btn), 
    h4 a.float-right:not(.btn), 
    h6 a.float-right:not(.btn) {
        display: inline-block !important;
        color: var(--sp-muted) !important;
        margin-left: 10px;
    }
}

/* 辅助类 */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }

.bg-light-primary { background: rgba(0, 210, 211, 0.2) !important; }
.bg-light-success { background: rgba(85, 239, 196, 0.2) !important; }
.bg-light-info { background: rgba(116, 185, 255, 0.2) !important; }
.bg-light-warning { background: rgba(255, 234, 167, 0.2) !important; }
.bg-light-danger { background: rgba(255, 118, 117, 0.2) !important; }

/* 徽章 (Badge) 统一风格 */
.badge {
    padding: 0.45em 0.85em !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    letter-spacing: 0.5px !important;
}
.badge-light-primary { background: rgba(0, 210, 211, 0.15) !important; color: var(--sp-primary) !important; }
.badge-light-success { background: rgba(85, 239, 196, 0.15) !important; color: #55efc4 !important; }
.badge-light-info { background: rgba(116, 185, 255, 0.15) !important; color: #74b9ff !important; }
.badge-light-warning { background: rgba(255, 234, 167, 0.15) !important; color: #ffeaa7 !important; }
.badge-light-danger { background: rgba(255, 118, 117, 0.15) !important; color: #ff7675 !important; }

/* 模态框 (Modal) 统一风格 */
.modal-content {
    background-color: var(--sp-card) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4) !important;
    color: var(--sp-text) !important;
}
.modal-header { border-bottom: 1px solid var(--sp-border) !important; padding: 1.5rem !important; }
.modal-footer { border-top: 1px solid var(--sp-border) !important; padding: 1.25rem !important; }

/* 下拉菜单 (Dropdown) 统一风格 */
.dropdown-menu {
    background-color: var(--sp-card) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 15px !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4) !important;
}
.dropdown-item {
    color: var(--sp-text) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    transition: all 0.2s ease;
}
.dropdown-item:hover {
    background-color: rgba(0, 210, 211, 0.1) !important;
    color: var(--sp-primary) !important;
}

/* 滚动条美化 */
::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-track { background: var(--sp-bg) !important; }
::-webkit-scrollbar-thumb { background: var(--sp-card) !important; border-radius: 3px !important; }

/* 签到按钮 */
.btn-sign {
    background: #ffffff !important;
    color: #0a3d62 !important;
    border-radius: 12px !important;
    padding: 8px 20px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    display: inline-flex;
    align-items: center;
}
.btn-sign i { color: #ff9f43 !important; margin-right: 6px !important; }