/* Vikunja × MagicCanvas 设计语言 v2 — 2026-08-28
   基于实测 DOM: .task.single-task / .tasks / .card / .tasktext
   需保持账号 Color Scheme = Dark */

/* ===== 基底 ===== */
html.dark { --site-background: #000 !important; }
html.dark body, body { background: #000 !important; background-color: #000 !important; }

/* ===== 变量（tailwind 灰阶 → MC）===== */
html.dark {
  --grey-900: #000000;  --grey-800: #070707;  --grey-750: #111212;
  --grey-700: #111111;  --grey-600: #191919;  --grey-500: #272B29;
  --grey-400: #2B2B2B;  --grey-300: #3A3A3A;  --grey-200: #6F6F6F;
  --grey-100: #BEBEBE;  --grey-50:  #DFDFDF;
  --primary: #B163FF;   --primary-dark: #8155FF;
}

/* ===== 侧栏/顶栏（plate #111212）===== */
html.dark aside, html.dark .menu-container, html.dark [class*="sidebar"] {
  background: #111212 !important; border-right: 1px solid #2B2B2B !important;
}
html.dark header, html.dark [class*="navbar"], html.dark [class*="topbar"] {
  background: #111212 !important; border-bottom: 1px solid #2B2B2B !important;
}
html.dark aside a:hover { background: #191919 !important; }
html.dark aside a.router-link-active, html.dark aside a[class*="active"] {
  background: #272B29 !important;
}
html.dark aside a.router-link-active :where(span, div, p),
html.dark aside a[class*="active"] :where(span, div, p) { color: #B163FF !important; }

/* ===== 列表视图容器 ===== */
html.dark main, html.dark .list-view { background: transparent !important; }

/* ===== 任务卡片（v2.5 真实结构 .task.single-task）===== */
html.dark .tasks .task.single-task {
  background: #111111 !important;
  border: 1px solid #3A3A3A !important;
  border-radius: 8px !important;
  margin: 0 0 6px 0 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
html.dark .tasks .task.single-task:hover {
  border-color: rgba(177, 99, 255, 0.5) !important;
}
html.dark .task .tasktext, html.dark .task .task-title { color: #DFDFDF !important; }
html.dark .task:hover .tasktext { color: #FFFFFF !important; }
html.dark .task.done, html.dark .task.is-done { opacity: .55; }
html.dark .task .task-overdue, html.dark [class*="overdue"] { color: #E0564B !important; }
/* 卡片内favicon色 */
html.dark .task .task-link, html.dark .task [class*="icon"] { color: #959595; }

/* ===== Kanban ===== */
html.dark .kanban [class*="bucket"], html.dark [class*="bucket"] {
  background: #111212 !important;
  border: 1px solid #2B2B2B !important;
  border-radius: 8px !important;
}
html.dark .kanban .task.single-task { cursor: grab; }

/* ===== 按钮（主=白底黑字, 次=active灰）===== */
html.dark .button-primary, html.dark button[class*="primary"],
html.dark [class*="button"][class*="primary"]:not([class*="outline"]):not([class*="ghost"]) {
  background: #FFFFFF !important; color: #2F2F2F !important;
  border: none !important; border-radius: 4px !important; font-weight: 500;
}
html.dark .button-primary:hover { background: #EEEEEE !important; }
html.dark .button-secondary, html.dark [class*="button"][class*="secondary"],
html.dark [class*="button"][class*="outlined"], html.dark [class*="button"][class*="ghost"] {
  background: #272B29 !important; color: #DFDFDF !important;
  border: 1px solid #2B2B2B !important; border-radius: 4px !important;
}
html.dark .button-secondary:hover { background: #191919 !important; }

/* ===== 链接/选中 ===== */
html.dark a { color: #B163FF; }
html.dark a:hover { color: #8155FF; }
html.dark input:focus, html.dark textarea:focus { border-color: #8155FF !important; }

/* ===== 输入 ===== */
html.dark input:not([type=checkbox]):not([type=radio]), html.dark textarea, html.dark select {
  background: #111111 !important; border: 1px solid #3A3A3A !important;
  border-radius: 4px !important; color: #DFDFDF !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: rgba(255,255,255,.3) !important; }

/* ===== 模态/下拉 ===== */
html.dark [class*="modal"] [class*="content"], html.dark .card,
html.dark [class*="dropdown"] [class*="content"], html.dark [class*="popover"] {
  background: #111212 !important; border: 1px solid #2B2B2B !important;
  border-radius: 8px !important; box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
}

/* ===== 标签 pill ===== */
html.dark [class*="label"] .tag, html.dark .tags .tag, html.dark .tag {
  border-radius: 100px !important;
  background: rgba(177,99,255,.12) !important;
  color: #B163FF !important;
  border: 1px solid rgba(177,99,255,.25) !important;
}

/* ===== 滚动条 ===== */
html.dark ::-webkit-scrollbar { width: 8px; }
html.dark ::-webkit-scrollbar-track { background: #000; }
html.dark ::-webkit-scrollbar-thumb { background: #272B29; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }