/*
Vine Studio Safe Theme Fix V4

核心原则：
1. 不再强制修改所有 card/table/form 的布局。
2. 不隐藏业务功能。
3. 恢复页面自然高度与滚动。
4. 后台标题缩小。
5. 主题按钮固定左下角。
*/


:root {
    color-scheme: light;

    --vine-page-bg: #f5f6fa;
    --vine-surface: #ffffff;
    --vine-text: #11131b;
    --vine-muted: #697386;
    --vine-border: #e5e7ed;
    --vine-brand: #6957e8;
}


html[data-theme="dark"] {
    color-scheme: dark;

    --vine-page-bg: #0f1117;
    --vine-surface: #181b23;
    --vine-text: #f3f4f7;
    --vine-muted: #a6adba;
    --vine-border: #303541;
    --vine-brand: #8172ff;
}


/*
==================================================
最重要：恢复完整页面高度和滚动
==================================================
*/

html {
    min-height: 100% !important;

    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}


body {
    min-height: 100vh !important;

    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    background:
        var(--vine-page-bg);

    color:
        var(--vine-text);
}


/*
避免主区域被锁成一个屏幕高度。
*/

main,
.container,
.content,
.page,
.page-content,
.admin-content,
.dashboard,
main > div {
    max-height: none !important;

    overflow: visible;
}


/*
不要影响业务组件原来的 display。
*/

main {
    min-height:
        calc(
            100vh - 72px
        );
}


/*
==================================================
导航栏
==================================================
*/

header,
nav {
    position: relative;

    z-index: 100;
}


/*
==================================================
后台首页文字
==================================================
*/

.vine-dashboard-welcome {
    margin-bottom: 18px;

    color:
        var(--vine-muted);

    font-size:
        16px;

    font-weight:
        700;
}


/*
同时兼容上一版临时后台模板。
*/

.vine-admin-dashboard {
    width: auto;

    max-width: 1180px;

    min-height: 0 !important;

    margin: 32px auto;

    padding:
        clamp(
            28px,
            4vw,
            52px
        );

    box-sizing: border-box;

    border-radius: 24px;

    background:
        var(--vine-surface);
}


.vine-admin-welcome {
    margin-bottom: 18px;

    color:
        var(--vine-muted);

    font-size: 16px;

    font-weight: 700;
}


/*
原先最大 82px 太大。
现在桌面最大 52px。
*/

.vine-admin-dashboard h1 {
    max-width: 100%;

    margin:
        0 0 18px;

    font-size:
        clamp(
            32px,
            4vw,
            52px
        ) !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -0.035em;

    overflow-wrap:
        normal;

    word-break:
        normal;
}


.vine-dashboard-version,
.vine-admin-dashboard p {
    margin:
        14px 0 0;

    color:
        var(--vine-muted);

    font-size:
        16px;
}


/*
对普通后台大标题也限制一下，
防止再次出现一个标题占半个屏幕。
*/

.admin-dashboard h1,
.admin-page h1,
main h1 {
    max-width: 100%;

    word-break:
        normal;
}


/*
==================================================
主题颜色

只调整基础颜色，
不修改业务布局和 display。
==================================================
*/

html[data-theme="dark"] body {
    background:
        var(--vine-page-bg) !important;

    color:
        var(--vine-text);
}


html[data-theme="dark"] header,
html[data-theme="dark"] nav {
    background:
        var(--vine-surface);
}


html[data-theme="dark"] a {
    color:
        inherit;
}


/*
对表单只改颜色。
*/

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background:
        #12151d;

    color:
        #f3f4f7;

    border-color:
        var(--vine-border);
}


/*
==================================================
只隐藏旧的主题切换按钮

注意：
不使用过于宽泛的选择器，
防止误伤其他功能按钮。
==================================================
*/

#theme-toggle,
#themeToggle {
    display:
        none !important;
}


/*
==================================================
左下角最终主题按钮
==================================================
*/

#vine-theme-toggle-final {
    position:
        fixed;

    left:
        20px;

    bottom:
        20px;

    width:
        48px;

    height:
        48px;

    margin:
        0;

    padding:
        0;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--vine-border);

    border-radius:
        999px;

    background:
        var(--vine-surface);

    color:
        var(--vine-text);

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            .12
        );

    cursor:
        pointer;

    z-index:
        99999;
}


#vine-theme-toggle-final svg {
    width:
        22px;

    height:
        22px;
}


/*
==================================================
商品编辑页

只处理我们新增页面自己的类。
==================================================
*/

.vine-edit-page {
    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    margin:
        0 auto;

    padding:
        32px 0 70px;
}


.vine-edit-heading h1 {
    font-size:
        clamp(
            30px,
            4vw,
            48px
        ) !important;
}


/*
==================================================
移动端
==================================================
*/

@media (
    max-width: 768px
) {

    main {
        min-height:
            calc(
                100vh - 60px
            );
    }


    .vine-admin-dashboard {
        margin:
            20px 16px;

        padding:
            26px 22px;
    }


    .vine-admin-dashboard h1 {
        font-size:
            32px !important;
    }


    #vine-theme-toggle-final {
        left:
            14px;

        bottom:
            14px;

        width:
            44px;

        height:
            44px;
    }

}


/* =========================================================
   VINE ACCOUNT THEME FIX V4
   我的账户页面深浅主题适配
   ========================================================= */


/*
彻底隐藏页面右上角旧主题切换按钮。

这里覆盖常见旧按钮选择器，
但不会影响左下角最终按钮。
*/

nav #theme-toggle,
header #theme-toggle,
.navbar #theme-toggle,
.site-header #theme-toggle,

nav .theme-toggle,
header .theme-toggle,
.navbar .theme-toggle,
.site-header .theme-toggle,

nav [data-theme-toggle],
header [data-theme-toggle],
.navbar [data-theme-toggle],
.site-header [data-theme-toggle],

nav button[aria-label*="主题"],
header button[aria-label*="主题"],

nav button[title*="主题"],
header button[title*="主题"] {
    display: none !important;
}


/*
确保左下角最终按钮继续显示
*/

#vine-theme-toggle-final {
    display: flex !important;
}


/* =========================================================
   我的账户页面
   ========================================================= */


/*
账户页面最外层
*/

.account-page,
.account-container,
.profile-page,
.user-center,
.user-account,
.my-account,
main {
    color:
        var(--vine-final-text);
}


/*
账户顶部大卡片

兼容可能使用的不同 class 名
*/

.account-card,
.profile-card,
.account-info-card,
.user-card,
.profile-panel,
.account-panel {
    background:
        var(--vine-final-surface) !important;

    color:
        var(--vine-final-text) !important;

    border:
        1px solid
        var(--vine-final-border) !important;

    box-shadow:
        var(--vine-final-shadow) !important;
}


/*
账户资料内部的小信息卡片

截图中：
账户名称
绑定邮箱
邮箱状态
账号状态
账户类型
注册时间
*/

.account-card > div > div,
.account-info-card > div > div,
.profile-card > div > div,

.account-grid > div,
.profile-grid > div,
.user-info-grid > div,
.info-grid > div,

.account-item,
.profile-item,
.user-info-item,
.info-item,
.account-field,
.profile-field,
.stat-card {
    background:
        var(--vine-final-soft) !important;

    color:
        var(--vine-final-text) !important;

    border-color:
        var(--vine-final-border) !important;
}


/*
避免覆盖账户大卡片本身
*/

.account-card,
.account-info-card,
.profile-card {
    background:
        var(--vine-final-surface) !important;
}


/*
所有账户标题
*/

.account-page h1,
.account-page h2,
.account-page h3,

.account-container h1,
.account-container h2,
.account-container h3,

.profile-page h1,
.profile-page h2,
.profile-page h3,

.user-center h1,
.user-center h2,
.user-center h3,

.my-account h1,
.my-account h2,
.my-account h3 {
    color:
        var(--vine-final-text) !important;
}


/*
说明文字、字段名称
*/

.account-page p,
.account-page small,

.account-container p,
.account-container small,

.profile-page p,
.profile-page small,

.user-center p,
.user-center small,

.my-account p,
.my-account small,

.account-label,
.profile-label,
.info-label,
.field-label {
    color:
        var(--vine-final-muted) !important;
}


/*
实际字段值
*/

.account-value,
.profile-value,
.info-value,
.field-value,

.account-card strong,
.account-info-card strong,
.profile-card strong {
    color:
        var(--vine-final-text) !important;
}


/* =========================================================
   更精确处理截图中的浅色账户卡片问题
   ========================================================= */

html[data-theme="dark"] .account-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .account-info-card,
html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .profile-panel {
    background:
        #181b24 !important;

    color:
        #f2f4f8 !important;

    border-color:
        #303541 !important;
}


html[data-theme="dark"] .account-grid > div,
html[data-theme="dark"] .profile-grid > div,
html[data-theme="dark"] .user-info-grid > div,
html[data-theme="dark"] .info-grid > div,

html[data-theme="dark"] .account-item,
html[data-theme="dark"] .profile-item,
html[data-theme="dark"] .user-info-item,
html[data-theme="dark"] .info-item,
html[data-theme="dark"] .account-field,
html[data-theme="dark"] .profile-field {
    background:
        #222631 !important;

    color:
        #f2f4f8 !important;

    border-color:
        #303541 !important;
}


/*
由于你的实际模板可能没有上面的 class，
针对账户内容区域常见结构再补一层兼容。
*/

html[data-theme="dark"] main section > div {
    border-color:
        var(--vine-final-border);
}


/*
仅对较明显的浅色信息卡片做适配，
不修改按钮。
*/

html[data-theme="dark"] main div[class*="account"] div[class*="item"],
html[data-theme="dark"] main div[class*="account"] div[class*="info"],
html[data-theme="dark"] main div[class*="profile"] div[class*="item"],
html[data-theme="dark"] main div[class*="profile"] div[class*="info"] {
    background:
        var(--vine-final-soft) !important;

    color:
        var(--vine-final-text) !important;
}


/* =========================================================
   我的订单区域
   ========================================================= */

.orders-section,
.order-section,
.my-orders {
    color:
        var(--vine-final-text) !important;
}


.orders-section h1,
.orders-section h2,
.order-section h1,
.order-section h2,
.my-orders h1,
.my-orders h2 {
    color:
        var(--vine-final-text) !important;
}


.order-card,
.order-item,
.orders-empty,
.empty-orders,
.empty-state {
    background:
        var(--vine-final-surface) !important;

    color:
        var(--vine-final-text) !important;

    border-color:
        var(--vine-final-border) !important;
}


/*
截图中的“暂无订单”横条
*/

html[data-theme="dark"] .orders-empty,
html[data-theme="dark"] .empty-orders,
html[data-theme="dark"] .empty-state {
    background:
        #1d212b !important;

    color:
        #f2f4f8 !important;

    border:
        1px solid
        #303541 !important;
}


/* =========================================================
   状态标签
   ========================================================= */


/*
保留绿色“已验证 / 正常”
*/

.badge-success,
.status-success,
.verified,
.active-status {
    color:
        #15803d !important;

    background:
        #dcfce7 !important;
}


/*
管理员标签
*/

.badge-admin,
.admin-badge,
.role-admin {
    color:
        #6d4aff !important;

    background:
        #eee9ff !important;
}


/* =========================================================
   浅色模式重新明确
   ========================================================= */

html[data-theme="light"] .account-card,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .account-info-card,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .profile-panel {
    background:
        #ffffff !important;

    color:
        #171923 !important;

    border-color:
        #e4e7ee !important;
}


html[data-theme="light"] .account-grid > div,
html[data-theme="light"] .profile-grid > div,
html[data-theme="light"] .user-info-grid > div,
html[data-theme="light"] .info-grid > div,

html[data-theme="light"] .account-item,
html[data-theme="light"] .profile-item,
html[data-theme="light"] .user-info-item,
html[data-theme="light"] .info-item,
html[data-theme="light"] .account-field,
html[data-theme="light"] .profile-field {
    background:
        #f6f7fa !important;

    color:
        #171923 !important;

    border-color:
        #e4e7ee !important;
}


/* =========================================================
   防止右上角主题按钮占位
   ========================================================= */

header nav > button:empty,
.navbar nav > button:empty {
    display: none !important;
}