/* =====================================================
   全局主题层（admin-theme）—— 多主题可切换
   机制：所有颜色走 CSS 变量；html[data-theme=...] 切换变量组。
   切换由 /static/js/theme-switcher.js 驱动，选择存 localStorage(rl_theme)。
   主题清单：midnight 午夜蓝(默认) / ink 深空墨 / github 极简灰 /
             notion 暖米白 / stripe 雾靛紫
   加载位置：fastapi_base.html 中位于页内 <style> 之后，
   同优先级规则以本文件为准；页面 block head 内样式仍可覆盖。
   ===================================================== */

/* ===== 主题变量定义 ===== */

/* 午夜蓝（默认）：当前深色方案的降对比版本 */
:root {
    --t-accent: #4a7fd4;
    --t-accent-hover: #3a6cc2;
    --t-accent-ring: rgba(74, 127, 212, .14);

    --t-page-bg: #f4f6f9;
    --t-card-border: #e6eaf1;
    --t-table-head-bg: #f8fafc;
    --t-row-hover: #f2f7ff;
    --t-input-border: #d3dae3;

    --t-navbar-bg: #2e3e52;
    --t-navbar-border: rgba(255, 255, 255, .09);
    --t-navbar-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    --t-navbar-text: #d7dfea;
    --t-btn-text: #dbe3ec;
    --t-btn-border: rgba(255, 255, 255, .32);
    --t-btn-hover-bg: rgba(255, 255, 255, .14);

    --t-sidebar-bg: #2b3a4d;
    --t-sidebar-header-bg: #243243;
    --t-sidebar-border: rgba(148, 163, 184, .14);
    --t-sidebar-title: #e4eaf1;
    --t-menu-item-border: rgba(148, 163, 184, .08);
    --t-menu-text: #c3cedd;
    --t-menu-hover-bg: rgba(255, 255, 255, .07);
    --t-menu-hover-text: #ffffff;
    --t-menu-active-bg: rgba(105, 150, 220, .32);
    --t-menu-active-text: #ffffff;
    --t-menu-active-bar: #7ca7e0;
    --t-menu-sub-text: #a9b7c9;
    --t-menu-sub-bg: rgba(255, 255, 255, .02);
    --t-menu-sub-border: rgba(148, 163, 184, .18);
    --t-menu-sub3-text: #93a3b8;
    --t-menu-sub3-bg: rgba(0, 0, 0, .15);

    /* 内容区语义变量（浅色默认值兜底；33 套扩展主题在 themes.css 按 data-mode 派生） */
    --t-content-bg: #ffffff;            /* 卡片/弹窗/下拉/表格底 */
    --t-content-bg-soft: #f8fafc;       /* 次级表面：表头/card-header/输入框禁用底 */
    --t-content-bg-hover: #f2f7ff;      /* 行 hover / 下拉项 hover */
    --t-content-border: #e6eaf1;        /* 内容区通用边框 */
    --t-content-text: #24303f;          /* 正文文字 */
    --t-content-text-muted: #5c6a7c;    /* 次要文字 */
    --t-input-bg: #ffffff;              /* 输入框底 */
    --t-link: #2563eb;                  /* 链接色 */
    --t-shadow: rgba(15, 23, 42, .07);  /* 卡片阴影 */
    --t-shadow-lg: rgba(15, 23, 42, .14);
    --t-scroll-thumb: #c4ccd8;
    --t-scroll-thumb-hover: #a8b3c2;
    --t-success-text: #0f5132; --t-success-bg: #d1e7dd; --t-success-border: #a3cfbb;
    --t-danger-text: #842029;  --t-danger-bg: #f8d7da;  --t-danger-border: #f1aeb5;
    --t-warning-text: #664d03; --t-warning-bg: #fff3cd; --t-warning-border: #ffe69c;
    --t-info-text: #055160;    --t-info-bg: #cff4fc;    --t-info-border: #9eeaf9;

    /* 动效令牌 */
    --t-ease: cubic-bezier(.4, 0, .2, 1);
    --t-dur: .28s;

    /* 桥接 Bootstrap 5.1 根变量，让已适配组件自动跟随主题 */
    --bs-body-bg: var(--t-page-bg);
    --bs-body-color: var(--t-content-text);
    --bs-border-color: var(--t-content-border);
    --bs-link-color: var(--t-link);

    /* 认证页（登录/注册）左侧品牌栏 */
    --auth-panel-bg: #2b3a4d;
    --auth-panel-grid: rgba(200, 214, 230, .07);
    --auth-panel-name: #eef2f7;
    --auth-panel-desc: #adbccd;
    --auth-panel-title: #f4f7fa;
    --auth-panel-item: #b9c6d6;
    --auth-panel-item-icon: #8fb0dd;
    --auth-panel-foot: #93a3b8;
}

/* 深空墨：最初的近黑墨色（对比最强的一档） */
[data-theme="ink"] {
    --t-accent: #2563eb;
    --t-accent-hover: #1d4ed8;
    --t-accent-ring: rgba(37, 99, 235, .12);

    --t-navbar-bg: #0f172a;
    --t-navbar-border: rgba(255, 255, 255, .1);
    --t-navbar-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    --t-navbar-text: rgba(255, 255, 255, .85);
    --t-btn-text: #e2e8f0;
    --t-btn-border: rgba(255, 255, 255, .35);
    --t-btn-hover-bg: rgba(255, 255, 255, .12);

    --t-sidebar-bg: #111a2c;
    --t-sidebar-header-bg: #0c1424;
    --t-sidebar-border: rgba(148, 163, 184, .12);
    --t-sidebar-title: #e2e8f0;
    --t-menu-item-border: rgba(148, 163, 184, .07);
    --t-menu-text: #9aa8bd;
    --t-menu-hover-bg: rgba(255, 255, 255, .05);
    --t-menu-active-bg: rgba(37, 99, 235, .32);
    --t-menu-active-bar: #60a5fa;
    --t-menu-sub-text: #8b99ae;
    --t-menu-sub3-text: #7d8ca3;
    --t-menu-sub3-bg: rgba(0, 0, 0, .16);

    --auth-panel-bg: #0f172a;
    --auth-panel-grid: rgba(148, 163, 184, .06);
    --auth-panel-name: #f1f5f9;
    --auth-panel-desc: #a9b7cc;
    --auth-panel-title: #f8fafc;
    --auth-panel-item: #a7b3c6;
    --auth-panel-item-icon: #60a5fa;
    --auth-panel-foot: #8090a8;
}

/* 极简灰（GitHub Primer Light）：全浅色中性灰 + 少量蓝 */
[data-theme="github"] {
    --t-accent: #0969da;
    --t-accent-hover: #0860c6;
    --t-accent-ring: rgba(9, 105, 218, .12);

    --t-page-bg: #f6f8fa;
    --t-card-border: #d8dee4;
    --t-table-head-bg: #f6f8fa;
    --t-row-hover: #eef3f8;
    --t-input-border: #d0d7de;

    --t-navbar-bg: #ffffff;
    --t-navbar-border: #d8dee4;
    --t-navbar-shadow: none;
    --t-navbar-text: #1f2328;
    --t-btn-text: #24292f;
    --t-btn-border: #d0d7de;
    --t-btn-hover-bg: #f3f4f6;

    --t-sidebar-bg: #f6f8fa;
    --t-sidebar-header-bg: #eef1f4;
    --t-sidebar-border: #d8dee4;
    --t-sidebar-title: #1f2328;
    --t-menu-item-border: #e7ebef;
    --t-menu-text: #374151;
    --t-menu-hover-bg: #e9edf1;
    --t-menu-hover-text: #1f2328;
    --t-menu-active-bg: rgba(9, 105, 218, .1);
    --t-menu-active-text: #0965d2;
    --t-menu-active-bar: #0969da;
    --t-menu-sub-text: #57606a;
    --t-menu-sub-bg: rgba(0, 0, 0, .015);
    --t-menu-sub-border: #d8dee4;
    --t-menu-sub3-text: #6e7781;
    --t-menu-sub3-bg: rgba(0, 0, 0, .03);

    --auth-panel-bg: #f6f8fa;
    --auth-panel-grid: rgba(31, 35, 40, .05);
    --auth-panel-name: #1f2328;
    --auth-panel-desc: #57606a;
    --auth-panel-title: #1f2328;
    --auth-panel-item: #57606a;
    --auth-panel-item-icon: #0969da;
    --auth-panel-foot: #818b98;
}

/* 暖米白（Notion）：暖灰纸感，最柔和 */
[data-theme="notion"] {
    --t-accent: #2383e2;
    --t-accent-hover: #1b74cc;
    --t-accent-ring: rgba(35, 131, 226, .12);

    --t-page-bg: #ffffff;
    --t-card-border: #e9e9e7;
    --t-table-head-bg: #f7f6f3;
    --t-row-hover: #f7f6f3;
    --t-input-border: #e3e2e0;

    --t-navbar-bg: #ffffff;
    --t-navbar-border: #e9e9e7;
    --t-navbar-shadow: none;
    --t-navbar-text: #37352f;
    --t-btn-text: #37352f;
    --t-btn-border: #e3e2e0;
    --t-btn-hover-bg: #f1f0ee;

    --t-sidebar-bg: #f7f6f3;
    --t-sidebar-header-bg: #f1f0ed;
    --t-sidebar-border: #e9e9e7;
    --t-sidebar-title: #37352f;
    --t-menu-item-border: #edecEA;
    --t-menu-text: #4b4a46;
    --t-menu-hover-bg: #edece9;
    --t-menu-hover-text: #37352f;
    --t-menu-active-bg: rgba(35, 131, 226, .1);
    --t-menu-active-text: #196abb;
    --t-menu-active-bar: #2383e2;
    --t-menu-sub-text: #6f6e69;
    --t-menu-sub-bg: rgba(55, 53, 47, .02);
    --t-menu-sub-border: #e9e9e7;
    --t-menu-sub3-text: #7e7d7a;
    --t-menu-sub3-bg: rgba(55, 53, 47, .04);

    --auth-panel-bg: #f7f6f3;
    --auth-panel-grid: rgba(55, 53, 47, .05);
    --auth-panel-name: #37352f;
    --auth-panel-desc: #6f6e69;
    --auth-panel-title: #37352f;
    --auth-panel-item: #6f6e69;
    --auth-panel-item-icon: #2383e2;
    --auth-panel-foot: #9b9a97;
}

/* 雾靛紫（Stripe Dashboard）：冷雾灰 + 靛紫点缀（纯色，非渐变） */
[data-theme="stripe"] {
    --t-accent: #635bff;
    --t-accent-hover: #5851ea;
    --t-accent-ring: rgba(99, 95, 255, .13);

    --t-page-bg: #ffffff;
    --t-card-border: #e3e8ee;
    --t-table-head-bg: #f6f9fc;
    --t-row-hover: #f6f9fc;
    --t-input-border: #dcdfe6;

    --t-navbar-bg: #ffffff;
    --t-navbar-border: #e3e8ee;
    --t-navbar-shadow: none;
    --t-navbar-text: #3c4257;
    --t-btn-text: #3c4257;
    --t-btn-border: #dcdfe6;
    --t-btn-hover-bg: #f6f9fc;

    --t-sidebar-bg: #f6f9fc;
    --t-sidebar-header-bg: #eef2f7;
    --t-sidebar-border: #e3e8ee;
    --t-sidebar-title: #3c4257;
    --t-menu-item-border: #e6ebf1;
    --t-menu-text: #4f566b;
    --t-menu-hover-bg: #edf1f7;
    --t-menu-hover-text: #3c4257;
    --t-menu-active-bg: rgba(99, 95, 255, .12);
    --t-menu-active-text: #5851ea;
    --t-menu-active-bar: #635bff;
    --t-menu-sub-text: #697386;
    --t-menu-sub-bg: rgba(60, 66, 87, .02);
    --t-menu-sub-border: #e3e8ee;
    --t-menu-sub3-text: #757f8d;
    --t-menu-sub3-bg: rgba(60, 66, 87, .04);

    --auth-panel-bg: #f6f9fc;
    --auth-panel-grid: rgba(60, 66, 87, .05);
    --auth-panel-name: #3c4257;
    --auth-panel-desc: #697386;
    --auth-panel-title: #3c4257;
    --auth-panel-item: #697386;
    --auth-panel-item-icon: #635bff;
    --auth-panel-foot: #8792a2;
}

/* ===== 字体与基础 ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: .875rem;      /* 14px：管理后台标准密度 */
    background: var(--t-page-bg);
    color: var(--t-content-text);
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s ease, color .2s ease;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--t-content-text); }

a { color: var(--t-link); transition: color .15s ease; }
a:hover { color: var(--t-accent-hover); }

/* ===== 顶部导航栏 ===== */
nav.navbar.navbar-dark.bg-dark {
    background-color: var(--t-navbar-bg) !important;
    border-bottom: 1px solid var(--t-navbar-border);
    box-shadow: var(--t-navbar-shadow);
}

/* 与 Bootstrap .navbar-dark .navbar-brand 同特异度（0,2,0），后加载覆盖：
   浅色主题顶栏是浅底，Bootstrap 编译的白色品牌字必须换成主题变量，否则白底白字 */
.navbar-dark .navbar-brand {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--t-navbar-text);
}

.navbar-dark .navbar-text {
    color: var(--t-navbar-text);
    font-size: .875rem;
}

/* 顶栏按钮（菜单收纳/退出/主题切换）：深浅主题均保持可读 */
.navbar .btn-outline-light {
    color: var(--t-btn-text);
    border-color: var(--t-btn-border);
}

.navbar .btn-outline-light:hover,
.navbar .btn-outline-light:focus {
    background: var(--t-btn-hover-bg);
    color: var(--t-btn-text);
    border-color: var(--t-btn-border);
}

/* ===== 侧边栏 ===== */
.modern-sidebar {
    background: var(--t-sidebar-bg);
    border-right: 1px solid var(--t-sidebar-border);
}

.modern-sidebar-header {
    background: var(--t-sidebar-header-bg);
    border-bottom: 1px solid var(--t-sidebar-border);
}

.modern-sidebar-header h3 {
    color: var(--t-sidebar-title);
    font-size: 1.05rem;
    font-weight: 600;
}

.modern-sidebar-menu .nav-item {
    border-bottom: 1px solid var(--t-menu-item-border);
}

.modern-sidebar-menu .nav-link {
    color: var(--t-menu-text);
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* hover 不再位移文字，改为底色反馈 */
.modern-sidebar-menu .nav-link:hover {
    background: var(--t-menu-hover-bg);
    color: var(--t-menu-hover-text);
    padding-left: 20px;
    border-left-color: var(--t-menu-sub-border);
}

.modern-sidebar-menu .nav-link.active {
    background: var(--t-menu-active-bg);
    color: var(--t-menu-active-text);
    font-weight: 600;
    border-left-color: var(--t-menu-active-bar);
}

/* 二级菜单 */
.modern-sidebar-menu .submenu .nav-link {
    background: var(--t-menu-sub-bg);
    color: var(--t-menu-sub-text);
    border-left: 2px solid var(--t-menu-sub-border);
    padding-left: 44px;
}

.modern-sidebar-menu .submenu .nav-link.active {
    background: var(--t-menu-active-bg);
    color: var(--t-menu-active-text);
    font-weight: 600;
    border-left-color: var(--t-menu-active-bar);
}

.modern-sidebar-menu .submenu .nav-link:hover {
    background: var(--t-menu-hover-bg);
    color: var(--t-menu-hover-text);
    padding-left: 44px;
}

/* 三级菜单 */
.modern-sidebar-menu .submenu .submenu .nav-link {
    background: var(--t-menu-sub3-bg);
    color: var(--t-menu-sub3-text);
    border-left: 2px solid var(--t-menu-sub-border);
    padding-left: 60px;
}

.modern-sidebar-menu .submenu .submenu .nav-link.active {
    background: var(--t-menu-active-bg);
    color: var(--t-menu-active-text);
    font-weight: 600;
    border-left-color: var(--t-menu-active-bar);
}

.modern-sidebar-menu .submenu .submenu .nav-link:hover {
    background: var(--t-menu-hover-bg);
    color: var(--t-menu-hover-text);
    padding-left: 60px;
}

/* ===== 内容区背景 ===== */
.main-content,
.modern-content {
    background: var(--t-page-bg);
}

/* ===== 卡片 ===== */
/* html 前缀提升特异度：子模板在 admin-theme 之后加载 UI 库（如 MDB 的 .card 白底）时主题不被覆盖 */
html .card {
    border-radius: 10px;
    border: 1px solid var(--t-content-border);
    background: var(--t-content-bg);
    box-shadow: 0 1px 2px var(--t-shadow);
    margin-bottom: 1.5rem;
}

html .card-body { border-radius: 10px; background: transparent; color: var(--t-content-text); }

html .card-header {
    background: var(--t-content-bg-soft);
    border-bottom: 1px solid var(--t-content-border);
    color: var(--t-content-text);
    font-weight: 600;
    border-radius: 10px 10px 0 0;
}

.card-subtitle, .card-text { color: var(--t-content-text-muted); }

/* ===== 表格 ===== */
.table {
    border-color: var(--t-content-border);
    color: var(--t-content-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--t-content-text);
    /* Bootstrap 5.1 的 striped/hover/active 行文字色是独立变量，必须一并桥接，
       否则斑马行文字回退编译默认深灰，深色主题下深底深字不可读 */
    --bs-table-striped-color: var(--t-content-text);
    --bs-table-hover-color: var(--t-content-text);
    --bs-table-active-color: var(--t-content-text);
    --bs-table-striped-bg: var(--t-content-bg-soft);
    --bs-table-hover-bg: var(--t-content-bg-hover);
    background: var(--t-content-bg);
}

.table thead th {
    background: var(--t-content-bg-soft);
    color: var(--t-content-text-muted);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--t-content-border);
}

.table td, .table th { border-color: var(--t-content-border); }

.table-hover > tbody > tr:hover {
    background-color: var(--t-content-bg-hover);
    transition: background-color .15s ease;
}

/* ===== 表单控件 ===== */
/* html 前缀：MDB 等子模板后加载的 UI 库会以同特异度覆盖（如 .form-label 灰字），主题必须赢 */
html .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--t-content-text);
    margin-bottom: .35rem;
}

html .form-control,
html .form-select {
    font-size: .875rem;
    border-radius: 8px;
    border-color: var(--t-input-border);
    background-color: var(--t-input-bg);
    color: var(--t-content-text);
    padding: .42rem .7rem;
}

.form-control-sm, .form-select-sm { font-size: .8125rem; }

html .form-control:focus,
html .form-select:focus {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 3px var(--t-accent-ring);
    background-color: var(--t-input-bg);
    color: var(--t-content-text);
}

html .form-control:disabled,
html .form-select:disabled {
    background-color: var(--t-content-bg-soft);
    color: var(--t-content-text-muted);
}

/* 只读控件同桥接：Bootstrap 5.1 编译浅灰#e9ecef深色主题下白块(campaign_mgr Target Domain/Offer URL两列踩坑)。
   注意伪类是带连字符的 :read-only——写成属性名 :readonly 整条规则会被浏览器静默丢弃 */
html .form-control:read-only,
html .form-select:read-only {
    background-color: var(--t-content-bg-soft);
    color: var(--t-content-text-muted);
    border-color: var(--t-input-border);
}

html .form-control::placeholder { color: var(--t-content-text-muted); opacity: .65; }

.form-control-color { background-color: var(--t-input-bg); }

.form-check-input { background-color: var(--t-input-bg); border-color: var(--t-input-border); }
.form-check-input:checked {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
}
.form-check-input:focus { box-shadow: 0 0 0 3px var(--t-accent-ring); border-color: var(--t-accent); }

.input-group-text {
    background: var(--t-content-bg-soft);
    border-color: var(--t-input-border);
    color: var(--t-content-text-muted);
}

/* ===== 按钮 / 徽章 / 分页 / 下拉 ===== */
.btn { font-size: .875rem; border-radius: 8px; }
.btn-sm { font-size: .8125rem; }

/* 主按钮跟随主题强调色（html 前缀压过 MDB 同名规则; !important 压过个别页面自带样式表的蓝底覆盖,
       否则 on-accent 墨字配蓝底 3.8:1） */
html .btn-primary {
    background-color: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
}
html .btn-primary:hover, html .btn-primary:focus, html .btn-primary:active {
    background-color: var(--t-accent-hover) !important;
    border-color: var(--t-accent-hover) !important;
}
html .btn-outline-primary {
    /* 文字用压暗的 accent-hover：ayu-light 等亮 accent 主题下原色仅 ~2.9:1 */
    color: var(--t-accent-hover, var(--t-accent));
    border-color: var(--t-accent);
}
html .btn-outline-primary:hover, html .btn-outline-primary:focus {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-on-accent, #fff);
}

/* 亮色强调色（黄/青等）主题下主按钮文字自动切深色 */
html .btn-primary,
html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:disabled {
    color: var(--t-on-accent, #fff);
}

/* 中性描边按钮在深色内容区保持可读 */
html .btn-outline-secondary {
    color: var(--t-content-text-muted);
    border-color: var(--t-content-border);
}
html .btn-outline-secondary:hover, html .btn-outline-secondary:focus {
    background: var(--t-content-bg-hover);
    color: var(--t-content-text);
    border-color: var(--t-input-border);
}
.btn-light {
    background: var(--t-content-bg-soft);
    border-color: var(--t-content-border);
    color: var(--t-content-text);
}
.btn-light:hover { background: var(--t-content-bg-hover); color: var(--t-content-text); }

/* info 实底按钮走语义三件套（MDB 的白字浅青底在两种模式下都只有 ~2.4:1） */
html .btn-info {
    background-color: var(--t-info-bg);
    border-color: var(--t-info-border);
    color: var(--t-info-text);
}
html .btn-info:hover,
html .btn-info:focus,
html .btn-info:active {
    background-color: var(--t-info-border);
    border-color: var(--t-info-border);
    color: var(--t-info-text);
}

.badge { border-radius: 6px; font-weight: 500; }
.badge.bg-light { color: var(--t-content-text); }

/* 分页（Bootstrap 5.1 无 CSS 变量，直接覆盖编译值） */
.pagination {
    --bs-pagination-active-bg: var(--t-accent);
    --bs-pagination-active-border-color: var(--t-accent);
}
html .page-link {
    font-size: .875rem;
    background-color: var(--t-content-bg);
    color: var(--t-link);
    border-color: var(--t-content-border);
}
html .page-link:hover, html .page-link:focus {
    background-color: var(--t-content-bg-hover);
    color: var(--t-link);
    border-color: var(--t-content-border);
}
.page-link:focus { box-shadow: 0 0 0 3px var(--t-accent-ring); }
html .page-item.active .page-link {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-on-accent, #fff);
}
html .page-item.disabled .page-link {
    background-color: var(--t-content-bg-soft);
    color: var(--t-content-text-muted);
    border-color: var(--t-content-border);
}

.dropdown-item { font-size: .875rem; }

/* 下拉菜单跟随内容区（覆盖 base 内联的强制白底，均带 !important 对齐优先级） */
.dropdown-menu {
    background: var(--t-content-bg) !important;
    border: 1px solid var(--t-content-border) !important;
    box-shadow: 0 6px 24px var(--t-shadow-lg) !important;
}
.dropdown-item {
    color: var(--t-content-text) !important;
    background: transparent !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--t-content-bg-hover) !important;
    color: var(--t-content-text) !important;
}
.dropdown-header { color: var(--t-content-text-muted) !important; }
.dropdown-divider { border-color: var(--t-content-border) !important; opacity: 1; }

/* 主题选择菜单：39 套分组列表，限高滚动 */
#themeMenu {
    max-height: 70vh;
    overflow-y: auto;
    min-width: 220px;
}

#themeMenu .dropdown-item.active {
    background: var(--t-menu-active-bg, rgba(105, 150, 220, .18)) !important;
    font-weight: 600;
}

/* 主题切换下拉里的色卡圆点（底色为主题栏色，内圈为强调色） */
.theme-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, .15);
}

/* ===== 提示/标签/进度/折叠等通用组件 ===== */
html .text-muted { color: var(--t-content-text-muted) !important; }

/* text-primary 编译死蓝不跟主题（campaign_mgr 大标题等），与 .text-muted 同款映射到强调色 */
html .text-primary { color: var(--t-accent) !important; }

/* BS5 已删除 .close：裸 <button class="close"> 回退 UA buttonface 灰底黑字，深色弹窗上白块黑字不可见 */
button.close {
    background-color: transparent;
    border: none;
    color: var(--t-content-text);
    opacity: .8;
}
button.close:hover { opacity: 1; }

/* Bootstrap 语义文字色是编译深色值（#198754/#dc3545等），深色主题下与深底对比只有~3.5:1发暗，
   深色模式下重映射到语义变量亮化变体（浅色模式保持经典值不动） */
html[data-mode="dark"] .text-success { color: var(--t-success-text) !important; }
html[data-mode="dark"] .text-danger { color: var(--t-danger-text) !important; }
html[data-mode="dark"] .text-warning { color: var(--t-warning-text) !important; }
html[data-mode="dark"] .text-info { color: var(--t-info-text) !important; }

/* Bootstrap 的 bg-light/bg-white 是 !important 编译值，深色主题下统一翻转为内容区色 */
html[data-mode="dark"] .bg-light {
    background-color: var(--t-content-bg-soft) !important;
    color: var(--t-content-text) !important;
}
html[data-mode="dark"] .bg-white {
    background-color: var(--t-content-bg) !important;
    color: var(--t-content-text) !important;
}

/* text-dark 编译#212529深字在深色内容区上≈1:1完全隐形(rebate/auto_link调度数量/缓存数量/上次运行三列
   用户反馈"数字完全看不见"), 与下方bg-light/bg-white同款深色翻转——补齐语义色翻转的最后一块 */
html[data-mode="dark"] .text-dark {
    color: var(--t-content-text) !important;
}

/* Bootstrap 5.3 reboot 给 code 的 #d63384 粉, 深色弹窗/深底上 3.5:1 且风格不搭 */
html[data-mode="dark"] code {
    color: var(--t-content-text);
}

/* Bootstrap 5.3 .alert-secondary 编译浅灰#e2e3e5, 深色模式下整条亮块刺眼 */
html[data-mode="dark"] .alert-secondary {
    background-color: var(--t-content-bg-soft) !important;
    color: var(--t-content-text) !important;
    border-color: var(--t-content-border) !important;
}

/* bg-warning 编译亮黄#ffc107同理: 黄底徽章(已耗尽/pending/暂停)白字1.63、月白字1.23(text-dark翻转连带)、深黄字3.37全部不可读——深色模式翻转成warning语义三件套 */
html[data-mode="dark"] .bg-warning {
    background-color: var(--t-warning-bg) !important;
    color: var(--t-warning-text) !important;
    border: 1px solid var(--t-warning-border);
}

/* Bootstrap .form-text 编译#6c757d灰, 深色页底上3.9:1略欠(表单帮助文字全站受影响) */
html[data-mode="dark"] .form-text {
    color: var(--t-content-text-muted) !important;
}

/* Bootstrap .table-info 编译浅青#cff4fc做合计行底, 深色模式下整行亮块刺眼(rebate账号列表合计行) */
html[data-mode="dark"] .table-info,
html[data-mode="dark"] .table-info > td,
html[data-mode="dark"] .table-info > th {
    --bs-table-bg: color-mix(in srgb, var(--t-info-bg) 40%, var(--t-content-bg));
    --bs-table-color: var(--t-content-text);
    background-color: color-mix(in srgb, var(--t-info-bg) 40%, var(--t-content-bg)) !important;
    color: var(--t-content-text) !important;
}

/* bg-warning 编译亮黄#ffc107同理: 黄底徽章(已耗尽/pending/暂停)白字1.63、月白字1.23(text-dark翻转连带)、深黄字3.37全部不可读——深色模式翻转成warning语义三件套 */
html[data-mode="dark"] .bg-warning {
    background-color: var(--t-warning-bg) !important;
    color: var(--t-warning-text) !important;
    border: 1px solid var(--t-warning-border);
}

/* Bootstrap .form-text 编译#6c757d灰, 深色页底上3.9:1略欠(表单帮助文字全站受影响) */
html[data-mode="dark"] .form-text {
    color: var(--t-content-text-muted) !important;
}

/* Bootstrap .table-info 编译浅青#cff4fc做合计行底, 深色模式下整行亮块刺眼(rebate账号列表合计行) */
html[data-mode="dark"] .table-info {
    --bs-table-bg: color-mix(in srgb, var(--t-info-bg) 40%, var(--t-content-bg));
    --bs-table-color: var(--t-content-text);
}

/* bg-info 编译亮青#0dcaf0在深色页面上成片刺眼(campaign_mgr浏览模式徽章/推送间隔chip), 且白字压亮青仅~1.9:1看不清——
   深色模式翻转成info语义三件套: 暗青底+亮青字(特异性0,2,1压过.text-white/.text-dark的0,1,0), 浅色模式保持经典青 */
html[data-mode="dark"] .bg-info {
    background-color: var(--t-info-bg) !important;
    color: var(--t-info-text) !important;
    border: 1px solid var(--t-info-border);
}

/* Bootstrap 语义描边按钮的文字/边框是编译深色值，深色内容区上不可读（outline-dark 仅 ~1:1）。
   深色模式下文字换亮化语义色、边框换半透明语义边框；hover 保持实底+深字（对比高）不受影响 */
html[data-mode="dark"] .btn-outline-success {
    color: var(--t-success-text);
    border-color: var(--t-success-border);
}
html[data-mode="dark"] .btn-outline-danger {
    color: var(--t-danger-text);
    border-color: var(--t-danger-border);
}
html[data-mode="dark"] .btn-outline-warning {
    color: var(--t-warning-text);
    border-color: var(--t-warning-border);
}
html[data-mode="dark"] .btn-outline-info {
    color: var(--t-info-text);
    border-color: var(--t-info-border);
}
html[data-mode="dark"] .btn-outline-dark {
    color: var(--t-content-text);
    border-color: var(--t-content-border);
}
html[data-mode="dark"] .btn-outline-dark:hover,
html[data-mode="dark"] .btn-outline-dark:focus,
html[data-mode="dark"] .btn-outline-dark:active {
    background: var(--t-content-text);
    border-color: var(--t-content-text);
    color: var(--t-page-bg);
}

.alert { border-radius: 10px; }
.alert-success { background: var(--t-success-bg); color: var(--t-success-text); border-color: var(--t-success-border); }
.alert-danger, .alert-error { background: var(--t-danger-bg); color: var(--t-danger-text); border-color: var(--t-danger-border); }
.alert-warning { background: var(--t-warning-bg); color: var(--t-warning-text); border-color: var(--t-warning-border); }
.alert-info { background: var(--t-info-bg); color: var(--t-info-text); border-color: var(--t-info-border); }

.nav-tabs { border-bottom-color: var(--t-content-border); }
.nav-tabs .nav-link { color: var(--t-content-text-muted); border-color: transparent; transition: color .15s ease, background-color .15s ease; }
.nav-tabs .nav-link:hover { color: var(--t-content-text); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--t-content-bg);
    color: var(--t-content-text);
    border-color: var(--t-content-border) var(--t-content-border) var(--t-content-bg);
}

.list-group-item {
    background-color: var(--t-content-bg);
    color: var(--t-content-text);
    border-color: var(--t-content-border);
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: var(--t-content-bg-hover);
    color: var(--t-content-text);
}
.list-group-item.active {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-on-accent, #fff);
}

.breadcrumb-item { color: var(--t-content-text-muted); }
.breadcrumb-item.active { color: var(--t-content-text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--t-content-text-muted); }

.progress { background: var(--t-content-bg-soft); }

.modal-content {
    border-radius: 12px;
    border: 1px solid var(--t-content-border);
    background: var(--t-content-bg);
    color: var(--t-content-text);
}
.modal-header, .modal-footer { border-color: var(--t-content-border); }
.modal-title { color: var(--t-content-text); }
html[data-mode="dark"] .btn-close {
    filter: invert(1) grayscale(100%) opacity(.75);
}
html[data-mode="dark"] .btn-close:hover { filter: invert(1) grayscale(100%) opacity(1); }

/* 筛选容器（base 内联样式同名规则的色值跟随主题） */
.filter-container {
    background: var(--t-content-bg);
    border: 1px solid var(--t-content-border);
    box-shadow: 0 1px 3px var(--t-shadow);
}

/* 图标按钮（base 内联样式同名规则） */
.icon-btn { color: var(--t-content-text-muted); }
.icon-btn:hover { background: var(--t-content-bg-hover); color: var(--t-link); }

/* 移动端顶栏折叠面板跟随顶栏配色 */
.navbar-collapse {
    background: var(--t-navbar-bg);
    border-color: var(--t-navbar-border);
}
.navbar-collapse .navbar-nav .nav-link { color: var(--t-navbar-text) !important; }
.navbar-nav .dropdown-menu {
    background: var(--t-navbar-bg) !important;
    border: none !important;
    box-shadow: none !important;
}
.navbar-nav .dropdown-item { color: var(--t-navbar-text) !important; }

/* ===== SweetAlert2 主题化 ===== */
.swal2-popup {
    background: var(--t-content-bg) !important;
    color: var(--t-content-text) !important;
    border-radius: 14px !important;
}
.swal2-title { color: var(--t-content-text) !important; }
.swal2-html-container { color: var(--t-content-text-muted) !important; }
.swal2-confirm {
    background-color: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: var(--t-on-accent, #fff) !important;
    border-radius: 8px !important;
}
.swal2-confirm:focus { box-shadow: 0 0 0 3px var(--t-accent-ring) !important; }
.swal2-cancel {
    background: transparent !important;
    color: var(--t-content-text-muted) !important;
    border: 1px solid var(--t-content-border) !important;
    border-radius: 8px !important;
}
.swal2-cancel:hover { background: var(--t-content-bg-hover) !important; color: var(--t-content-text) !important; }
.swal2-deny {
    background-color: #dc3545 !important;
    border-radius: 8px !important;
}
.swal2-input, .swal2-select, .swal2-textarea {
    background: var(--t-input-bg);
    color: var(--t-content-text);
    border-color: var(--t-input-border);
    border-radius: 8px;
}
.swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 3px var(--t-accent-ring);
}
.swal2-validation-message {
    background: var(--t-content-bg-soft);
    color: var(--t-danger-text);
}
.swal2-timer-progress-bar { background: var(--t-accent); }

/* ===== toastr 微调（保持深底白字，跨主题稳定） ===== */
#toast-container > div {
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--t-scroll-thumb);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--t-scroll-thumb-hover); background-clip: content-box; }

/* ===== 键盘可达性 ===== */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== 主题过渡：切换时不闪烁突变 ===== */
nav.navbar,
.modern-sidebar,
.modern-sidebar-header,
.main-content,
.modern-content,
.card,
.modal-content,
.dropdown-menu {
    transition: background-color .25s ease, border-color .25s ease, color .2s ease, box-shadow .25s ease;
}

/* ===== 动效系统 =====
   注意：transition 是整组覆盖属性——本文件加载在 base 内联样式之后，
   此处必须把布局类过渡（width/margin-left/left）与颜色过渡写全，
   否则会复现"侧边栏折叠瞬跳无动画"的覆盖丢失。 */

/* 侧边栏：桌面折叠宽度 + 移动端抽屉位移，全部平滑 */
.modern-sidebar {
    transition:
        width var(--t-dur) var(--t-ease),
        min-width var(--t-dur) var(--t-ease),
        margin-left var(--t-dur) var(--t-ease),
        left var(--t-dur) var(--t-ease),
        transform var(--t-dur) var(--t-ease),
        box-shadow var(--t-dur) var(--t-ease),
        background-color .25s ease,
        border-color .25s ease;
}

/* 内容区跟随侧边栏的让位过渡 */
.main-content,
.modern-content {
    transition:
        margin-left var(--t-dur) var(--t-ease),
        padding var(--t-dur) var(--t-ease),
        background-color .25s ease;
}

/* 移动端抽屉打开时的投影，增强层级感 */
.modern-sidebar.show { box-shadow: 0 0 40px rgba(0, 0, 0, .25); }

/* 菜单项 hover：底色/文字/缩进位移统一平滑（缩进位移此前无过渡） */
.modern-sidebar-menu .nav-link {
    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        padding-left .22s var(--t-ease);
}

/* Bootstrap 折叠子菜单：统一缓动 */
.collapsing { transition: height .3s var(--t-ease); }

/* 下拉菜单入场：opacity + translate 独立属性，不干扰 Popper 的 transform 定位 */
@keyframes rlDropIn {
    from { opacity: 0; translate: 0 -6px; }
    to   { opacity: 1; translate: 0 0; }
}
.dropdown-menu.show { animation: rlDropIn .16s var(--t-ease); }

/* 弹窗出场更轻盈：Bootstrap modal 自带 fade，这里统一缩放起点 */
.modal.fade .modal-dialog { transform: translateY(-14px); transition: transform .28s var(--t-ease); }
.modal.show .modal-dialog { transform: none; }

/* 页面进入：整页导航时内容轻微上浮淡入（AJAX 局部刷新不受影响） */
@keyframes rlPageIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.main-content { animation: rlPageIn .3s var(--t-ease); }

/* 按钮按压反馈 */
.btn { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.btn:active { transform: scale(.96); }

/* 侧边栏遮罩淡入淡出（base 的 display 切换已改为 opacity/visibility 方案） */
.sidebar-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 无动画偏好：全部动效降级为瞬时 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}