/* ── cdarchive theme for Vikunja ─────────────────────────────────────────
   理念取自 cdarchive.cc：双色、等宽、2px 方框、无圆角、无阴影、终端网格。
   颜色只留「墨」和「纸」两色；项目自己的颜色（color-bubble）保留，那是个性化。
   深色模式：纸黑墨白，其余全部反相。
   ---------------------------------------------------------------------- */

:root {
    --cd-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
               "DejaVu Sans Mono", "Noto Sans Mono CJK SC", monospace;
    --cd-ink: #0a0a0a;
    --cd-paper: #ffffff;
    --cd-line: color-mix(in srgb, var(--cd-ink) 32%, var(--cd-paper));
    --cd-muted: color-mix(in srgb, var(--cd-ink) 58%, var(--cd-paper));
    --cd-surface: color-mix(in srgb, var(--cd-ink) 7%, var(--cd-paper));
    --cd-edge: 2px;
}

html:not(.light),
html.dark {
    --cd-ink: #ffffff;
    --cd-paper: #0a0a0a;
    color-scheme: dark;
}

/* ── 字体：所有东西都等宽 ── */
html, body, div, span, p, a, li, ul, label, h1, h2, h3, h4, h5, h6,
button, input, textarea, select, table, td, th, code, pre, kbd {
    font-family: var(--cd-font) !important;
    letter-spacing: -0.01em;
}

body, .app-container, .app-content, main {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
}

/* 干掉背景图和渐变 */
.app-container-background,
.background-fade-in,
.is-background-fade-in {
    display: none !important;
}

/* ── 顶栏：2px 下边框，没有阴影 ── */
header.navbar,
.navbar {
    background: var(--cd-paper) !important;
    border-bottom: var(--cd-edge) solid var(--cd-ink) !important;
    box-shadow: none !important;
}

.navbar .username,
.navbar .logo-link {
    color: var(--cd-ink) !important;
}

img.avatar {
    border-radius: 0 !important;
    border: var(--cd-edge) solid var(--cd-ink) !important;
}

/* ── 侧边栏：2px 右边框，项目名等宽 ── */
aside.menu-container,
.menu-container {
    background: var(--cd-paper) !important;
    border-right: var(--cd-edge) solid var(--cd-ink) !important;
    box-shadow: none !important;
}

.menu-list-link,
a.base-button.list-menu-link,
.navigation-item {
    border-radius: 0 !important;
    color: var(--cd-ink) !important;
}

.menu-list-link:hover,
.navigation-item:hover {
    background: var(--cd-surface) !important;
}

.menu-list-link.router-link-active {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

/* 项目颜色：方形色块，带框，不用圆点 */
.color-bubble {
    border-radius: 0 !important;
    width: 8px !important;
    height: 18px !important;
    border: var(--cd-edge) solid var(--cd-ink) !important;
    box-shadow: none !important;
}

/* ── 消除所有圆角和阴影 ── */
.card,
.card-content,
.box,
.dropdown-content,
.modal-card,
.modal-content,
.popover,
.tooltip,
input,
textarea,
select,
button,
.base-button,
.button,
.tag,
.badge,
.notification,
.vue-notification,
.flatpickr-calendar {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 卡片：2px 框 */
.card {
    background: var(--cd-paper) !important;
    border: var(--cd-edge) solid var(--cd-ink) !important;
}

.card-content {
    padding: 0 !important;
}

/* ── 按钮：方框，反相才是主按钮 ── */
.base-button,
button,
.button {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
    border: var(--cd-edge) solid var(--cd-ink) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
}

.base-button:hover,
button:hover:not(:disabled),
.button:hover:not(:disabled) {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

.base-button.button.is-primary,
.button.is-primary {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

/* 纯图标按钮不要框（汉堡菜单、星标、工具栏） */
.menu-show-button,
.menu-hide-button,
.keyboard-shortcuts-button,
.favorite,
.trigger-button,
.username-dropdown-trigger,
.icon button {
    border: none !important;
    background: transparent !important;
    padding: 2px 4px !important;
}

.menu-show-button:hover,
.keyboard-shortcuts-button:hover,
.favorite:hover,
.trigger-button:hover {
    background: var(--cd-surface) !important;
    color: var(--cd-ink) !important;
}

/* ── 输入框 ── */
input,
textarea,
.add-task-textarea,
.input,
.textarea,
.field input {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
    border: var(--cd-edge) solid var(--cd-line) !important;
    padding: 8px 10px !important;
}

input:focus,
textarea:focus,
.input:focus,
.textarea:focus {
    border-color: var(--cd-ink) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── 标题：终端不喊话，收小 ── */
h1.title, h2.title, .title {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-ink) !important;
    margin-bottom: 12px !important;
}

/* 首页那个巨大的 "Fresh start, chxn" 大字 */
.content.has-text-centered > h1,
.content.has-text-centered > h2,
.app-content.home .title.is-1,
.app-content.home h1 {
    font-size: 18px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── 任务列表：行之间用 1px 线，没有卡片感 ── */
ul.tasks {
    padding: 0 !important;
}

.task.single-task,
.single-task {
    border-bottom: 1px solid var(--cd-line) !important;
    border-radius: 0 !important;
    padding: 8px 10px !important;
    background: transparent !important;
}

.task.single-task:hover,
.single-task:hover {
    background: var(--cd-surface) !important;
}

.task-link,
.tasktext {
    color: var(--cd-ink) !important;
}

.task.done .task-link,
.task.is-done .task-link {
    color: var(--cd-muted) !important;
    text-decoration: line-through;
}

/* 复选框：方块 */
.base-checkbox .checkbox,
.base-checkbox__label,
input[type="checkbox"] {
    border-radius: 0 !important;
}

/* ── 链接 ── */
a {
    color: var(--cd-ink) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
    text-decoration: none;
}

/* 按钮里的链接不要变成反相块 */
.base-button a,
a.base-button,
.menu-list-link,
.task-link,
a.task-project {
    text-decoration: none !important;
    background: transparent !important;
    color: inherit !important;
}

a.task-link:hover,
a.task-project:hover {
    text-decoration: underline !important;
    background: transparent !important;
    color: var(--cd-ink) !important;
}

/* ── 看板：列是方框，卡片是方框 ── */
.bucket,
.kanban-bucket {
    border-radius: 0 !important;
    border: var(--cd-edge) solid var(--cd-line) !important;
    background: var(--cd-paper) !important;
}

.bucket-header {
    border-bottom: 1px solid var(--cd-line) !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 0.06em;
}

/* ── 滚动条也跟着走 ── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--cd-line) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--cd-line);
    border-radius: 0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ── 杂项 ── */
.tag,
.badge {
    border: 1px solid var(--cd-line) !important;
    background: transparent !important;
    color: var(--cd-ink) !important;
}

.modal-card-head,
.modal-card-foot {
    border-color: var(--cd-line) !important;
    background: var(--cd-paper) !important;
}

hr {
    background: var(--cd-line) !important;
    height: 1px !important;
}

/* 选中文字反相 */
::selection {
    background: var(--cd-ink);
    color: var(--cd-paper);
}

/* ── 第二版修正：侧边栏不能每一项都框住 ─────────────────────────────── */

/* 菜单项/项目链接：无框、不大写、正常字重 */
.menu-container .base-button,
.menu-container button,
aside .base-button,
aside button,
a.list-menu-link,
.list-menu-link,
.navigation-item,
.menu-list-link {
    border: 0 !important;
    background: transparent !important;
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    padding: 6px 10px !important;
    color: var(--cd-ink) !important;
    box-shadow: none !important;
}

.menu-container .base-button:hover,
aside .base-button:hover,
a.list-menu-link:hover,
.list-menu-link:hover,
.menu-list-link:hover {
    background: var(--cd-surface) !important;
    color: var(--cd-ink) !important;
}

.menu-container .base-button.router-link-active,
aside .base-button.router-link-active,
.list-menu-link.router-link-active,
.menu-list-link.router-link-active {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

/* 分组标题（Overview / Projects / Labels…）小一号，全大写 */
.menu-container .menu-label,
.menu-container .other-menu-items > li > .menu-list-heading,
nav.menu .menu-label {
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    color: var(--cd-muted) !important;
}

/* 侧边栏项目名和色块之间收紧 */
div.navigation-item {
    gap: 6px !important;
}

/* 顶栏的按钮不要大写 */
header.navbar .base-button {
    text-transform: none !important;
    font-size: 13px !important;
    border: 0 !important;
}

/* ── 第三版：去掉菜单下划线、收紧留白、标题左对齐 ───────────────────── */

/* 导航菜单是按钮不是链接，别画下划线 */
.menu-container a,
.menu-container .base-button,
aside a,
nav.menu a,
nav.menu .base-button {
    text-decoration: none !important;
}

/* 内容区不要那么多空（但顶部要留够，不然会被顶栏压住） */
.app-content {
    padding-top: 56px !important;
}

.app-content .content {
    padding: 0 !important;
}

/* 首页标题靠左，像终端抬头 */
.content.has-text-centered {
    text-align: left !important;
}

.content.has-text-centered > h1,
.content.has-text-centered > h2 {
    margin-left: 2px !important;
}

/* 任务列表卡片贴边 */
.is-max-width-desktop {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 顶栏高度收一点 */
header.navbar {
    min-height: 48px !important;
}

/* 侧边栏项目色块对齐 */
.color-bubble-wrapper {
    min-width: 12px !important;
}

/* ── 第四版：语义色也是彩色，全压成墨/纸两色 ──────────────────────────── */

.tag,
.badge,
span.tag,
div.tag,
.label,
span.label,
.task .tag,
.bucket .tag {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px !important;
}

/* 优先级/到期这类小色点 */
.priority-badge,
.priority-label,
span[class*="priority"] {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 进度条 */
.progress-wrapper,
.progress,
.progress-bar {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.progress-bar {
    background: var(--cd-ink) !important;
}

.progress-wrapper .progress {
    background: var(--cd-surface) !important;
}

/* 复选框选中态：方框里一个叉，不用对勾符号的颜色 */
.base-checkbox input:checked ~ .checkbox,
.fancy-checkbox input:checked + .checkbox {
    background: var(--cd-ink) !important;
    border-color: var(--cd-ink) !important;
    border-radius: 0 !important;
}

/* 任务完成时的绿勾 */
.task.done .base-checkbox,
.is-done .base-checkbox,
.done-icon,
.icon.is-done {
    color: var(--cd-ink) !important;
}

/* 深色模式下按钮反相别搞错 */
html:not(.light) .base-button.button.is-primary {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

/* 下拉菜单 */
.dropdown-content,
.dropdown-item,
.dropdown-menu {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
    border: var(--cd-edge) solid var(--cd-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dropdown-item:hover {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

/* ── 第五版：深色模式把 Vikunja 自带的深灰也压成纯黑 ───────────────────── */

html:not(.light) .bucket,
html:not(.light) .bucket-header,
html:not(.light) .bucket > div,
html:not(.light) .task,
html:not(.light) .single-task,
html:not(.light) .card,
html:not(.light) .card-content,
html:not(.light) .app-content,
html:not(.light) .app-container,
html:not(.light) main,
html:not(.light) .content,
html:not(.light) .dropdown-content,
html:not(.light) .modal-card,
html:not(.light) .modal-card-body {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
}

html:not(.light) .base-button,
html:not(.light) button,
html:not(.light) .button,
html:not(.light) .bucket-header {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
}

html:not(.light) .base-button:hover,
html:not(.light) button:hover,
html:not(.light) .button:hover {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

/* 侧边栏在深色下不要被反相覆盖 */
html:not(.light) .menu-container .base-button,
html:not(.light) aside .base-button,
html:not(.light) .list-menu-link {
    background: transparent !important;
    color: var(--cd-ink) !important;
}

html:not(.light) .list-menu-link.router-link-active,
html:not(.light) .menu-container .router-link-active {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
}

/* 输入框深色 */
html:not(.light) input,
html:not(.light) textarea,
html:not(.light) .input,
html:not(.light) .textarea {
    background: var(--cd-paper) !important;
    color: var(--cd-ink) !important;
    border-color: var(--cd-line) !important;
}

html:not(.light) .tag,
html:not(.light) .badge {
    background: var(--cd-ink) !important;
    color: var(--cd-paper) !important;
    border: 0 !important;
}