/**
 * 后台布局主题变体（参考 Ant Design Pro / Vben Admin 主题面板）
 * 通过 html[data-accent|data-sidebar|data-bg|data-surface|data-density] 切换
 */

/* —— 主色 —— */
html[data-accent="teal"] {
    --saas-accent: #1f8a70;
    --saas-accent-2: #176b57;
    --el-color-primary: #1f8a70;
}
html[data-accent="blue"] {
    --saas-accent: #2563eb;
    --saas-accent-2: #1d4ed8;
    --el-color-primary: #2563eb;
}
html[data-accent="indigo"] {
    --saas-accent: #4f46e5;
    --saas-accent-2: #4338ca;
    --el-color-primary: #4f46e5;
}
html[data-accent="violet"] {
    --saas-accent: #7c3aed;
    --saas-accent-2: #6d28d9;
    --el-color-primary: #7c3aed;
}
html[data-accent="rose"] {
    --saas-accent: #e11d48;
    --saas-accent-2: #be123c;
    --el-color-primary: #e11d48;
}
html[data-accent="amber"] {
    --saas-accent: #d97706;
    --saas-accent-2: #b45309;
    --el-color-primary: #d97706;
}
html[data-accent="cyan"] {
    --saas-accent: #0891b2;
    --saas-accent-2: #0e7490;
    --el-color-primary: #0891b2;
}

html[data-accent]:not([data-accent="teal"]) .el-button--primary,
html[data-accent]:not([data-accent="teal"]) .topbar-tenant-dot {
    box-shadow: 4px 4px 10px color-mix(in srgb, var(--saas-accent) 35%, transparent),
        -2px -2px 8px rgba(255, 255, 255, 0.35);
}

/* —— 页面背景色 —— */
html[data-bg="neu"] {
    --saas-bg: #e8ecf0;
    --saas-surface: #e8ecf0;
    --neu-dark: #c5cdd5;
    --neu-light: #ffffff;
}
html[data-bg="slate"] {
    --saas-bg: #e4e9f0;
    --saas-surface: #e4e9f0;
    --neu-dark: #bec7d4;
    --neu-light: #f7f9fc;
}
html[data-bg="sand"] {
    --saas-bg: #efeae3;
    --saas-surface: #efeae3;
    --neu-dark: #d4c9ba;
    --neu-light: #fffdf9;
}
html[data-bg="mint"] {
    --saas-bg: #e4efeb;
    --saas-surface: #e4efeb;
    --neu-dark: #bfd0c9;
    --neu-light: #f6fcfa;
}
html[data-bg="lavender"] {
    --saas-bg: #ebe8f2;
    --saas-surface: #ebe8f2;
    --neu-dark: #c9c3d6;
    --neu-light: #faf8ff;
}
html[data-bg="peach"] {
    --saas-bg: #f2e8e4;
    --saas-surface: #f2e8e4;
    --neu-dark: #d5c4bc;
    --neu-light: #fffaf8;
}
html[data-bg="sky"] {
    --saas-bg: #e3eef6;
    --saas-surface: #e3eef6;
    --neu-dark: #bcd0df;
    --neu-light: #f5fbff;
}

/* —— 侧栏风格 —— */
html[data-sidebar="dark"] {
    --saas-side: #0f2b3c;
    --saas-side-2: #16384d;
}
html[data-sidebar="navy"] {
    --saas-side: #0b1f3a;
    --saas-side-2: #143056;
}
html[data-sidebar="teal"] {
    --saas-side: #12352f;
    --saas-side-2: #1a4a41;
}
html[data-sidebar="charcoal"] {
    --saas-side: #1f2429;
    --saas-side-2: #2c333a;
}
html[data-sidebar="light"] {
    --saas-side: #e8ecf0;
    --saas-side-2: #dde3e9;
}
html[data-sidebar="light"] body[data-app="platform"] .side {
    background: linear-gradient(180deg, var(--saas-side) 0%, var(--saas-side-2) 100%);
    color: #3a4750;
    box-shadow: var(--neu-shadow-sm);
}
html[data-sidebar="light"] body[data-app="platform"] .side-brand,
html[data-sidebar="light"] body[data-app="platform"] .side-brand small {
    color: #1d2a33;
}
html[data-sidebar="light"] body[data-app="platform"] .side-brand small {
    color: #8a9aa5;
}
html[data-sidebar="light"] body[data-app="platform"] .side-link {
    color: #3a4750;
}
html[data-sidebar="light"] body[data-app="platform"] .side-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--saas-accent);
}
html[data-sidebar="light"] body[data-app="platform"] .side-link.active {
    background: color-mix(in srgb, var(--saas-accent) 12%, transparent);
    color: var(--saas-accent);
}
html[data-sidebar="light"] .side-first {
    background: linear-gradient(180deg, #f0f3f6 0%, #e4e9ee 100%);
    box-shadow: var(--neu-shadow-sm);
}
html[data-sidebar="light"] .side-first-item {
    color: #5a6872;
}
html[data-sidebar="light"] .side-first-item:hover,
html[data-sidebar="light"] .side-first-item.active {
    background: rgba(0, 0, 0, 0.06);
    color: var(--saas-accent);
}
html[data-sidebar="light"] .side-brand-mark {
    background: color-mix(in srgb, var(--saas-accent) 18%, #fff);
    color: var(--saas-accent);
}
html[data-sidebar="light"] .side-brand small {
    color: #8a9aa5 !important;
}

body[data-app="shop"] {
    /* 租户默认侧栏仍可用 html[data-sidebar] 覆盖 */
}
html[data-sidebar="navy"] body[data-app="shop"],
html[data-sidebar="dark"] body[data-app="shop"],
html[data-sidebar="charcoal"] body[data-app="shop"],
html[data-sidebar="teal"] body[data-app="shop"] {
    --saas-side: inherit;
}
html[data-sidebar="navy"] body[data-app="shop"] { --saas-side: #0b1f3a; --saas-side-2: #143056; }
html[data-sidebar="dark"] body[data-app="shop"] { --saas-side: #0f2b3c; --saas-side-2: #16384d; }
html[data-sidebar="charcoal"] body[data-app="shop"] { --saas-side: #1f2429; --saas-side-2: #2c333a; }
html[data-sidebar="teal"] body[data-app="shop"] { --saas-side: #12352f; --saas-side-2: #1a4a41; }

html[data-sidebar="navy"] .side-first,
html[data-sidebar="dark"] .side-first,
html[data-sidebar="charcoal"] .side-first,
html[data-sidebar="teal"] .side-first {
    background: linear-gradient(180deg, var(--saas-side) 0%, var(--saas-side-2) 100%);
}

/* —— 表面样式：soft 拟态 / flat 扁平 / bordered 描边 —— */
html[data-surface="soft"] .page-card,
html[data-surface="soft"] .stat-item,
html[data-surface="soft"] .login-card,
html[data-surface="soft"] .el-card {
    border: none;
    box-shadow: var(--neu-shadow);
    background: var(--saas-surface);
}
html[data-surface="flat"] {
    --neu-shadow: none;
    --neu-shadow-sm: none;
    --neu-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    --neu-inset-sm: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
html[data-surface="flat"] .page-card,
html[data-surface="flat"] .stat-item,
html[data-surface="flat"] .el-card,
html[data-surface="flat"] .page-list-card,
html[data-surface="flat"] .topbar,
html[data-surface="flat"] .m-topbar {
    background: #fff;
    box-shadow: none;
    border: none;
}
html[data-surface="flat"] body,
html[data-surface="flat"] .m-layout {
    background: var(--saas-bg);
}
html[data-surface="bordered"] {
    --neu-shadow: none;
    --neu-shadow-sm: none;
}
html[data-surface="bordered"] .page-card,
html[data-surface="bordered"] .stat-item,
html[data-surface="bordered"] .el-card,
html[data-surface="bordered"] .page-list-card,
html[data-surface="bordered"] .login-card {
    background: #fff;
    border: 1px solid rgba(15, 43, 60, 0.1);
    box-shadow: 0 1px 2px rgba(15, 43, 60, 0.04);
}
html[data-surface="bordered"] .topbar,
html[data-surface="bordered"] .m-topbar {
    background: #fff;
    border-bottom: 1px solid rgba(15, 43, 60, 0.08);
    box-shadow: none;
}
html[data-surface="bordered"] .el-input__wrapper,
html[data-surface="bordered"] .el-select__wrapper,
html[data-surface="bordered"] .el-textarea__inner {
    box-shadow: 0 0 0 1px rgba(15, 43, 60, 0.12) inset !important;
    background: #fff !important;
}

/* —— 紧凑密度 —— */
html[data-density="compact"] .content,
html[data-density="compact"] .m-content {
    padding: 12px;
}
html[data-density="compact"] .page-card {
    padding: 14px;
    border-radius: 12px;
}
html[data-density="compact"] .topbar {
    height: 50px;
}
html[data-density="compact"] .stat-item {
    padding: 12px 14px;
}
html[data-density="compact"] .stat-item .value {
    font-size: 22px;
    margin-top: 6px;
}
html[data-density="compact"] .page-title {
    font-size: 16px;
    margin-bottom: 12px;
}

/* —— 主题设置抽屉 UI —— */
.theme-mask {
    position: fixed;
    inset: 0;
    z-index: 2400;
    background: rgba(15, 28, 36, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.theme-mask.is-open {
    opacity: 1;
    pointer-events: auto;
}
.theme-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2410;
    width: min(360px, 92vw);
    height: 100vh;
    background: var(--saas-surface, #e8ecf0);
    box-shadow: -8px 0 28px rgba(15, 43, 60, 0.18);
    transform: translateX(105%);
    transition: transform 0.22s ease;
    display: flex;
    flex-direction: column;
}
.theme-drawer.is-open {
    transform: translateX(0);
}
.theme-drawer-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: none;
    box-shadow: var(--neu-shadow-sm, 0 1px 0 rgba(0,0,0,.06));
}
.theme-drawer-hd h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
}
.theme-drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--saas-bg);
    color: #5f707a;
    cursor: pointer;
    box-shadow: var(--neu-shadow-sm);
    font-size: 18px;
    line-height: 1;
}
.theme-drawer-bd {
    flex: 1;
    overflow: auto;
    padding: 16px 18px 28px;
}
.theme-section {
    margin-bottom: 22px;
}
.theme-section-title {
    font-size: 13px;
    font-weight: 650;
    color: #4a5a66;
    margin: 0 0 10px;
}
.theme-section-desc {
    font-size: 12px;
    color: #8a9aa5;
    margin: -4px 0 10px;
}
.theme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.theme-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--neu-shadow-sm);
    position: relative;
}
.theme-swatch.is-on {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--saas-accent);
}
.theme-swatch::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: transparent;
}
.theme-swatch.is-on::after {
    content: "✓";
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.theme-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.theme-chip {
    appearance: none;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    background: var(--saas-bg);
    color: #3a4750;
    box-shadow: var(--neu-shadow-sm);
}
.theme-chip.is-on {
    color: var(--saas-accent);
    font-weight: 650;
    box-shadow: var(--neu-inset-sm);
}
.theme-bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.theme-bg-item {
    appearance: none;
    border: 2px solid transparent;
    border-radius: 12px;
    height: 52px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--neu-shadow-sm);
}
.theme-bg-item span {
    position: absolute;
    left: 8px;
    bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #3a4750;
    background: rgba(255,255,255,.55);
    padding: 1px 6px;
    border-radius: 6px;
}
.theme-bg-item.is-on {
    border-color: var(--saas-accent);
    box-shadow: 0 0 0 1px var(--saas-accent);
}
.theme-sidebar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.theme-side-item {
    appearance: none;
    border: 2px solid transparent;
    border-radius: 10px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.theme-side-item.is-on {
    border-color: var(--saas-accent);
}
.theme-side-item[data-v="light"] {
    color: #3a4750;
    text-shadow: none;
}
.theme-footer {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.theme-footer button {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
}
.theme-btn-reset {
    background: var(--saas-bg);
    color: #4a5a66;
    box-shadow: var(--neu-shadow-sm);
}
.theme-btn-copy {
    background: var(--saas-accent);
    color: #fff;
    box-shadow: 4px 4px 10px color-mix(in srgb, var(--saas-accent) 35%, transparent);
}

body[data-device="mobile"] .theme-drawer {
    width: min(100vw, 360px);
}