/* ==========================================================================
   时光小屋 · 界面优化层  ui-polish.css
   在原有样式之后加载，只做覆盖与增强，不改动任何业务逻辑。
   删除本文件（或移除 index.html 中的引用）即可完全回退。
   --------------------------------------------------------------------------
   1. 主题令牌（深色暖化 + 语义补充）
   2. Element Plus 主色统一与深色适配
   3. 全局基础（滚动条 / 焦点环 / 选中 / 数字对齐）
   4. 桌面端 · 迟光录（待办笔记本）
   5. 桌面端 · 岁时笺 / 流光序
   6. 移动端
   7. 无障碍与动效偏好
   ========================================================================== */

/* ── 1. 主题令牌 ───────────────────────────────────────────────────────── */

:root {
  --rule-line: #eae3d8;                          /* 笔记本分隔线 */
  --hover-wash: rgba(60, 115, 107, .07);
  --focus-ring: rgba(60, 115, 107, .45);
  --danger: #b23c35;
  --warn: #a86a15;
}

/* 浅色：品牌茶绿整体压深一档，白字与茶绿文字都能过 AA(4.5) */
html[data-theme="light"],
html:not([data-theme]) {
  --paper: #f8f6f2;
  --paper-card: #f0ede6;
  --paper-elevated: #ece8e1;
  --ink-title: #2c2a28;
  --ink-body: #3d3a36;
  --ink-secondary: #6b6762;
  --border-light: #ded7cb;
  --rule-line: #e6dfd3;

  --color-notes: #3c736b;
  --color-tasks: #a9785f;
  --color-calendar: #b98f66;
  --color-notes-light: rgba(60, 115, 107, .12);
  --color-tasks-light: rgba(169, 120, 95, .12);
  --color-calendar-light: rgba(185, 143, 102, .12);
  --color-notes-border: rgba(60, 115, 107, .28);
  --color-tasks-border: rgba(169, 120, 95, .30);
  --color-calendar-border: rgba(185, 143, 102, .30);

  --header-bg: #3c736b;
  --nav-bg: #e8e3da;
  --nav-active-marker: #3c736b;
}

/* 深色：冷灰 → 暖纸灰，层次清晰、夜间柔和 */
html[data-theme="dark"] {
  --paper: #191714;
  --paper-card: #221f1b;
  --paper-elevated: #2b2721;
  --border-light: #35302a;
  --ink-title: #efe9df;
  --ink-body: #d3ccc2;
  --ink-secondary: #a79f95;

  --rule-line: #2e2a25;
  --hover-wash: rgba(107, 168, 158, .10);
  --focus-ring: rgba(107, 168, 158, .5);
  --danger: #e0736c;
  --warn: #d69a4a;

  --header-bg: #2f3a37;
  --header-text: #efe9df;
  --header-hover: rgba(239, 233, 223, .85);
  --header-divider: rgba(239, 233, 223, .12);
  --nav-bg: #221f1b;
  --shadow: rgba(0, 0, 0, .35);
  --card-shadow: 0 4px 14px rgba(0, 0, 0, .35);

  /* 三栏目配色在夜间的版本（移动端产物仍是 v2，需要这里补齐） */
  --color-notes: #6ba89e;
  --color-tasks: #c49a82;
  --color-calendar: #d0a88a;
  --color-notes-light: rgba(107, 168, 158, .16);
  --color-tasks-light: rgba(196, 154, 130, .16);
  --color-calendar-light: rgba(208, 168, 138, .16);
  --color-notes-border: rgba(107, 168, 158, .30);
  --color-tasks-border: rgba(196, 154, 130, .30);
  --color-calendar-border: rgba(208, 168, 138, .30);
  --blush: #4a3a38;
  --willow: #3a4a42;
  --success: #7cb26a;
  --error: #e0736c;
}

/* ── 2. Element Plus：主色统一 + 深色适配 ─────────────────────────────── */

html[data-theme="light"],
html:not([data-theme]) {
  --el-color-primary: #3c736b;
  --el-color-primary-light-3: #689b94;
  --el-color-primary-light-5: #9bbcb7;
  --el-color-primary-light-7: #c3d7d4;
  --el-color-primary-light-8: #d8e5e3;
  --el-color-primary-light-9: #ebf1f0;
  --el-color-primary-dark-2: #2f5c55;
  --el-border-radius-base: 10px;
}

html[data-theme="dark"] {
  --el-color-primary: #7fbdb2;
  --el-color-primary-light-3: #5d9e93;
  --el-color-primary-light-5: #467a72;
  --el-color-primary-light-7: #345b55;
  --el-color-primary-light-8: #2a4641;
  --el-color-primary-light-9: #223835;
  --el-color-primary-dark-2: #9bcfc5;

  --el-bg-color: #221f1b;
  --el-bg-color-page: #191714;
  --el-bg-color-overlay: #2b2721;
  --el-text-color-primary: #efe9df;
  --el-text-color-regular: #d3ccc2;
  --el-text-color-secondary: #a79f95;
  --el-text-color-placeholder: #857d73;
  --el-text-color-disabled: #6a645c;
  --el-border-color: #35302a;
  --el-border-color-light: #302b26;
  --el-border-color-lighter: #2b2721;
  --el-border-color-extra-light: #262220;
  --el-fill-color-blank: #221f1b;
  --el-fill-color-light: #2b2721;
  --el-fill-color-lighter: #262220;
  --el-mask-color: rgba(0, 0, 0, .62);
  --el-box-shadow-light: 0 4px 14px rgba(0, 0, 0, .4);
  --el-disabled-bg-color: #2b2721;
  --el-disabled-text-color: #6a645c;
  --el-disabled-border-color: #35302a;
}

/* 夜间弹窗 / 气泡不要刺眼白 */
html[data-theme="dark"] .el-dialog,
html[data-theme="dark"] .el-drawer,
html[data-theme="dark"] .el-popover,
html[data-theme="dark"] .el-popper,
html[data-theme="dark"] .el-message-box {
  background: var(--paper-elevated) !important;
  border-color: var(--border-light) !important;
}
html[data-theme="dark"] .el-dialog__title,
html[data-theme="dark"] .el-message-box__title { color: var(--ink-title) !important; }
html[data-theme="dark"] .el-form-item__label { color: var(--ink-secondary) !important; }
html[data-theme="dark"] .el-date-table th { color: var(--ink-secondary) !important; }
html[data-theme="dark"] .el-input__inner,
html[data-theme="dark"] .el-textarea__inner { color: var(--ink-body) !important; }

/* 浅色下 Element 的次要文字偏浅（#909399），统一到主题色 */
html[data-theme="light"],
html:not([data-theme]) {
  --el-text-color-secondary: #6b6762;
  --el-text-color-placeholder: #9a948c;
}

/* 主按钮：Fill 与 Content 成对调整，保证 4.5 以上 */
.el-button--primary {
  --el-button-bg-color: var(--color-notes, #3c736b) !important;
  --el-button-border-color: var(--color-notes, #3c736b) !important;
  --el-button-hover-bg-color: var(--el-color-primary-light-3) !important;
  --el-button-hover-border-color: var(--el-color-primary-light-3) !important;
  --el-button-active-bg-color: var(--el-color-primary-dark-2) !important;
  --el-button-active-border-color: var(--el-color-primary-dark-2) !important;
}
html[data-theme="dark"] .el-button--primary {
  --el-button-bg-color: #5d9e93 !important;
  --el-button-border-color: #5d9e93 !important;
  --el-button-text-color: #14120f !important;
  --el-button-hover-bg-color: #7fbdb2 !important;
  --el-button-hover-border-color: #7fbdb2 !important;
  --el-button-hover-text-color: #14120f !important;
  --el-button-active-bg-color: #4a8880 !important;
  --el-button-active-text-color: #14120f !important;
}
.el-button:focus-visible,
.el-input__wrapper:focus-within {
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ── 3. 全局基础 ───────────────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-secondary); background-clip: content-box; }

::selection { background: var(--color-notes-light, rgba(60, 115, 107, .18)); }

:focus-visible {
  outline: 2px solid var(--color-notes, #3c736b);
  outline-offset: 2px;
  border-radius: 6px;
}

.nb-time, .day-num, .day-lunar, .note-date,
.m-day-num, .m-day-lunar { font-variant-numeric: tabular-nums; }

/* ── 4. 桌面端 · 迟光录（待办笔记本）─────────────────────────────────── */

/* 4.1 底纹：原 36px 横线网格与 44px 行高错位、线条穿过文字。
       改为「装订竖线」，行分隔交给每条待办自己，永不脱格。 */
.notebook::before {
  background: linear-gradient(90deg,
    transparent 47px,
    var(--color-tasks-border, rgba(184, 138, 114, .35)) 47px,
    var(--color-tasks-border, rgba(184, 138, 114, .35)) 48px,
    transparent 48px) !important;
}

/* 4.2 待办行：20px → 17px，颜色走主题变量（修夜间 1.16 的不可读） */
.nb-line {
  color: var(--ink-body) !important;
  font-size: 17px !important;
  line-height: 44px;
  border-bottom: 1px solid var(--rule-line);
  box-sizing: border-box;
  transition: background .15s var(--ease-soft, ease);
}
.nb-line.is-root { font-size: 17px !important; }
.nb-line.is-done .nb-text { color: var(--ink-secondary) !important; }
.nb-line:hover { background: var(--hover-wash) !important; }
.nb-line.is-selected { background: var(--color-notes-light) !important; }
.nb-line.drag-over-top { box-shadow: inset 0 2px var(--color-notes) !important; }
.nb-line.drag-over-bottom { box-shadow: inset 0 -2px var(--color-notes) !important; }
.nb-line.drag-over-child {
  background: var(--color-notes-light) !important;
  box-shadow: 0 0 0 2px var(--color-notes) !important;
}

/* 4.3 复选框：Element 蓝 → 品牌茶绿 + 勾选弹跳 */
.nb-check { border-color: var(--border-light) !important; }
.nb-check:hover { border-color: var(--color-notes) !important; }
.nb-check.checked {
  background: var(--color-notes) !important;
  border-color: var(--color-notes) !important;
  animation: sg-check-pop .3s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}
@keyframes sg-check-pop {
  0% { transform: scale(.72); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* 4.4 时间标记 / 优先级 / 展开箭头 */
.nb-time.done { color: var(--color-notes) !important; font-weight: 500; }
.nb-time.due { color: var(--ink-secondary) !important; }
.nb-priority.urgent { color: var(--danger) !important; }
.nb-priority.high { color: var(--warn) !important; }
.nb-expand { color: var(--ink-secondary) !important; }
.nb-expand:hover { color: var(--color-notes) !important; }

/* 4.5 快速录入 / 分隔标题 / 空状态 */
.nb-input { font-size: 16px !important; color: var(--ink-body) !important; }
.nb-input::placeholder { color: var(--ink-secondary) !important; opacity: .75; }
.nb-quick { border-bottom: 1px solid var(--rule-line) !important; }
.nb-divider { border-top: 1px solid var(--rule-line) !important; }
.nb-divider-text { color: var(--ink-secondary) !important; }
.nb-empty-text { color: var(--ink-secondary) !important; }
.nb-sub-input input { color: var(--ink-body) !important; border-bottom-color: var(--border-light) !important; }

/* 4.6 「移动至…」弹层夜间适配 */
.nb-move-pop {
  background: var(--paper-elevated) !important;
  border-color: var(--border-light) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
}
.nb-move-title { color: var(--ink-secondary) !important; }
.nb-move-option:hover { background: var(--hover-wash) !important; }
.nb-move-option.active { background: var(--color-notes-light) !important; color: var(--color-notes) !important; }

/* ── 5. 桌面端 · 岁时笺 / 流光序 ─────────────────────────────────────── */

/* 5.1 笔记标签、分类标签 */
.note-tag, .note-cat-tag {
  color: var(--ink-secondary) !important;
  background: var(--color-notes-light, rgba(60, 115, 107, .12)) !important;
  border-color: var(--color-notes-border, rgba(60, 115, 107, .28)) !important;
}
.cat-tab { transition: background .18s var(--ease-soft, ease), color .18s var(--ease-soft, ease); }
.cat-tab.active {
  background: var(--color-notes) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(60, 115, 107, .3) !important;
}
html[data-theme="dark"] .cat-tab.active { color: #14120f !important; }
.cat-tab:not(.active):hover { background: var(--hover-wash) !important; }

/* 5.2 笔记缩略图占位 / "+N" 计数 */
.note-preview-more,
.note-preview-img {
  background: var(--paper-elevated) !important;
  color: var(--ink-body) !important;
  border-color: var(--border-light) !important;
}
.note-preview-more { border: 1px solid var(--border-light) !important; }

/* 5.3 日程：非本月格子原为浅蓝块，今天原为 Element 蓝 */
.cal-day.other-month { background: var(--paper-elevated) !important; }
.cal-day.other-month .day-num,
.cal-day.other-month .day-lunar { color: var(--ink-secondary) !important; }
.cal-day.is-today { background: var(--color-notes-light) !important; }
.cal-day.is-today .day-num {
  background: var(--color-notes) !important;
  color: #fff !important;
}
html[data-theme="dark"] .cal-day.is-today .day-num { color: #14120f !important; }
.day-num { color: var(--ink-body) !important; }
.day-lunar { color: var(--ink-secondary) !important; }
.day-lunar.lunar-festival { color: var(--danger) !important; }
.cal-title { color: var(--ink-title) !important; }
.right-date { color: var(--ink-title) !important; }

/* 5.4 详情页正文 */
html[data-theme="dark"] .note-content,
html[data-theme="dark"] .note-body { color: var(--ink-body); }

/* ── 6. 移动端 ─────────────────────────────────────────────────────────── */

/* 6.1 浅色：把移动端原来的「蓝紫」拉回与桌面一致的「纸 · 茶绿」 */
html[data-theme="light"] {
  --m-bg: #f8f6f2;
  --m-surface: #ffffff;
  --m-surface-hover: #f2ede5;
  --m-primary: #3c736b;
  --m-primary-light: rgba(60, 115, 107, .10);
  --m-primary-dark: #2f5c55;
  --m-text: #2c2a28;
  --m-text-secondary: #6b6762;
  --m-text-tertiary: #8b837a;
  --m-border: #e5ded2;
  --m-border-light: #efe9e0;
  --m-tabbar-bg: rgba(255, 255, 255, .94);
  --m-tabbar-border: rgba(44, 42, 40, .07);
  --m-tab-inactive: #7d746a;
  --m-tab-active: #3c736b;
  --m-tab-indicator: rgba(60, 115, 107, .10);
  --m-header-bg: #3c736b;
  --m-header-color: #ffffff;
  --m-card-bg: #ffffff;
  --m-input-bg: #ffffff;
  --m-input-color: #2c2a28;
  --m-fab-bg: linear-gradient(135deg, #4a8a80, #3c736b);
  --m-fab-shadow: rgba(60, 115, 107, .35);
}

/* 6.2 移动端夜间主题（原 :root 默认是浅色值，夜间从未生效） */
html[data-theme="dark"] {
  --m-bg: #191714;
  --m-surface: #221f1b;
  --m-surface-hover: #2b2721;
  --m-primary: #7fbdb2;
  --m-primary-light: rgba(127, 189, 178, .14);
  --m-primary-dark: #9bcfc5;
  --m-accent-red: #e0736c;
  --m-accent-orange: #d69a4a;
  --m-accent-green: #8cb87a;
  --m-text: #ece6dd;
  --m-text-secondary: #a79f95;
  --m-text-tertiary: #8d857a;
  --m-border: #35302a;
  --m-border-light: #2b2721;
  --m-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --m-shadow-md: 0 4px 14px rgba(0, 0, 0, .38);
  --m-shadow-lg: 0 8px 28px rgba(0, 0, 0, .45);
  --m-overlay: rgba(0, 0, 0, .6);
  --m-tabbar-bg: rgba(34, 31, 27, .95);
  --m-tabbar-border: rgba(255, 255, 255, .07);
  --m-tab-inactive: rgba(236, 230, 221, .48);
  --m-tab-active: #7fbdb2;
  --m-tab-indicator: rgba(127, 189, 178, .16);
  --m-header-bg: #2f3a37;
  --m-header-color: #efe9df;
  --m-card-bg: #221f1b;
  --m-input-bg: #2b2721;
  --m-input-color: #ece6dd;
  --m-sheet-handle: #3a352f;
  --m-fab-bg: linear-gradient(135deg, #4f8b81, #6ba89e);
  --m-fab-shadow: rgba(79, 139, 129, .38);
  --m-scrollbar: #3a352f;
}

/* 6.3 移动端顶栏（原白字压 #8FB3AD 只有 2.28） */
.m-header { background: var(--m-header-bg, #3c736b) !important; }
.m-header-title, .m-header-column, .m-header-divider { color: var(--m-header-color, #fff) !important; }
.m-header-title { letter-spacing: 3px; }
html[data-theme="dark"] .m-header-btn { background: rgba(255, 255, 255, .10); }

/* 6.4 移动端卡片 / 页头夜间跟随主题 */
html[data-theme="dark"] .m-note-card,
html[data-theme="dark"] .m-task-card,
html[data-theme="dark"] .m-card,
html[data-theme="dark"] .m-surface,
html[data-theme="dark"] .m-detail-card,
html[data-theme="dark"] .m-stat-card,
html[data-theme="dark"] .m-note-item {
  background: var(--m-card-bg) !important;
  color: var(--m-text) !important;
}
html[data-theme="dark"] .m-page-header { background: var(--m-bg) !important; }
html[data-theme="dark"] .m-page-title { color: var(--m-text) !important; }

/* 6.5 已完成条目：原 #bbb 只有 1.64，几乎看不见 */
.nb-line.is-done .nb-text,
.m-task-done, .m-task-title.done, .m-done-text {
  color: var(--ink-secondary) !important;
}

/* 6.6 触控目标与按压反馈 */
.m-tab, .m-header-btn, .sa-action, .m-cat-chip, .m-today-btn {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.m-cat-chip, .m-today-btn { transition: transform .15s var(--ease-spring, ease), background .18s ease; }
.m-cat-chip:active, .m-today-btn:active { transform: scale(.96); }

/* 6.6b 分类筛选：选中项原为浅茶绿底白字（2.28），改为品牌深色 */
.m-cat-chip.active {
  background: var(--color-notes) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .m-cat-chip.active { color: #14120f !important; }

/* 6.6c 笔记预览的图片占位与 "+N" */
.m-note-preview-more, .m-note-preview-img, .note-preview-more, .note-preview-img {
  background: var(--paper-elevated) !important;
  color: var(--ink-body) !important;
  border-color: var(--border-light) !important;
}

/* 6.7 悬浮按钮：配色跟随主题（位置沿用组件自身的 96px，已避开底部导航） */
.app-fab, .m-fab {
  background: var(--m-fab-bg) !important;
  box-shadow: 0 8px 22px var(--m-fab-shadow) !important;
}

/* 6.7b 移动端日历：选中/今天用品牌色圆点 */
.m-day.sel, .m-day.today, .m-day.is-today { background: var(--color-notes-light) !important; }
.m-day.sel .m-day-num, .m-day.today .m-day-num, .m-day.is-today .m-day-num {
  background: var(--color-notes) !important;
  color: #fff !important;
}
html[data-theme="dark"] .m-day.sel .m-day-num,
html[data-theme="dark"] .m-day.today .m-day-num { color: #14120f !important; }
.m-day.other .m-day-num { color: var(--ink-secondary) !important; opacity: .55; }

/* 6.8 移动端日历对比度 */
.m-day-num { color: var(--m-text) !important; }
.m-day-lunar { color: var(--ink-secondary) !important; }
.m-today-btn { color: var(--m-primary) !important; }

/* 6.8b 空状态文字 */
.m-no-events, .m-empty-text, .m-empty-state, .m-empty-tip {
  color: var(--ink-secondary) !important;
}

/* 6.9 底部导航选中态 */
.m-tab.active { color: var(--m-tab-active) !important; }
.m-tab-indicator { background: var(--m-tab-indicator) !important; }

/* ── 7. 无障碍与动效偏好 ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --ink-secondary: #4a453f; }
  html[data-theme="dark"] { --ink-secondary: #c8c1b6; }
}