/* ============================================================
   星连欢云 · 用户中心全局主题（毛玻璃 + 自然风景 + 深绿主色）
   仅覆盖样式，不涉及任何业务逻辑 / 表单结构
   ============================================================ */

:root {
    --xhy-green: #0f5132;
    --xhy-green-deep: #0a3d26;
    --xhy-green-soft: #1a7a4f;
    --xhy-ink: #1f2d3d;
    --xhy-ink-2: #4a5b6b;
    --xhy-line: rgba(15, 81, 50, .12);
    --xhy-glass: rgba(255, 255, 255, .74);
    --xhy-glass-strong: rgba(255, 255, 255, .88);
    --xhy-glass-border: rgba(255, 255, 255, .62);
    --xhy-shadow: 0 10px 30px rgba(31, 45, 64, .12);
    --xhy-radius: 16px;

    /* 覆盖模板自带的紫色主色体系（yunyoo.css :root） */
    --bs-global: #0f5132;
    --bs-global-1: #e9f2ec;
    --bs-global-2: #f3f8f5;
    --bs-global-3: #7fb79a;
    --bs-global-o-0: rgba(15, 81, 50, 0);
    --bs-global-o-1: rgba(15, 81, 50, .1);
    --bs-global-o-2: rgba(15, 81, 50, .2);
    --bs-global-o-3: rgba(15, 81, 50, .3);
    --bs-global-o-4: rgba(15, 81, 50, .4);
    --bs-global-o-5: rgba(15, 81, 50, .5);
    --bs-btn-hover-bg: #0a3d26;
    --bs-btn-hover-border-color: #08331f;
    --bs-btn-active-bg: #08331f;
    --bs-btn-active-border-color: #062a18;
}

/* ---------- 背景层 ---------- */
html {
    background: #eef2ef !important;
}

html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--scenery-bg, none) center / cover no-repeat;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
}

body {
    background: transparent !important;
    color: var(--xhy-ink);
}

/* ---------- 顶部栏 ---------- */
#page-topbar {
    background: var(--xhy-glass) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--xhy-glass-border);
    box-shadow: 0 6px 24px rgba(31, 45, 64, .08) !important;
}

.navbar-brand-box {
    background: transparent !important;
    padding: 0 8px 0 0 !important;
    width: 230px;
}

.navbar-brand-box .logo-lg img,
.navbar-brand-box .logo-sm img {
    max-height: 40px;
    width: auto;
}

#vertical-menu-btn {
    color: var(--xhy-ink-2);
}

.header-item {
    color: var(--xhy-ink-2);
    border-radius: 10px;
}

.header-item:hover,
.navbar-header .dropdown.show .header-item {
    background: rgba(15, 81, 50, .08) !important;
    color: var(--xhy-green) !important;
}

/* ---------- 侧边栏 ---------- */
body[data-sidebar="dark"] .vertical-menu,
.vertical-menu {
    background: var(--xhy-glass) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-right: 1px solid var(--xhy-glass-border);
    box-shadow: 6px 0 24px rgba(31, 45, 64, .06);
}

body[data-sidebar="dark"] #sidebar-menu ul li a,
#sidebar-menu ul li a {
    color: var(--xhy-ink-2);
}

body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a,
#sidebar-menu ul li ul.sub-menu li a {
    color: #5b6b7a;
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover i {
    color: var(--xhy-green) !important;
}

body[data-sidebar="dark"] .mm-active > a,
body[data-sidebar="dark"] .mm-active > a i,
body[data-sidebar="dark"] .mm-active > i,
body[data-sidebar="dark"] .mm-active,
.mm-active > a,
.mm-active > a i {
    color: var(--xhy-green) !important;
    background: transparent !important;
}

body[data-sidebar="dark"] .mm-active .active,
.mm-active .active,
#sidebar-menu ul li a.active {
    background: var(--xhy-green) !important;
    color: #fff !important;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 81, 50, .22);
}

body[data-sidebar="dark"] .mm-active .active i,
.mm-active .active i {
    color: #fff !important;
}

#sidebar-menu ul li a {
    border-radius: 10px;
    margin: 2px 10px;
    padding: .55rem 1rem;
    transition: all .18s ease;
}

#sidebar-menu ul li a:hover {
    background: rgba(15, 81, 50, .07);
}

/* ---------- 内容区 ---------- */
.main-content {
    background: transparent !important;
}

.page-title-box {
    background: transparent;
    padding-bottom: 8px;
}

.page-title-box h4,
.page-title-box .page-title {
    color: var(--xhy-ink) !important;
    font-weight: 600;
}

.breadcrumb-item a,
.breadcrumb-item.active {
    color: var(--xhy-ink-2);
}

/* ---------- 卡片 ---------- */
.card {
    background: var(--xhy-glass) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--xhy-glass-border) !important;
    border-radius: var(--xhy-radius) !important;
    box-shadow: var(--xhy-shadow);
    color: var(--xhy-ink);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--xhy-line) !important;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--xhy-line) !important;
}

.card-body,
.card-title {
    color: var(--xhy-ink);
}

/* ---------- 按钮 ---------- */
.btn {
    border-radius: 10px;
    transition: all .18s ease;
}

.btn-primary,
.btn-success {
    background: var(--xhy-green) !important;
    border-color: var(--xhy-green) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(15, 81, 50, .2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: var(--xhy-green-deep) !important;
    border-color: var(--xhy-green-deep) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--xhy-green) !important;
    border-color: var(--xhy-green) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--xhy-green) !important;
    border-color: var(--xhy-green) !important;
    color: #fff !important;
}

.btn-link,
.btn-light {
    color: var(--xhy-green) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, .8) !important;
    border-color: rgba(31, 45, 64, .15) !important;
    color: var(--xhy-ink-2) !important;
}

/* ---------- 表单 ---------- */
.form-control {
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(31, 45, 64, .14) !important;
    border-radius: 10px !important;
    color: var(--xhy-ink) !important;
    box-shadow: none !important;
    min-height: 42px;
}

.form-control:focus {
    border-color: var(--xhy-green) !important;
    box-shadow: 0 0 0 3px rgba(15, 81, 50, .12) !important;
}

.form-control::placeholder {
    color: #97a5b3;
}

label,
.col-form-label,
.form-group > label {
    color: var(--xhy-ink-2);
    font-weight: 500;
}

.input-group-text {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(31, 45, 64, .14);
    color: var(--xhy-ink-2);
}

/* ---------- 表格 ---------- */
.table {
    color: var(--xhy-ink);
}

.table thead th {
    border-top: none !important;
    border-bottom: 1px solid var(--xhy-line) !important;
    color: var(--xhy-ink-2);
    font-weight: 600;
    background: rgba(255, 255, 255, .35);
}

.table td,
.table th {
    border-top: 1px solid var(--xhy-line) !important;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: rgba(15, 81, 50, .05) !important;
}

/* ---------- 链接 / 文本 ---------- */
a {
    color: var(--xhy-green);
}

a:hover {
    color: var(--xhy-green-deep);
    text-decoration: none;
}

.text-primary {
    color: var(--xhy-green) !important;
}

.text-muted {
    color: #7d8b99 !important;
}

/* ---------- 下拉 / 弹窗 ---------- */
.dropdown-menu {
    background: var(--xhy-glass-strong);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--xhy-glass-border);
    border-radius: 12px;
    box-shadow: var(--xhy-shadow);
}

.dropdown-item {
    color: var(--xhy-ink-2);
    border-radius: 8px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(15, 81, 50, .08) !important;
    color: var(--xhy-green) !important;
}

.modal-content {
    background: var(--xhy-glass-strong);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--xhy-glass-border);
    border-radius: var(--xhy-radius);
    box-shadow: var(--xhy-shadow);
}

/* ---------- 分页 / 徽章 / 进度 ---------- */
.page-link {
    color: var(--xhy-green);
    border-color: var(--xhy-line);
    background: rgba(255, 255, 255, .85);
}

.page-item.active .page-link {
    background: var(--xhy-green) !important;
    border-color: var(--xhy-green) !important;
    color: #fff;
}

.badge-primary,
.badge-success {
    background: rgba(15, 81, 50, .12) !important;
    color: var(--xhy-green) !important;
}

.progress {
    background: rgba(31, 45, 64, .08);
    border-radius: 6px;
}

.progress-bar {
    background: var(--xhy-green);
}

/* ---------- 导航标签 ---------- */
.nav-tabs .nav-link {
    color: var(--xhy-ink-2);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--xhy-green) !important;
    border-bottom-color: var(--xhy-green) !important;
    background: transparent !important;
}

/* ---------- 页脚 ---------- */
.footer {
    background: transparent !important;
    color: var(--xhy-ink-2);
    border-top: 1px solid rgba(255, 255, 255, .5);
    font-size: 12px;
}

.footer a {
    color: var(--xhy-ink-2);
}

/* ---------- 弹层提示 ---------- */
#toast-container > div {
    border-radius: 12px;
    box-shadow: var(--xhy-shadow);
}

/* ---------- 控制台统计卡：统一深绿 ---------- */
.bl-yellow,
.bl-green,
.bl-blue,
.bl-global {
    border-left-color: var(--xhy-green) !important;
}

.bl-yellow i,
.bl-green i,
.bl-blue i,
.bl-global i {
    color: var(--xhy-green) !important;
    opacity: .8;
}

.badge-soft-yunyoo {
    color: var(--xhy-green) !important;
    background-color: rgba(15, 81, 50, .12) !important;
}

/* ---------- 表格表头：去掉淡紫底色 ---------- */
.table thead.bg-light,
.table > thead.bg-light {
    background: transparent !important;
}

.table-responsive thead th,
.table thead th {
    background-color: rgba(15, 81, 50, .06) !important;
    color: var(--xhy-ink-2) !important;
    font-weight: 600;
}

/* ---------- 侧边栏：内容高度玻璃卡片（不留空白长条） ---------- */
@media (min-width: 992px) {
    .vertical-menu {
        bottom: auto !important;
        height: auto !important;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        padding-bottom: 10px;
        border-radius: 0 0 18px 0;
    }
}

/* ---------- 用户头像 ---------- */
.user-center_header {
    object-fit: cover;
    background: rgba(15, 81, 50, .08);
}

/* ---------- 个人资料卡：本地风景图 + 深绿遮罩（覆盖 .card 的玻璃底色） ---------- */
.card.user-center_h300.p-0 {
    background-color: #0a3d26 !important;
    background-image: url('/themes/clientarea/yunyoo/assets_custom/img/scenery/bg1.jpg') !important;
    background-position: 50% 50% !important;
    background-size: cover !important;
    overflow: hidden;
}

/* ---------- 安全中心图标统一深绿 ---------- */
.security-item-icon,
.security-item-icon.bg-primary,
.security-item-icon.bg-info,
.security-item-icon.bg-danger {
    background: var(--xhy-green) !important;
}

/* ---------- 安全中心顶部深绿横幅（白字可读） ---------- */
.card.bg-primary,
.security-header.bg-primary {
    background-color: var(--xhy-green) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
}

.security-header .progress {
    background: rgba(255, 255, 255, .22) !important;
}

.security-header .progress-bar.bg-danger {
    background: #7bd3a8 !important;
}

/* ---------- 移动端顶部 logo（与首页保持一致，不缺失、不贴边） ---------- */
@media (max-width: 991.98px) {
    .navbar-brand-box {
        display: flex !important;
        align-items: center;
        width: auto !important;
        padding: 0 8px 0 2px !important;
    }

    .navbar-brand-box .logo-lg {
        display: inline-flex !important;
        align-items: center;
    }

    .navbar-brand-box .logo-lg img {
        max-height: 30px;
        width: auto;
    }
}