/* Vikunja 2.7.0 visual layer for todo.xjsl56.com.
   Keep selectors narrow so task behaviour and custom project backgrounds stay intact. */

html {
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html.light {
  --site-background: #f4f6fa;
  --card-border-color: #e8ebf1;
  --primary-h: 216deg;
  --primary-s: 91%;
  --primary-l: 53%;
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* App shell */
.navbar.navbar {
  background: rgba(255, 255, 255, .90);
  border-bottom: 1px solid rgba(38, 57, 88, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.menu-container.menu-container {
  background: #f7f8fb;
  border-inline-end: 1px solid #e8ebf1;
}

.menu-container .menu-list li > div,
.menu-container .top-menu .menu-list > li > a {
  border-radius: 11px;
}

.menu-container .menu-list a.router-link-exact-active,
.menu-container .menu-list li > div:has(a.router-link-exact-active) {
  background: #e6efff;
  color: #165ac7;
}

.menu-container .menu-list li > div:hover,
.menu-container .top-menu .menu-list > li > a:hover {
  background: #edf2fa;
}

/* Panels, cards, and project tiles */
.app-content .card,
.project-card,
.box {
  border-radius: 18px;
  border: 1px solid var(--card-border-color);
  box-shadow: 0 8px 26px rgba(29, 48, 78, .055);
}

.app-content .project-card {
  min-block-size: 126px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.app-content .project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(29, 48, 78, .10);
}

.app-content .project-card .project-title {
  font-weight: 600;
  line-height: 1.3;
}

.app-content .card-header,
.app-content .card-content:first-child,
.app-content .card-content:last-child {
  border-radius: inherit;
}

/* Task lists keep clear hit areas, while using less vertical space. */
.list-view .tasks > [data-task-id] {
  margin: 4px 8px;
}

.list-view .single-task,
.show-tasks .single-task {
  padding: 7px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
}

.list-view .single-task:hover,
.show-tasks .single-task:hover {
  background: #f4f8ff;
  border-color: #e6edfa;
}

.list-view .single-task:has(:focus-visible),
.show-tasks .single-task:has(:focus-visible) {
  border-color: var(--primary);
}

/* Kanban cards and columns */
.app-content .project-kanban .kanban .bucket {
  border-radius: 17px;
  border: 1px solid var(--card-border-color);
  box-shadow: 0 5px 18px rgba(29, 48, 78, .05);
}

.app-content .project-kanban .kanban .bucket-header,
.app-content .project-kanban .kanban .bucket .task-item {
  background: #f5f7fb;
}

.app-content .project-kanban .kanban .task-item .task {
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(29, 48, 78, .09);
}

/* Controls */
.input,
.textarea,
.select select,
.button {
  border-radius: 11px;
}

.input,
.textarea,
.select select {
  border-color: #dfe5ef;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: #4e8bed;
}

/* Login and account screens */
.no-auth-wrapper.no-auth-wrapper {
  background: radial-gradient(circle at 20% 10%, #e9f1ff, transparent 45%),
              linear-gradient(135deg, #f7f9fc, #edf2f8);
}

.no-auth-wrapper .noauth-container {
  max-inline-size: 900px;
  min-block-size: 380px;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(25, 47, 84, .13);
}

.noauth-container .image {
  background-image: linear-gradient(145deg, #2367d3, #6b97e9) !important;
}

.noauth-container .image::before {
  display: none;
}

/* Preserve the upstream dark palette while giving it the same surfaces. */
html.dark {
  --site-background: #121923;
  --card-border-color: #2c394a;
}

html.dark .navbar {
  background: rgba(22, 30, 42, .91);
  border-bottom-color: #2c394a;
}

html.dark .menu-container {
  background: #17202d;
  border-inline-end-color: #2c394a;
}

html.dark .menu-container .menu-list a.router-link-exact-active,
html.dark .menu-container .menu-list li > div:has(a.router-link-exact-active) {
  background: #233b5f;
  color: #a9cbff;
}

html.dark .menu-container .menu-list li > div:hover,
html.dark .menu-container .top-menu .menu-list > li > a:hover {
  background: #223044;
}

html.dark .list-view .single-task:hover,
html.dark .show-tasks .single-task:hover {
  background: #223044;
  border-color: #32445d;
}

html.dark .project-kanban .kanban .bucket-header,
html.dark .project-kanban .kanban .bucket .task-item {
  background: #1d2939;
}

html.dark .input,
html.dark .textarea,
html.dark .select select {
  border-color: #3c4b60;
}

html.dark .no-auth-wrapper.no-auth-wrapper {
  background: linear-gradient(135deg, #151e2c, #202d43);
}

@media (max-width: 767px) {
  html { font-size: 15px; }
  .no-auth-wrapper.no-auth-wrapper { padding: 16px; }
  .no-auth-wrapper .noauth-container { border-radius: 18px; }
  .noauth-container .button { min-block-size: 42px; }
  .list-view .tasks > [data-task-id] { margin-inline: 3px; }
  .list-view .single-task,
  .show-tasks .single-task { padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-content .project-card { transition: none; }
  .app-content .project-card:hover { transform: none; }
}