/* La Capsule · contrast theme for Vikunja 2.7.0.
 * Loaded after upstream CSS. Keep selectors scoped and the original binary intact.
 * Both user-selected appearances remain available in Vikunja settings.
 */
:root {
  --capsule-canvas: #eef1f5;
  --capsule-column: #e1e7ef;
  --capsule-card: #ffffff;
  --capsule-ink: #17263c;
  --capsule-muted: #495b73;
  --capsule-line: #718096;
  --capsule-accent: #593a9c;
  --capsule-selected: #e9e0fa;
  --capsule-button: #593a9c;
  --capsule-on-button: #ffffff;
}
html.dark {
  --capsule-canvas: #101827;
  --capsule-column: #202e42;
  --capsule-card: #35465e;
  --capsule-ink: #f5f7fc;
  --capsule-muted: #d0d9e8;
  --capsule-line: #8293ad;
  --capsule-accent: #dfd0ff;
  --capsule-selected: #493b65;
  --capsule-button: #d8c4ff;
  --capsule-on-button: #24163f;
}
/* Override tokens in both modes without forcing a browser/user preference. */
html:root, html.dark {
  --site-background: var(--capsule-canvas);
  --text: var(--capsule-ink);
  --text-muted: var(--capsule-muted);
  --text-light: var(--capsule-muted);
  --link: var(--capsule-accent);
  --link-hover: var(--capsule-accent);
  --link-focus: var(--capsule-accent);
  --link-active: var(--capsule-accent);
  --input-border-color: var(--capsule-line);
  --input-placeholder-color: var(--capsule-muted);
  --input-focus-border-color: var(--capsule-accent);
  --menu-label-color: var(--capsule-muted);
}
body .navbar, body .menu-container {
  background: var(--capsule-canvas);
  color: var(--capsule-ink);
}
body .navbar { border-bottom: 1px solid var(--capsule-line); }
body .menu-container { border-right: 1px solid var(--capsule-line); }
body .menu-container a, body .navbar .icon { color: var(--capsule-muted); }
#app .navbar .icon, #app .menu-container .menu-item-icon { color: var(--capsule-muted); }
#app .menu-container a.router-link-exact-active {
  color: var(--capsule-accent);
  background: var(--capsule-selected);
  font-weight: 650;
  border-radius: 8px;
}
body .menu-container .legal-links, body .menu-container .legal-links a {
  color: var(--capsule-muted);
  opacity: 1;
}
#app .switch-view {
  background: var(--capsule-card);
  border: 1px solid var(--capsule-line);
  box-shadow: none;
  border-radius: 10px;
  padding: 5px;
}
#app .switch-view a {
  color: var(--capsule-ink);
  padding: 9px 12px;
  font-size: 14px;
}
#app .switch-view a.is-active {
  background: var(--capsule-button);
  color: var(--capsule-on-button);
}
body .kanban .bucket {
  background: var(--capsule-column);
  border: 1px solid var(--capsule-line);
  border-radius: 14px;
  overflow: hidden;
}
body .kanban .bucket-header {
  background: var(--capsule-column);
  color: var(--capsule-ink);
  border-bottom: 1px solid var(--capsule-line);
  padding: 12px 14px;
  min-height: 58px;
}
body .kanban .bucket-header .title {
  color: var(--capsule-ink);
  font-size: 17px;
  font-weight: 700;
}
body .kanban .kanban-card {
  /* Keep task cards genuinely light, including when the board is dark. */
  --capsule-ink: #17263c;
  --capsule-muted: #495b73;
  --capsule-accent: #593a9c;
  background: #f8fafc;
  color: var(--capsule-ink);
  border: 1px solid var(--capsule-line);
  border-radius: 10px;
  box-shadow: 0 2px 4px #00000014;
}
body .kanban .kanban-card > .p-2 { padding: 14px; }
body .kanban .kanban-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
body .kanban .kanban-card h3 a { color: var(--capsule-ink); }
body .kanban .kanban-card .task-id { color: var(--capsule-muted); }
body .kanban .kanban-card .footer > .icon {
  background: #e2e8f0;
  color: #334155;
}
body .kanban .kanban-card .kanban-card__done {
  background: #c1f1d9;
  color: #164b35;
}
body .kanban .bucket .button {
  color: var(--capsule-ink);
  background: var(--capsule-card);
  border: 1px dashed var(--capsule-line);
  border-radius: 8px;
  min-height: 44px;
  text-transform: none;
  font-size: 14px;
}
body .kanban .bucket .button:hover {
  background: var(--capsule-selected);
  border-style: solid;
}
body .kanban .bucket .button.is-primary {
  background: var(--capsule-button);
  color: var(--capsule-on-button);
  border-style: solid;
}
body .kanban .kanban-card:hover { border-color: var(--capsule-accent); }
body :is(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--capsule-accent);
  outline-offset: 3px;
}

/* Text branding replaces the llama logo; retain the existing home link. */
#app .logo { display: none; }
#app div:has(> .logo) {
  display: flex;
  align-items: center;
  min-height: 48px;
}
#app div:has(> .logo)::after {
  content: "La Capsule";
  color: var(--capsule-ink);
  font-family: system-ui, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.7px;
  white-space: nowrap;
}

/* Desktop: the four workflow stages share the available width.
 * Keep the upstream swipeable layout on smaller screens, where four columns
 * would make task titles too narrow to read. Additional stages wrap to a row.
 */
@media (min-width: 1000px) {
  #app .menu-container,
  #app .app-content {
    /* Vikunja writes this preference inline on both elements. */
    --sidebar-width: 200px !important;
  }
  #app .menu-container .resize-handle { display: none; }
  #app .menu-container .menu-list a { font-size: 14px; }
  #app .menu-container .collapse-project-button-placeholder {
    width: 12px;
    flex: 0 0 12px;
  }
  #app .menu-container .project-menu-title {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  #app .kanban {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  #app .kanban > ul.kanban-bucket-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: auto;
  }
  #app .kanban > ul > .bucket {
    width: auto;
    min-width: 0;
    max-width: none;
    height: max(360px, calc(100dvh - 230px));
    margin: 0;
  }
  #app .kanban .bucket-header { padding: 10px; }
  #app .kanban .bucket-header .title { min-width: 0; }
  #app .kanban .kanban-card { min-width: 0; }
  #app .kanban .kanban-card > .p-2 { padding: 11px; }
  #app .kanban .kanban-card h3 { overflow-wrap: anywhere; }
  #app .kanban > .new-bucket {
    align-self: flex-start;
    width: 240px;
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
}

/* Phone: retain readable cards and native horizontal column navigation. */
@media (max-width: 767px) {
  #app .button, .task-view .button { min-height: 44px; }
  #app .menu-container .menu-list a { font-size: 14px; }
  #app .menu-container .collapse-project-button-placeholder {
    width: 12px;
    flex: 0 0 12px;
  }
  #app .menu-container .project-menu-title {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  #app .username-dropdown-trigger .username {
    /* Keep the account name available to assistive technology on mobile. */
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #app .navbar:has(.project-title-wrapper) {
    height: 112px;
    flex-wrap: wrap;
    gap: 0;
    padding-inline: 12px;
  }
  #app .navbar:has(.project-title-wrapper) > .menu-button {
    height: 52px;
    margin: 0;
  }
  #app .navbar:has(.project-title-wrapper) > .navbar-end {
    height: 52px;
    margin-left: auto;
  }
  #app .navbar .project-title-wrapper {
    order: 3;
    flex: 0 0 100%;
    min-width: 0;
    height: 60px;
    margin: 0;
  }
  #app .navbar .project-title {
    flex: 1;
    min-width: 0;
    max-width: none;
    font-size: 18px;
  }
  #app:has(.navbar .project-title-wrapper) .app-container { padding-top: 112px; }
  #app .navbar .project-title-button,
  #app .navbar .trigger-button,
  #app .kanban .bucket-header .dropdown-trigger {
    min-width: 44px;
    min-height: 44px;
  }
  #app .switch-view-container { max-width: 100%; gap: 8px; }
  #app .switch-view { max-width: 100%; }
  #app .switch-view a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 5px 7px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #app .filter-container .button { min-height: 44px; }
  #app .kanban {
    height: max(300px, calc(100dvh - 278px));
    padding-inline: 16px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
  }
  #app .kanban .bucket {
    flex-shrink: 0;
    width: min(320px, calc(100vw - 40px));
    min-width: min(320px, calc(100vw - 40px));
    scroll-snap-align: start;
  }
  #app .kanban .bucket-header { padding: 6px 12px; }
  #app .kanban .kanban-card h3 a {
    display: block;
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  #app .kanban input, #app .kanban textarea { font-size: 16px; }
  .task-view .close { min-width: 44px; min-height: 44px; }
}