/* 主题系统：前景色与夜间模式相互独立
   - 前景色（data-accent）：light(蓝)/sakura(粉)/mint(绿)/sky(天蓝)/amber(琥珀)，只覆盖主色 --primary 系列
   - 夜间模式（data-night="1"）：独立黑色背景，覆盖所有表面色，保留当前前景色
   默认（light=蓝）变量定义在 app.css 的 :root，此处只覆盖差异 */

/* ---------- 前景色（仅主色，背景保持浅色） ---------- */
[data-accent="sakura"] { --primary: #ec4899; --primary-dark: #db2777; }
[data-accent="mint"]   { --primary: #10b981; --primary-dark: #059669; }
[data-accent="sky"]    { --primary: #0ea5e9; --primary-dark: #0284c7; }
[data-accent="amber"]  { --primary: #f59e0b; --primary-dark: #d97706; }

/* ---------- 夜间模式（独立黑色背景，不覆盖 --primary） ---------- */
[data-night="1"] {
    --bg: #000000;
    --card: #0f0f0f;
    --border: #27272a;
    --text: #fafafa;
    --muted: #a1a1aa;
    --success: #4ade80;
    --danger: #f87171;
    --shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5);
}
[data-night="1"] .table th { background: #0f0f0f; }
[data-night="1"] .table tr:hover td { background: #1a1a1a; }
[data-night="1"] .btn-secondary { background: #27272a; color: #fafafa; }
[data-night="1"] .btn-secondary:hover { background: #3f3f46; }
[data-night="1"] .badge { background: #18181b; color: #e4e4e7; }
[data-night="1"] .badge-level { background: #1e293b; color: #93c5fd; }
[data-night="1"] .badge-published { background: #052e16; color: #86efac; }
[data-night="1"] .badge-draft { background: #27272a; color: #a1a1aa; }
[data-night="1"] .alert-error { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
[data-night="1"] .alert-success { background: #052e16; color: #86efac; border-color: #166534; }
[data-night="1"] .attachment-item { background: #0f0f0f; }
[data-night="1"] .pdf-frame-text { background: #000000; }
[data-night="1"] input.form-control,
[data-night="1"] select.form-control,
[data-night="1"] textarea.form-control { background: #000000; color: #fafafa; border-color: #27272a; }
[data-night="1"] .switch .slider { background: #3f3f46; }
[data-night="1"] .cal-cell-today { background: rgba(37, 99, 235, .28); }

/* ---------- 夜间模式切换过渡动画 ----------
   切换时由 theme.js 临时给 <html> 加 .theme-transition，
   让表面色 / 文字色 / 边框等平滑过渡（约 0.3s），切换后自动移除 */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease,
        box-shadow .3s ease, fill .3s ease, stroke .3s ease !important;
}

/* ---------- 导航栏切换器 ---------- */
.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--bg);
    border-radius: 999px;
    border: 1px solid var(--border);
    margin-right: 6px;
    flex-shrink: 0;
}
.theme-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
    padding: 0;
    background-clip: padding-box;
}
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.active { border-color: var(--text); transform: scale(1.1); }
.theme-dot[data-accent-key="light"]  { background: #2563eb; }
.theme-dot[data-accent-key="sakura"] { background: #ec4899; }
.theme-dot[data-accent-key="mint"]   { background: #10b981; }
.theme-dot[data-accent-key="sky"]    { background: #0ea5e9; }
.theme-dot[data-accent-key="amber"]  { background: #f59e0b; }

.theme-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; }

.theme-night {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    background: transparent;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .15s, border-color .15s;
}
.theme-night:hover { transform: scale(1.15); }
.theme-night.active { border-color: var(--text); transform: scale(1.1); }

@media (max-width: 640px) {
    .theme-switcher { padding: 2px; }
    .theme-dot, .theme-night { width: 18px; height: 18px; }
}