/* ==========================================================================
   Macy-API 后台主题系统  ——  admin-theme.css
   模式：白天 / 夜间 / 跟随系统      （复用框架的 .dark-mode）
   背景：6 套配色                    （html[data-mt-bg]）
   主题色：7 套                      （html[data-mt-accent]）
   只改颜色，不动任何结构与逻辑
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 变量默认值（= 现在的样子，不选任何主题时完全不变）
   -------------------------------------------------------------------------- */
html {
    --macy-page-bg: #f0f2f5;
    --macy-surface: #ffffff;
    --macy-border: rgba(15, 23, 42, .08);
    --macy-accent: #0284c7;
    --macy-accent-soft: rgba(2, 132, 199, .12);
}

html.macy-dark {
    --macy-page-bg: #1f2326;
    --macy-surface: #262a2f;
    --macy-border: #333a40;
}

/* --------------------------------------------------------------------------
   1. 背景配色（浅色）
   -------------------------------------------------------------------------- */
html[data-mt-bg="slate"]    { --macy-page-bg: #f0f2f5; --macy-surface: #ffffff; }
html[data-mt-bg="warm"]     { --macy-page-bg: #f7f2ea; --macy-surface: #fffdf9; }
html[data-mt-bg="mint"]     { --macy-page-bg: #e9f4ef; --macy-surface: #fbfefc; }
html[data-mt-bg="lavender"] { --macy-page-bg: #f1eff9; --macy-surface: #fdfcff; }
html[data-mt-bg="sky"]      { --macy-page-bg: #e9f1fb; --macy-surface: #fbfdff; }
html[data-mt-bg="rose"]     { --macy-page-bg: #fbeef1; --macy-surface: #fffafb; }

/* 背景配色（夜间） */
html.macy-dark[data-mt-bg="slate"]    { --macy-page-bg: #1f2326; --macy-surface: #262a2f; }
html.macy-dark[data-mt-bg="warm"]     { --macy-page-bg: #201c18; --macy-surface: #2a2521; }
html.macy-dark[data-mt-bg="mint"]     { --macy-page-bg: #15201c; --macy-surface: #1e2a25; }
html.macy-dark[data-mt-bg="lavender"] { --macy-page-bg: #1b1a24; --macy-surface: #252430; }
html.macy-dark[data-mt-bg="sky"]      { --macy-page-bg: #141c25; --macy-surface: #1e2733; }
html.macy-dark[data-mt-bg="rose"]     { --macy-page-bg: #221a1d; --macy-surface: #2c2226; }

/* --------------------------------------------------------------------------
   2. 主题色
   -------------------------------------------------------------------------- */
html[data-mt-accent="blue"]   { --macy-accent: #0284c7; --macy-accent-soft: rgba(2, 132, 199, .12); }
html[data-mt-accent="violet"] { --macy-accent: #7c3aed; --macy-accent-soft: rgba(124, 58, 237, .13); }
html[data-mt-accent="indigo"] { --macy-accent: #4f46e5; --macy-accent-soft: rgba(79, 70, 229, .13); }
html[data-mt-accent="green"]  { --macy-accent: #16a34a; --macy-accent-soft: rgba(22, 163, 74, .13); }
html[data-mt-accent="teal"]   { --macy-accent: #0d9488; --macy-accent-soft: rgba(13, 148, 136, .13); }
html[data-mt-accent="orange"] { --macy-accent: #ea580c; --macy-accent-soft: rgba(234, 88, 12, .13); }
html[data-mt-accent="rose"]   { --macy-accent: #e11d48; --macy-accent-soft: rgba(225, 29, 72, .12); }

/* --------------------------------------------------------------------------
   3. 把变量刷到页面上
   -------------------------------------------------------------------------- */
body,
#page-container,
#main-container {
    background-color: var(--macy-page-bg) !important;
}

#sidebar,
#page-header {
    background-color: var(--macy-surface) !important;
}

/* 卡片/面板底色跟随主题（带 bg-* 工具类的块不碰，避免破坏渐变 Banner） */
.block:not([class*="bg-"]) {
    background-color: var(--macy-surface) !important;
}

/* 首页 Banner 跟随主题色（原来写死成蓝色） */
.macy-admin-dash > .block.bg-primary-light {
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--macy-accent) 40%, #0a1020) 0%,
        var(--macy-accent) 52%,
        color-mix(in srgb, var(--macy-accent) 62%, #ffffff) 100%) !important;
}

/* 侧边栏图标/选中项跟随主题色（框架把图标色写死成 #0284c7） */
.nav-main-link.active .nav-main-link-icon,
.nav-main-link:focus .nav-main-link-icon,
.nav-main-link:hover .nav-main-link-icon {
    color: var(--macy-accent) !important;
}

#sidebar .nav-main-link.active {
    background-color: var(--macy-accent-soft) !important;
    color: var(--macy-accent) !important;
    border-radius: 10px;
}

/* 主题色覆盖（框架把主色写死了，这里按主题色重刷常用几处） */
.text-primary,
a.text-primary:hover {
    color: var(--macy-accent) !important;
}

.bg-primary {
    background-color: var(--macy-accent) !important;
}

.border-primary {
    border-color: var(--macy-accent) !important;
}

.btn-primary {
    background-color: var(--macy-accent) !important;
    border-color: var(--macy-accent) !important;
}

.btn-alt-primary {
    color: var(--macy-accent) !important;
    border-color: var(--macy-accent-soft) !important;
    background-color: var(--macy-accent-soft) !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--macy-accent) !important;
}

.nav-main-link.active::before,
.nav-main-link.active::after {
    background-color: var(--macy-accent) !important;
}

.nav-main-link.active {
    color: var(--macy-accent) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--macy-accent) !important;
    box-shadow: 0 0 0 .2rem var(--macy-accent-soft) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--macy-accent) !important;
}

.page-link.active,
.active > .page-link {
    background-color: var(--macy-accent) !important;
    border-color: var(--macy-accent) !important;
}

/* 暗色下侧栏/顶栏文字仍保持框架的浅色 */
html.macy-dark #sidebar,
html.macy-dark #page-header {
    color: #e4e7ed;
}

/* --------------------------------------------------------------------------
   4. 主题切换面板（顶栏那颗调色板按钮）
   -------------------------------------------------------------------------- */
.macy-theme-menu {
    width: 268px;
    padding: 0 !important;
    border: 1px solid var(--macy-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .38) !important;
    overflow: hidden;
}

.macy-theme-menu .macy-theme-head {
    padding: .6rem .9rem;
    background: linear-gradient(180deg, var(--macy-accent-soft), transparent);
    border-bottom: 1px solid var(--macy-border);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--macy-accent);
}

.macy-theme-menu .macy-theme-ver {
    float: right;
    opacity: .5;
    font-weight: 600;
    letter-spacing: 0;
}

.macy-theme-menu .macy-theme-body {
    padding: .75rem .9rem .9rem;
}

.macy-theme-label {
    margin: .55rem 0 .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8b95a3;
}

.macy-theme-row {
    display: flex;
    gap: .35rem;
}

.macy-chip {
    flex: 1;
    padding: .35rem .2rem;
    border: 1px solid var(--macy-border);
    border-radius: 9px;
    background: transparent;
    color: #6b7480;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.macy-chip:hover {
    border-color: var(--macy-accent);
    color: var(--macy-accent);
}

.macy-chip.active {
    background: var(--macy-accent);
    border-color: var(--macy-accent);
    color: #fff;
    box-shadow: 0 6px 14px -6px var(--macy-accent);
}

.macy-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.macy-swatch {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--sw, #ddd);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.macy-swatch:hover {
    transform: translateY(-2px) scale(1.06);
}

.macy-swatch.active {
    border-color: var(--macy-accent);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--macy-accent-soft);
}

.macy-swatch.active::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45));
}

html.macy-dark .macy-theme-menu {
    background: var(--macy-surface);
}

html.macy-dark .macy-theme-label {
    color: #8b95a3;
}

html.macy-dark .macy-chip {
    color: #b9c1cb;
    border-color: var(--macy-border);
}

html.macy-dark .macy-swatch.active {
    box-shadow: 0 0 0 2px var(--macy-surface), 0 0 0 4px var(--macy-accent-soft);
}

/* --------------------------------------------------------------------------
   9. 内容区铺满
   框架的 main-content-boxed 把内容限宽 1260px 居中，左右各留一大块空白；
   这里放开限宽，让内容铺满整个工作区（含顶栏与页脚，保持对齐一致）。
   -------------------------------------------------------------------------- */
#page-container.main-content-boxed > #main-container .content,
#page-container.main-content-boxed > #page-footer .content,
#page-container.main-content-boxed > #page-header .content,
#page-container.main-content-boxed > #page-header .content-header {
    max-width: 100%;
}