/* Webery theme for Vikunja — matches wireframes.webery.at
 * Palette: zinc neutrals + #fcbb00 yellow accent.
 * No orange/coral, no dark-navy fills. Everything light.
 */
:root {
  /* Brand */
  --webery-accent: #ff5745;
  --webery-accent-hover: #e64636;
  --webery-accent-dark: #c93628;
  --webery-accent-deep: #7a1f15;
  --webery-accent-soft: #fff0ed;
  --webery-accent-ring: rgba(255, 87, 69, .25);

  /* Neutrals (Tailwind zinc) */
  --webery-page: #fafafa;
  --webery-panel: #ffffff;
  --webery-panel-alt: #f4f4f5;
  --webery-panel-hover: #ececef;
  --webery-line: #e4e4e7;
  --webery-line-soft: #f4f4f5;
  --webery-ink: #0a0a0a;
  --webery-text: #3f3f46;
  --webery-muted: #71717a;
  --webery-muted-soft: #a1a1aa;
  --webery-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(10, 10, 10, .05);
  --webery-shadow-sm: 0 1px 2px rgba(10, 10, 10, .05);

  /* Override Vikunja/Bulma tokens */
  --primary: var(--webery-accent) !important;
  --primary-h: 6 !important;
  --primary-s: 100% !important;
  --primary-l: 64% !important;
  --primary-hsl: 6, 100%, 64% !important;
  --primary-invert: #ffffff !important;
  --primary-light: var(--webery-accent-soft) !important;
  --primary-dark: var(--webery-accent-hover) !important;

  --link: var(--webery-ink) !important;
  --link-hover: var(--webery-accent-dark) !important;
  --link-invert: #0a0a0a !important;

  --site-background: var(--webery-page) !important;
  --body-background-color: var(--webery-page) !important;
  --background: var(--webery-page) !important;
  --scheme-main: #ffffff !important;
  --scheme-main-bis: #fafafa !important;
  --scheme-main-ter: #f4f4f5 !important;

  --text: var(--webery-text) !important;
  --text-strong: var(--webery-ink) !important;
  --text-light: var(--webery-muted) !important;
  --grey: var(--webery-muted) !important;
  --grey-dark: var(--webery-text) !important;
  --grey-light: var(--webery-muted-soft) !important;
  --grey-lighter: var(--webery-line) !important;
  --grey-lightest: var(--webery-line-soft) !important;

  --border: var(--webery-line) !important;
  --border-light: var(--webery-line-soft) !important;
  --card-border-color: var(--webery-line) !important;
  --input-border-color: var(--webery-line) !important;
  --input-focus-border-color: var(--webery-accent) !important;
  --input-focus-box-shadow-color: var(--webery-accent-ring) !important;
  --switch-view-color: var(--webery-ink) !important;
  --shadow: var(--webery-shadow) !important;
}

/* Page surfaces */
html,
body,
#app,
.app-container,
.app-container-background,
.content-wrapper,
.app-content,
.view,
.loader-container {
  background: var(--webery-page) !important;
  color: var(--webery-text) !important;
}

/* Initial loading splash — hide the Vikunja llama, lighten the bg */
.vikunja-loading {
  background: var(--webery-page) !important;
}

.vikunja-loading img,
.vikunja-loading svg:not(.vikunja-logo),
.vikunja-loading [src*="llama"],
.vikunja-loading [class*="llama"] {
  display: none !important;
}

.vikunja-loading > div:first-child,
.vikunja-loading > svg:first-child,
.vikunja-loading > img:first-child {
  display: none !important;
}

.vikunja-loading p,
.vikunja-loading span {
  color: var(--webery-muted) !important;
}

/* Section labels in task-detail right sidebar (Organisation / Verwaltung /
 * Datum und Uhrzeit) — were rgb(229,231,235) ~ gray-200, unreadable on
 * white. Bump to readable muted grey. */
.action-heading,
span.action-heading,
.task-view .action-heading,
[class*="task"] .action-heading {
  color: var(--webery-muted) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  font-size: .75em !important;
}

/* Mobile-only: navbar (top bar) is cramped — hide its logo there. The
 * sidebar (slide-out menu) shows the webery wordmark instead.
 * Desktop: navbar logo stays visible, sidebar one stays hidden (Vikunja's
 * own rule does that already at min-width:769px). */
@media screen and (max-width: 769px) {
  /* Hide the navbar/header logo on mobile */
  .navbar .logo-link,
  .navbar .logo-link img,
  .navbar img.logo,
  header.navbar img.logo,
  header.navbar .logo-link {
    display: none !important;
    visibility: hidden !important;
  }

  /* Show the slide-out menu's logo on mobile (Vikunja hides it on
   * desktop; we restore it on mobile via this rule). */
  nav.menu .logo,
  nav.top-menu .logo,
  .menu-container nav .logo,
  .menu-container .logo,
  aside .logo,
  aside a.logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: .5rem 1rem 1rem !important;
  }
}

body,
button,
input,
select,
textarea {
  color: var(--webery-text);
}

/* Top navbar */
.navbar,
.navbar.is-dark,
.navbar.is-primary {
  background: var(--webery-panel) !important;
  border-bottom: 1px solid var(--webery-line) !important;
  box-shadow: none !important;
  color: var(--webery-ink) !important;
}

.navbar a,
.navbar .navbar-item,
.navbar .navbar-link {
  color: var(--webery-ink) !important;
  background: transparent !important;
}

.navbar a:hover,
.navbar .navbar-item:hover,
.navbar .navbar-link:hover {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* Logo: webery wordmark.
 * Only the <img class="logo"> renders the actual logo (via content: url()).
 * The wrapper <a class="logo"> stays transparent — otherwise we double-
 * render the logo (once via the <a> background-image, once via the <img>). */
img.logo,
.logo-link img.logo,
.menu-container .logo img,
.navbar img.logo {
  content: url("/branding/logo-black.svg") !important;
  opacity: 1 !important;
  width: 180px !important;
  height: auto !important;
  max-height: 44px !important;
  background: transparent !important;
  background-image: none !important;
}

/* In the slide-out sidebar on mobile, give the logo more room — the
 * sidebar is ~70vw wide, so we can comfortably show a 200px wordmark. */
.menu .logo img,
.menu-container .logo img,
nav.menu a.logo img,
nav.top-menu a.logo img {
  width: 200px !important;
  max-width: 220px !important;
  max-height: 56px !important;
}

/* Wrapper <a class="logo"> / .logo-link should NOT paint the logo —
 * they only hold the inner <img>. */
a.logo,
.logo-link,
.menu-container a.logo,
.navbar a.logo {
  background: transparent !important;
  background-image: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Sidebar — light surface, light hover, no dark fill */
.menu-container,
.menu-container[data-v-6cefea7d],
.sidebar,
aside.menu,
.menu {
  background: var(--webery-panel) !important;
  border-right: 1px solid var(--webery-line) !important;
  box-shadow: none !important;
  color: var(--webery-ink) !important;
}

.menu .menu-list li,
.menu .menu-list li > div,
.menu .menu-list .list-menu-link,
.menu .menu-list a,
.menu-list a {
  background: transparent !important;
  color: var(--webery-ink) !important;
  border-radius: 6px !important;
}

.menu .menu-list li:hover,
.menu .menu-list li > div:hover,
.menu .menu-list .list-menu-link:hover,
.menu .menu-list a:hover {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* Active sidebar item: light grey panel + left accent bar in yellow */
.menu .menu-list a.router-link-active,
.menu .menu-list a.router-link-exact-active,
.menu .menu-list li > div:has(a.router-link-active),
.menu .menu-list li > div:has(a.router-link-exact-active),
.menu .menu-list li > div.router-link-active,
.menu .menu-list li > div.router-link-exact-active {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 0 var(--webery-accent) !important;
}

.menu svg,
.menu .icon,
.navbar svg,
.navbar .icon {
  color: var(--webery-muted) !important;
}

.menu .menu-list a.router-link-active svg,
.menu .menu-list a.router-link-exact-active svg,
.menu .menu-list li > div:has(a.router-link-active) svg,
.menu .menu-list li > div:has(a.router-link-exact-active) svg {
  color: var(--webery-ink) !important;
}

/* Typography */
.title,
.subtitle,
.label,
.menu-label,
.navbar-item,
.navbar-link,
.table th,
strong,
.task .tasktext,
.task a.task-link,
.project-title,
.project-title * {
  color: var(--webery-ink) !important;
}

a:not(.button):not(.tag):not(.dropdown-item):not(.navbar-item):not(.navbar-link),
.task a:not(.button),
.task .tasktext {
  color: var(--webery-ink) !important;
}

a:not(.button):not(.tag):hover {
  color: var(--webery-accent-dark) !important;
}

.help,
.hint,
.has-text-grey,
.has-text-grey-light,
.has-text-grey-dark,
.menu-label,
.task .task-project,
.task .dueDate,
.task .created,
.task .updated,
.task span.parent-tasks {
  color: var(--webery-muted) !important;
}

/* Panels, cards, inputs */
.box,
.card,
.dropdown-content,
.modal-card,
.modal-card-body,
.modal-card-head,
.modal-card-foot,
.message,
.message-body,
.table,
.input,
.textarea,
.select select,
.task,
.task-view {
  background: var(--webery-panel) !important;
  border-color: var(--webery-line) !important;
  color: var(--webery-text) !important;
}

.box,
.card,
.task-view {
  border: 1px solid var(--webery-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--webery-shadow) !important;
}

.input,
.textarea,
.select select {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.input:focus,
.textarea:focus,
.select select:focus,
.button:focus {
  border-color: var(--webery-accent) !important;
  box-shadow: 0 0 0 .15em var(--webery-accent-ring) !important;
}

/* Project overview / "Zuletzt angesehen" cards — kill default dark fill */
.project-card,
.app-content .card[style],
.app-content a.card[style],
.app-content a[href^="/projects/"][style],
.app-content a[href*="/projects/"][style],
[class*="project-card"][style],
a[class*="project-card"][style] {
  background: var(--webery-panel) !important;
  background-color: var(--webery-panel) !important;
  background-image: none !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 10px !important;
  color: var(--webery-ink) !important;
  box-shadow: var(--webery-shadow-sm) !important;
  overflow: hidden !important;
}

.project-card:hover {
  border-color: var(--webery-muted-soft) !important;
  box-shadow: var(--webery-shadow) !important;
}

/* The dark image overlay div behind the title — hide it and let the white card show */
.project-card .project-background,
.project-card [class*="project-background"] {
  background: transparent !important;
  background-image: none !important;
  display: none !important;
}

.project-card .project-title,
.project-card [class*="project-title"] {
  color: var(--webery-ink) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.project-card *,
.app-content .card[style] *,
.app-content a.card[style] *,
.app-content a[href^="/projects/"][style] *,
.app-content a[href*="/projects/"][style] *,
[class*="project-card"][style] *,
a[class*="project-card"][style] * {
  color: var(--webery-ink) !important;
  text-shadow: none !important;
}

/* Accent stripe at top of project card */
.project-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--webery-accent);
}
.project-card { position: relative !important; }

/* Buttons — coral primary with white text */
.button.is-primary,
.button.is-link,
.button.is-success,
.notification.is-primary,
.table tr.is-selected {
  background: var(--webery-accent) !important;
  border-color: var(--webery-accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.button.is-primary:hover,
.button.is-link:hover,
.button.is-success:hover {
  background: var(--webery-accent-hover) !important;
  border-color: var(--webery-accent-hover) !important;
  color: #ffffff !important;
}

.button.is-primary:focus,
.button.is-link:focus,
.button.is-success:focus {
  box-shadow: 0 0 0 .15em var(--webery-accent-ring) !important;
}

.button,
.button.is-light {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
  border-color: var(--webery-line) !important;
}

.button:hover,
.button.is-light:hover {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
  border-color: var(--webery-line) !important;
}

/* Generic .is-active button state (tabs, segmented controls, date picker) */
.button.is-active,
button.is-active:not(.is-primary):not(.is-danger):not(.is-success):not(.is-warning) {
  background: var(--webery-accent-soft) !important;
  background-color: var(--webery-accent-soft) !important;
  color: var(--webery-accent-dark) !important;
  border-color: var(--webery-accent) !important;
  font-weight: 600 !important;
}

/* Bulma "is-dark/is-black" — flatten to light */
.button.is-dark,
.button.is-black,
.has-background-dark,
.has-background-black,
.has-background-grey-dark,
.has-background-grey-darker {
  background: var(--webery-panel-alt) !important;
  background-color: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
  border-color: var(--webery-line) !important;
}

.button.is-dark:hover,
.button.is-black:hover {
  background: var(--webery-panel-hover) !important;
  color: var(--webery-ink) !important;
}

/* Tags (Fertig / done badges etc.) */
.tag {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
  border: 1px solid var(--webery-line) !important;
}

.tag.is-primary,
.tag.is-warning {
  background: var(--webery-accent-soft) !important;
  color: var(--webery-accent-deep) !important;
  border-color: var(--webery-accent-soft) !important;
}

.tag.is-success {
  background: #dcfce7 !important;
  color: #14532d !important;
  border-color: #bbf7d0 !important;
}

.tag.is-info {
  background: #dbeafe !important;
  color: #1e3a8a !important;
  border-color: #bfdbfe !important;
}

.tag.is-danger {
  background: #fee2e2 !important;
  color: #7f1d1d !important;
  border-color: #fecaca !important;
}

/* View switcher (Liste / Gantt / Tabelle / Kanban) */
.switch-view,
.view-switch,
.project-view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--webery-panel-alt) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.switch-view .button,
.view-switch .button,
.project-view-switch .button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--webery-text) !important;
  font-weight: 500 !important;
}

.switch-view .button:hover,
.view-switch .button:hover,
.project-view-switch .button:hover {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
}

.switch-view .button.is-active,
.switch-view .button.is-primary,
.view-switch .button.is-active,
.view-switch .button.is-primary,
.project-view-switch .button.is-active,
.project-view-switch .button.is-primary {
  background: var(--webery-panel) !important;
  border-color: var(--webery-line) !important;
  color: var(--webery-ink) !important;
  font-weight: 600 !important;
  box-shadow: var(--webery-shadow-sm) !important;
}

/* Kanban */
.kanban,
.kanban .tasks,
.task-view {
  background: transparent !important;
}

.kanban .bucket,
.kanban [class*="bucket"] {
  background: var(--webery-panel-alt) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--webery-text) !important;
}

.kanban .bucket input,
.kanban [class*="bucket"] input,
.kanban .bucket-header,
.kanban [class*="bucket-header"],
.kanban [class*="bucket-title"] {
  background: transparent !important;
  color: var(--webery-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

.kanban .task,
.kanban .task-item,
.task-item {
  background: transparent !important;
  background-color: transparent !important;
}

.kanban .task {
  background: var(--webery-panel) !important;
  background-color: var(--webery-panel) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--webery-shadow-sm) !important;
  color: var(--webery-text) !important;
  padding-bottom: calc(.4rem + 5px) !important;
}

.kanban .task:hover {
  border-color: var(--webery-muted-soft) !important;
  box-shadow: var(--webery-shadow) !important;
}

.kanban .button:not(.is-primary):not(.is-danger),
.kanban a.button:not(.is-primary):not(.is-danger),
.kanban [class*="task-add"],
.kanban [class*="add-task"],
.kanban [class*="bucket"] > button,
.kanban [class*="bucket"] > a.button {
  background: var(--webery-panel) !important;
  color: var(--webery-text) !important;
  border-color: var(--webery-line) !important;
}

.kanban .button:not(.is-primary):not(.is-danger):hover,
.kanban a.button:not(.is-primary):not(.is-danger):hover {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* Task chips: attachment / description / comments / due-date / labels.
 * Vikunja gives these rgb(31,41,55) by default — flatten to light. */
.task .due-date,
.task .comment-count,
.task .project-task-icon,
.task .task-id,
.task .checklist-summary,
.task .attachments,
.task .icon,
.kanban .task span.icon,
.kanban .task .due-date,
.kanban .task .comment-count,
.kanban .task .project-task-icon,
.kanban .task [class*="footer"] span {
  background: var(--webery-panel-alt) !important;
  background-color: var(--webery-panel-alt) !important;
  color: var(--webery-muted) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: .8em !important;
  line-height: 1.2 !important;
}

.task .due-date svg,
.task .comment-count svg,
.task .icon svg,
.task span.icon svg,
.task .task-id svg,
.kanban .task .icon svg,
.kanban .task svg {
  color: var(--webery-muted) !important;
  fill: currentColor !important;
}

.task .task-id {
  background: transparent !important;
  padding: 0 !important;
  color: var(--webery-muted) !important;
  font-weight: 500 !important;
}

/* Overdue due-date (red-ish original) */
.task .due-date.overdue,
.task .due-date[class*="overdue"],
.task .due-date.is-danger,
.kanban .task .due-date.overdue {
  background: #fee2e2 !important;
  color: #7f1d1d !important;
}

/* Labels inside tasks */
.task .label-wrapper .tag,
.kanban .task .tag {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
  border: 1px solid var(--webery-line) !important;
  padding: 1px 6px !important;
  font-size: .75em !important;
}

/* Gantt */
[class*="gantt"],
[class*="gantt"] .card,
[class*="gantt"] .box,
[class*="gantt"] table,
[class*="gantt"] thead,
[class*="gantt"] tbody,
[class*="gantt"] tr,
[class*="gantt"] td,
[class*="gantt"] th {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
  border-color: var(--webery-line) !important;
}

[class*="gantt"] .is-dark,
[class*="gantt"] .has-background-dark,
[class*="gantt"] [style*="background"] {
  background: var(--webery-panel-alt) !important;
  background-color: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* Rich-text editor toolbar (Tiptap) — used in description + comment editors */
.editor-toolbar,
.editor .editor-toolbar,
.editor-toolbar-bar,
[class*="editor"] .toolbar,
.tiptap-toolbar,
.ProseMirror-menubar,
.menubar {
  background: var(--webery-panel-alt) !important;
  background-color: var(--webery-panel-alt) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 8px !important;
  color: var(--webery-ink) !important;
  padding: 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
}

.editor-toolbar button,
.editor-toolbar [role="button"],
.editor-toolbar a,
.editor .editor-toolbar button,
.editor-toolbar-bar button,
[class*="editor"] .toolbar button,
.tiptap-toolbar button,
.ProseMirror-menubar button,
.menubar button {
  background: transparent !important;
  color: var(--webery-ink) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  min-width: 30px !important;
  font-weight: 500 !important;
}

.editor-toolbar button:hover,
.editor-toolbar [role="button"]:hover,
.editor-toolbar a:hover,
.editor .editor-toolbar button:hover,
.tiptap-toolbar button:hover,
.ProseMirror-menubar button:hover,
.menubar button:hover {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
}

.editor-toolbar button.is-active,
.editor-toolbar button[class*="active"],
.editor-toolbar [aria-pressed="true"],
.tiptap-toolbar button.is-active,
.ProseMirror-menubar button.is-active,
.menubar button.is-active {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
  box-shadow: var(--webery-shadow-sm) !important;
}

.editor-toolbar svg,
.editor-toolbar [class*="icon"],
.tiptap-toolbar svg,
.ProseMirror-menubar svg,
.menubar svg {
  color: var(--webery-ink) !important;
  fill: currentColor !important;
}

/* The editor content area itself */
.editor-content,
.ProseMirror,
.tiptap,
[class*="editor"] .ProseMirror,
[class*="editor-wrapper"] {
  background: var(--webery-panel) !important;
  color: var(--webery-text) !important;
  border-color: var(--webery-line) !important;
}

/* Fallback: any element still using Vikunja's exact dark-navy default */
[style*="background-color: rgb(17, 24, 39)"],
[style*="background-color:#111827"],
[style*="background:#111827"] {
  background-color: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* Task detail modal */
dialog.task-detail-view-modal,
.modal-dialog.task-detail-view-modal,
.task-detail-view-modal .modal-container,
.task-detail-view-modal .modal-content,
.task-detail-view-modal .card,
.task-detail-view-modal .box,
.task-detail-view-modal .columns,
.task-detail-view-modal .column,
.task-detail-view-modal section,
.task-detail-view-modal aside,
.task-detail-view-modal .content,
.task-detail-view-modal [class*="editor"],
.task-detail-view-modal [class*="toolbar"],
.task-detail-view-modal [class*="description"],
.task-detail-view-modal [class*="comments"] {
  background: var(--webery-panel) !important;
  background-color: var(--webery-panel) !important;
  color: var(--webery-text) !important;
  border-color: var(--webery-line) !important;
}

.task-detail-view-modal .card,
.task-detail-view-modal .box {
  border: 1px solid var(--webery-line) !important;
  box-shadow: 0 24px 70px rgba(10, 10, 10, .12) !important;
}

.task-detail-view-modal input,
.task-detail-view-modal textarea,
.task-detail-view-modal .input,
.task-detail-view-modal .textarea,
.task-detail-view-modal .button:not(.is-primary):not(.is-danger),
.task-detail-view-modal [role="button"]:not(.is-primary):not(.is-danger) {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
  border-color: var(--webery-line) !important;
}

.task-detail-view-modal [class*="toolbar"] button,
.task-detail-view-modal [class*="editor"] button {
  background: var(--webery-panel) !important;
  color: var(--webery-text) !important;
}

.task-detail-view-modal [class*="toolbar"] button:hover,
.task-detail-view-modal [class*="editor"] button:hover {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* Settings page — make highlighted item light too */
[class*="settings"] aside .menu-list a,
[class*="settings"] aside .menu-list li > div,
.user-settings .navigation .navigation-link,
.navigation .navigation-link {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--webery-ink) !important;
  border-radius: 6px !important;
}

[class*="settings"] aside .menu-list a.router-link-active,
[class*="settings"] aside .menu-list a.router-link-exact-active,
[class*="settings"] aside .menu-list li > div.router-link-active,
[class*="settings"] aside .menu-list li > div.router-link-exact-active,
.user-settings .navigation .navigation-link.router-link-active,
.user-settings .navigation .navigation-link.router-link-exact-active,
.navigation .navigation-link.router-link-active,
.navigation .navigation-link.router-link-exact-active {
  background: var(--webery-panel-alt) !important;
  background-color: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
  box-shadow: inset 3px 0 0 0 var(--webery-accent) !important;
  font-weight: 600 !important;
}

.user-settings .navigation .navigation-link:hover,
.navigation .navigation-link:hover {
  background: var(--webery-panel-alt) !important;
  background-color: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* User dropdown menu (Einstellungen / Tastenkürzel / …) */
.dropdown-menu .dropdown-content,
.user-dropdown .dropdown-content,
.dropdown-content {
  background: var(--webery-panel) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--webery-shadow) !important;
  padding: 4px !important;
}

.dropdown-item,
.dropdown-content a,
.dropdown-content button {
  background: transparent !important;
  color: var(--webery-ink) !important;
  border-radius: 6px !important;
}

.dropdown-item:hover,
.dropdown-content a:hover,
.dropdown-content button:hover,
.dropdown-item.is-active,
.dropdown-content a.is-active,
.dropdown-content a.router-link-active,
.dropdown-content a.router-link-exact-active {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
}

/* Reaction button (smiley to add emoji reactions) */
.reaction-button,
button.reaction-button {
  background: var(--webery-panel-alt) !important;
  background-color: var(--webery-panel-alt) !important;
  color: var(--webery-muted) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
}

.reaction-button:hover,
button.reaction-button:hover {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
  border-color: var(--webery-muted-soft) !important;
}

.reaction-button svg,
button.reaction-button svg {
  color: var(--webery-muted) !important;
  fill: currentColor !important;
}

/* Avatar circles use accent-soft instead of accent fill */
.avatar,
[class*="avatar"]:not(img) {
  background: var(--webery-accent-soft) !important;
  color: var(--webery-accent-deep) !important;
}

/* Scrollbars (webkit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--webery-line) !important;
  border-radius: 999px;
  border: 2px solid var(--webery-page);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--webery-muted-soft) !important;
}

/* Search / notifications icons */
.notification-icon,
.search-icon,
.notifications,
.notifications .has-unread-notifications {
  color: var(--webery-muted) !important;
}

.notifications .has-unread-notifications,
[class*="has-unread"] {
  color: var(--webery-accent-dark) !important;
}

/* Misc: kill any remaining inline coral/orange background-image gradients */
[style*="ff5745"],
[style*="FF5745"],
[style*="#ff5"] {
  background-image: none !important;
}

/* Progress bars */
progress.is-primary,
.progress.is-primary,
progress[value] {
  accent-color: var(--webery-accent) !important;
}

progress.is-primary::-webkit-progress-value,
.progress.is-primary::-webkit-progress-value {
  background: var(--webery-accent) !important;
}

progress.is-primary::-moz-progress-bar,
.progress.is-primary::-moz-progress-bar {
  background: var(--webery-accent) !important;
}

/* Checkboxes use accent color */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--webery-accent) !important;
}



/* ═══════════════════════════════════════════════════════════════════
 * Login page (.no-auth-wrapper / .noauth-container) — wireframes look
 * ═══════════════════════════════════════════════════════════════════
 * The Vikunja login is a side-by-side layout with a mountain image and
 * a dark form panel. We replace it with a single centered white card:
 *   ┌──────────────────────┐
 *   │   WEBERY (wordmark)  │
 *   │   Webery Projekte    │
 *   │ ┌──────────────────┐ │
 *   │ │  Webery Login    │ │  ← coral OIDC button
 *   │ └──────────────────┘ │
 *   └──────────────────────┘
 */

/* Outer wrapper: light bg, center the card */
.no-auth-wrapper {
  background: var(--webery-page) !important;
  background-image: none !important;
  min-block-size: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

/* Hide the loose logo above the card (Vikunja's "WEBERY" wordmark
   in the header) — we render our own inside the card. */
.no-auth-wrapper > a.logo,
.no-auth-wrapper > .logo {
  display: none !important;
}

/* Card */
.noauth-container {
  background: transparent !important;
  border: none !important;
  inline-size: 100% !important;
  max-inline-size: 400px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex-direction: column !important;
  box-shadow: none !important;
}

/* Hide the "Welcome Back!" mountain-image panel */
.noauth-container > section.image,
.noauth-container .image-title,
.noauth-container [class*="image-title"] {
  display: none !important;
}

/* Style the content section as the actual card */
.noauth-container > section.content {
  background: var(--webery-panel) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--webery-shadow) !important;
  padding: 2.25rem 2rem !important;
  inline-size: 100% !important;
  inset-inline-end: auto !important;
  inset-inline-start: auto !important;
  margin: 0 !important;
}

/* Replace the "Login" h2 with the Webery wordmark + "Webery Projekte". */
.noauth-container > section.content > div > h2.title,
.noauth-container > section.content h2.title {
  font-size: 0 !important;          /* hide "Login" text */
  color: transparent !important;
  margin: 0 !important;
}

.noauth-container > section.content > div > h2.title::before {
  content: "";
  display: block;
  background: url("/branding/logo-black.svg") no-repeat center / contain;
  height: 36px;
  margin-block-end: .25rem;
}

.noauth-container > section.content > div > h2.title::after {
  content: "Webery Projekte";
  display: block;
  text-align: center;
  font-size: .9rem;
  color: var(--webery-muted) !important;
  font-weight: 400;
  margin-block-end: 1.5rem;
}

/* Hide local form: API-config hint, username, password, stay-logged-in,
   Login button, forgot-password link, anything in the form. */
.noauth-container .api-config,
.noauth-container .field:has(input[name="username"]),
.noauth-container .field:has(input[name="password"]),
.noauth-container .field:has(input[type="checkbox"]),
.noauth-container input[name="username"],
.noauth-container input[name="password"],
.noauth-container input[type="checkbox"],
.noauth-container label[for*="username"],
.noauth-container label[for*="password"],
.noauth-container label[for*="rememberMe"],
.noauth-container .form-stay-loggedin,
.noauth-container button.is-primary:not(.is-outlined),
.noauth-container a[href*="password-reset"],
.noauth-container a[href*="forgot"],
.noauth-container .forgot-password,
.noauth-container .login-with-method {
  display: none !important;
}

/* Style the OIDC button (the "is-outlined" one) as the primary coral CTA */
.noauth-container button.is-outlined,
.noauth-container .openid-providers .button,
.noauth-container .openid-providers .base-button {
  background: var(--webery-accent) !important;
  background-color: var(--webery-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: .65rem 1rem !important;
  inline-size: 100% !important;
  font-weight: 600 !important;
  text-transform: none !important;
  margin-block-start: .25rem !important;
}

.noauth-container button.is-outlined:hover,
.noauth-container .openid-providers .button:hover {
  background: var(--webery-accent-hover) !important;
}

/* The "Don't have an account?" / Register link below — Vikunja still
   shows it on the login page. Hide it. */
.noauth-container [data-v-d56b4d0d] .has-text-centered:has(a[href*="register"]),
.noauth-container a[href*="register"] {
  display: none !important;
}

/* Legal links footer */
.noauth-container ~ .legal-links,
.no-auth-wrapper .legal-links {
  margin-block-start: 1.5rem !important;
  text-align: center !important;
  color: var(--webery-muted) !important;
}