/* ============================================================
   Mikoverse — Vikunja Theme (Sakura)
   Tailored for Vikunja v0.24+ (Vue 3 / Bulma-derived)
   Injected via nginx sub_filter — see nginx.conf
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ----------------------------------------------------------------
   Tokens
---------------------------------------------------------------- */
:root {
  --miko-pink:        #ec4899;
  --miko-pink-dark:   #be185d;
  --miko-pink-light:  #f9a8d4;
  --miko-pink-bg:     #fdf2f8;
  --miko-pink-soft:   rgba(236, 72, 153, 0.10);
  --miko-pink-soft-2: rgba(236, 72, 153, 0.18);
  --miko-purple:      #a78bfa;
  --miko-radius:      14px;

  /* Vikunja design tokens (override) */
  --primary:          var(--miko-pink) !important;
  --primary-dark:     var(--miko-pink-dark) !important;
  --primary-light:    var(--miko-pink-light) !important;
  --link:             var(--miko-pink) !important;
  --link-hover:       var(--miko-pink-dark) !important;
  --site-background:  var(--miko-pink-bg) !important;
}

/* ----------------------------------------------------------------
   Typography
---------------------------------------------------------------- */
html, body, button, input, textarea, select,
.button, .input, .select select,
.menu-label, .menu-list,
.card-header-title, .modal-card-title {
  font-family: 'Nunito', system-ui, sans-serif !important;
  letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, .title, .subtitle,
.namespace-title, .menu-label {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 800 !important;
}

/* ----------------------------------------------------------------
   Page background — soft Sakura gradient
---------------------------------------------------------------- */
body, .app-container, #app {
  background:
    linear-gradient(135deg, #fdf2f8 0%, #fce7f3 35%, #f5e7ff 70%, #ede9fe 100%) fixed !important;
}

/* ----------------------------------------------------------------
   Top navbar
---------------------------------------------------------------- */
nav.navbar,
nav.navbar.main-theme,
nav.navbar.is-fixed-top,
header.navbar {
  background-color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(249, 168, 212, 0.4) !important;
  box-shadow: 0 2px 16px rgba(236, 72, 153, 0.06) !important;
}

.navbar .user span,
.navbar a, .navbar .navbar-item {
  color: var(--miko-pink-dark) !important;
}

/* ----------------------------------------------------------------
   Sidebar / namespace menu
---------------------------------------------------------------- */
.app-container .namespace-container,
aside.namespace-container,
.namespaces-list {
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px);
  border-right: 1px solid rgba(249, 168, 212, 0.3) !important;
}

.menu-label,
.app-container .namespace-container .menu .menu-label {
  color: var(--miko-pink-dark) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px !important;
}

.menu-list a,
.app-container .namespace-container .menu .menu-list li > a,
.app-container .namespace-container .menu .menu-list span.list-menu-link {
  color: #6b3a55 !important;
  border-radius: 10px !important;
  margin: 2px 0 !important;
  padding: 6px 12px !important;
  transition: background-color 0.15s, color 0.15s;
}

.menu-list a:hover,
.app-container .namespace-container .menu .menu-list li > a:hover,
.app-container .namespace-container .menu .menu-list li:hover {
  background-color: var(--miko-pink-soft) !important;
  color: var(--miko-pink-dark) !important;
}

.menu-list a.is-active,
.menu-list a.router-link-active,
.menu-list a.router-link-exact-active,
.app-container .namespace-container .menu .menu-list li > a.router-link-exact-active,
.app-container .namespace-container .menu .menu-list span.list-menu-link.router-link-exact-active {
  background: linear-gradient(90deg, var(--miko-pink-soft-2), var(--miko-pink-soft)) !important;
  color: var(--miko-pink-dark) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--miko-pink) !important;
}

/* Namespace headers */
.namespace-title,
.namespace-container.is-active .namespace-title {
  color: var(--miko-pink-dark) !important;
}

/* ----------------------------------------------------------------
   Buttons
---------------------------------------------------------------- */
.button.is-primary,
button.is-primary,
.task-add .button.is-primary,
.button[class*="primary"] {
  background: linear-gradient(135deg, var(--miko-pink), var(--miko-pink-dark)) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3) !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.button.is-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4) !important;
}
.button.is-primary[disabled] {
  background: var(--miko-pink-light) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.button {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------------
   Links + selection
---------------------------------------------------------------- */
a:not(.button):not(.menu-list a) { color: var(--miko-pink) !important; }
a:not(.button):not(.menu-list a):hover { color: var(--miko-pink-dark) !important; }

::selection {
  background-color: rgba(236, 72, 153, 0.3) !important;
  color: var(--miko-pink-dark) !important;
}

/* ----------------------------------------------------------------
   Inputs
---------------------------------------------------------------- */
input.input, textarea, .input, .textarea, .select select {
  border-radius: 10px !important;
  border: 1.5px solid rgba(249, 168, 212, 0.5) !important;
  font-family: 'Nunito', system-ui, sans-serif !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input.input:focus, textarea:focus, .input:focus, .textarea:focus, .select select:focus {
  border-color: var(--miko-pink) !important;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15) !important;
}

/* Checkboxes */
.fancycheckbox input[type=checkbox]:checked + .check {
  background-color: var(--miko-pink) !important;
  border-color: var(--miko-pink) !important;
}
.fancycheckbox input[type=checkbox]:checked + .check svg {
  color: #fff !important;
}

/* ----------------------------------------------------------------
   Tasks list
---------------------------------------------------------------- */
.tasks .task,
.task-link {
  border-radius: 10px !important;
  transition: background-color 0.15s, transform 0.15s;
}
.tasks .task:hover,
.task-link:hover,
.project-link:hover {
  background-color: var(--miko-pink-soft) !important;
  transform: translateX(2px);
}
.tasks .task a {
  color: #3a1f2c !important;        /* dark neutral, not pink — readability */
  font-weight: 600 !important;
}
.tasks .task a:hover {
  color: var(--miko-pink-dark) !important;  /* pink only on hover */
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--miko-pink-soft) !important;
}

/* ----------------------------------------------------------------
   Kanban buckets
---------------------------------------------------------------- */
.kanban .bucket {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(249, 168, 212, 0.4) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(236, 72, 153, 0.06) !important;
}
.kanban .bucket .tasks .task {
  background-color: rgba(253, 242, 248, 0.85) !important;
  border: 1px solid rgba(249, 168, 212, 0.3) !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kanban .bucket .tasks .task:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.12) !important;
}
.kanban .bucket-footer .button,
.kanban .bucket.new-bucket .button {
  background-color: rgba(236, 72, 153, 0.1) !important;
  color: var(--miko-pink-dark) !important;
  border: 1px dashed var(--miko-pink-light) !important;
}

/* ----------------------------------------------------------------
   Modals + cards
---------------------------------------------------------------- */
.modal-container .task-view,
.modal-card,
.card {
  border-radius: 18px !important;
  border: 1px solid rgba(249, 168, 212, 0.4) !important;
  box-shadow: 0 12px 40px rgba(236, 72, 153, 0.12) !important;
}
.card-header-title,
.modal-card-title {
  color: var(--miko-pink-dark) !important;
  font-weight: 800 !important;
}
.card .modal-card-foot,
.modal-card-foot {
  background-color: rgba(253, 242, 248, 0.6) !important;
  border-top: 1px solid rgba(249, 168, 212, 0.3) !important;
}

/* ----------------------------------------------------------------
   Logo + brand
---------------------------------------------------------------- */
.logo, .navbar-brand,
.has-text-primary { color: var(--miko-pink) !important; }
.has-background-primary { background-color: var(--miko-pink) !important; }

/* SVG icons in primary state */
svg:not(:root).svg-inline--fa.is-primary,
.is-primary svg { color: var(--miko-pink) !important; }

/* ----------------------------------------------------------------
   Misc UI polish
---------------------------------------------------------------- */
.tag.is-primary, .tag[class*="primary"] {
  background-color: var(--miko-pink) !important;
  color: #fff !important;
}

.notification.is-primary {
  background-color: rgba(236, 72, 153, 0.15) !important;
  color: var(--miko-pink-dark) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(236, 72, 153, 0.25) !important;
}

.progress::-webkit-progress-value,
.progress::-moz-progress-bar {
  background-color: var(--miko-pink) !important;
}

/* Dropdown items */
.dropdown-item:hover, .dropdown-item.is-active {
  background-color: var(--miko-pink-soft) !important;
  color: var(--miko-pink-dark) !important;
}

/* ----------------------------------------------------------------
   View selector / switch-view bar — Vikunja stellt sich dunkel
---------------------------------------------------------------- */
.switch-view,
.switch-view-container,
.project-view-buttons,
.filter-container,
.project-actions {
  background-color: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(249, 168, 212, 0.4) !important;
  border-radius: 14px !important;
  padding: 4px 8px !important;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.06) !important;
}
.switch-view a, .switch-view button,
.project-view-buttons a, .project-view-buttons button {
  color: #3a1f2c !important;
  font-weight: 600 !important;
  background: transparent !important;
}
.switch-view a.is-active, .switch-view button.is-active,
.switch-view a.router-link-exact-active {
  background: linear-gradient(135deg, var(--miko-pink), var(--miko-pink-dark)) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* ----------------------------------------------------------------
   Page / project header (h1 + Breadcrumb)
---------------------------------------------------------------- */
.project-title, .project-name,
.title.is-1, .title.is-2, .title.is-3,
header h1, .page-title,
.task-add input.input::placeholder {
  color: #3a1f2c !important;
}

/* "Aufgabe hinzufügen" Eingabe — readable text */
.task-add .input, .task-add input {
  color: #3a1f2c !important;
}

/* Add-Button — primary gradient (gegen ausgegrauten dunklen Look) */
.task-add .button.is-primary,
button[class*="add"].is-primary {
  background: linear-gradient(135deg, var(--miko-pink), var(--miko-pink-dark)) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------------
   Dark Mode (System prefers-color-scheme: dark)
   Vikunja respektiert prefers-color-scheme automatisch.
   Override darin nur die Akzentfarben — Layout-Hintergründe in Vikunjas Dark-Theme intakt lassen.
---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --miko-pink:        #f9a8d4;
    --miko-pink-dark:   #ec4899;
    --miko-pink-light:  #fbcfe8;
    --primary:          #f9a8d4 !important;
    --primary-dark:     #ec4899 !important;
    --primary-light:    #fbcfe8 !important;
    --link:             #f9a8d4 !important;
    --link-hover:       #fbcfe8 !important;
  }

  /* Body BG: dunkles Yoru-Gradient */
  body, .app-container, #app {
    background:
      linear-gradient(135deg, #1a1626 0%, #2d1b4e 50%, #1a1f3e 100%) fixed !important;
  }

  /* Glassmorph navbar dunkel */
  nav.navbar, nav.navbar.main-theme, nav.navbar.is-fixed-top, header.navbar {
    background-color: rgba(30, 27, 46, 0.75) !important;
    border-bottom: 1px solid rgba(249, 168, 212, 0.18) !important;
  }

  /* Sidebar dunkel — breiter Selektor-Sweep für aktuelle Vikunja-Versionen */
  .app-container .namespace-container,
  aside.namespace-container,
  aside.menu,
  .namespaces-list,
  .app-container__sidebar,
  .app-sidebar,
  .navigation,
  nav.menu-container,
  .menu-container,
  #sidebar,
  [class*="sidebar"],
  [class*="namespace-container"] {
    background-color: rgba(30, 27, 46, 0.6) !important;
    background-image: none !important;
    border-right: 1px solid rgba(249, 168, 212, 0.15) !important;
    color: #e9d5ff !important;
  }

  /* Task-Text + Header in Yoru: helles Pink */
  .tasks .task a,
  .project-title, .project-name,
  .title.is-1, .title.is-2, .title.is-3,
  header h1, .page-title {
    color: #f9a8d4 !important;
  }

  /* Menu items + labels neutral hell */
  .menu-list a,
  .menu-list span,
  .app-container .namespace-container .menu .menu-list li > a,
  .app-container .namespace-container .menu .menu-list span.list-menu-link {
    color: #e9d5ff !important;
  }
  .menu-label,
  .app-container .namespace-container .menu .menu-label,
  .namespace-title {
    color: #c4b5fd !important;
  }
  .menu-list a:hover,
  .menu-list li:hover {
    background-color: rgba(249, 168, 212, 0.12) !important;
    color: #fbcfe8 !important;
  }

  /* Active items */
  .menu-list a.router-link-exact-active,
  .app-container .namespace-container .menu .menu-list li > a.router-link-exact-active {
    background: linear-gradient(90deg, rgba(249, 168, 212, 0.2), rgba(249, 168, 212, 0.08)) !important;
    color: #fbcfe8 !important;
  }

  /* Switch-view bar */
  .switch-view, .switch-view-container, .project-view-buttons, .filter-container {
    background-color: rgba(30, 27, 46, 0.6) !important;
    border-color: rgba(249, 168, 212, 0.18) !important;
  }
  .switch-view a, .switch-view button,
  .project-view-buttons a, .project-view-buttons button {
    color: #e9d5ff !important;
  }

  /* Inputs */
  input.input, textarea, .input, .textarea, .select select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(249, 168, 212, 0.25) !important;
    color: #f9a8d4 !important;
  }

  /* ------------------------------------------------------------
     Task / Project list views — main content area dark
     Vikunja's list/table view container otherwise stays white.
  ------------------------------------------------------------ */
  .app-content,
  .app-container__content,
  .content,
  main,
  section.section,
  .project-view,
  .list-view,
  .tasks-container,
  .project-tasks,
  .project-content,
  [class*="project-view"],
  [class*="list-view"],
  [class*="tasks-container"] {
    background-color: transparent !important;
    color: #f9a8d4 !important;
  }

  /* Card surfaces in list views */
  .card,
  .box,
  .panel,
  .tasks,
  .tasks-list,
  .single-task-add,
  .filter-container,
  .project-actions,
  .gantt-chart,
  .table-view,
  [class*="task-list"] {
    background-color: rgba(30, 27, 46, 0.5) !important;
    border: 1px solid rgba(249, 168, 212, 0.15) !important;
    color: #e9d5ff !important;
  }

  /* Each task row in list view */
  .tasks .task,
  .task-link,
  .single-task,
  li.task,
  [class*="single-task"] {
    background-color: rgba(45, 27, 78, 0.4) !important;
    border: 1px solid rgba(249, 168, 212, 0.12) !important;
    color: #f9a8d4 !important;
  }
  .tasks .task:hover,
  .task-link:hover,
  .single-task:hover {
    background-color: rgba(249, 168, 212, 0.10) !important;
    transform: translateX(2px);
  }
  .tasks .task a,
  .task-link a,
  .single-task a,
  .task-title,
  .task-name,
  [class*="task-title"] {
    color: #fbcfe8 !important;
  }
  .tasks .task a:hover {
    color: #ec4899 !important;
  }

  /* Tables (table view) */
  .table,
  .table thead,
  .table tbody,
  .table tr,
  table {
    background-color: transparent !important;
    color: #f9a8d4 !important;
  }
  .table thead th,
  table thead th {
    background-color: rgba(45, 27, 78, 0.6) !important;
    color: #fbcfe8 !important;
    border-color: rgba(249, 168, 212, 0.18) !important;
  }
  .table tbody td,
  table tbody td {
    background-color: rgba(30, 27, 46, 0.4) !important;
    color: #e9d5ff !important;
    border-color: rgba(249, 168, 212, 0.10) !important;
  }
  .table.is-hoverable tbody tr:not(.is-selected):hover,
  table tbody tr:hover {
    background-color: rgba(249, 168, 212, 0.10) !important;
  }

  /* Modals + popups */
  .modal-container .task-view,
  .modal-card,
  .modal-card-head,
  .modal-card-body,
  .modal-card-foot {
    background-color: rgba(30, 27, 46, 0.95) !important;
    color: #f9a8d4 !important;
    border-color: rgba(249, 168, 212, 0.18) !important;
  }
  .card-header-title,
  .modal-card-title {
    color: #fbcfe8 !important;
  }

  /* Task-view detail page (single-task open) */
  .task-view,
  .task-view__container,
  .task-view-container,
  .taskedit,
  [class*="task-view"],
  [class*="taskedit"] {
    background-color: rgba(30, 27, 46, 0.85) !important;
    color: #f9a8d4 !important;
    border-color: rgba(249, 168, 212, 0.18) !important;
  }

  /* Inner panels / sections of task-view */
  .task-view .heading,
  .task-view .details,
  .task-view .description,
  .task-view .comments,
  .task-view .attachments,
  .task-view .checklist-summary,
  .task-view .reminders,
  .task-view .relations,
  .task-view .activity,
  .task-view aside,
  .task-view section,
  .task-view .columns > .column,
  .task-view__details,
  .task-view__sidebar,
  .task-view__content,
  .task-view__column {
    background-color: transparent !important;
    color: #e9d5ff !important;
    border-color: rgba(249, 168, 212, 0.12) !important;
  }

  /* Field labels + values inside task-view */
  .task-view label,
  .task-view .label,
  .task-view h1, .task-view h2, .task-view h3, .task-view h4,
  .task-view .title, .task-view .subtitle,
  .task-view strong {
    color: #fbcfe8 !important;
  }
  .task-view p, .task-view span, .task-view div, .task-view small,
  .task-view a:not(.button) {
    color: #e9d5ff;
  }
  .task-view a:not(.button) {
    color: #f9a8d4 !important;
  }
  .task-view a:not(.button):hover {
    color: #fbcfe8 !important;
  }

  /* Editor / textarea / contenteditable in task-view */
  .task-view .editor,
  .task-view .editor-content,
  .task-view .ProseMirror,
  .task-view textarea,
  .task-view [contenteditable] {
    background-color: rgba(45, 27, 78, 0.4) !important;
    color: #f9a8d4 !important;
    border-color: rgba(249, 168, 212, 0.18) !important;
  }

  /* Comment cards inside task-view */
  .task-view .comment,
  .task-view .comments .comment-info,
  .task-view .activity .activity-entry {
    background-color: rgba(45, 27, 78, 0.5) !important;
    border: 1px solid rgba(249, 168, 212, 0.15) !important;
    color: #e9d5ff !important;
  }

  /* Dropdowns */
  .dropdown-content,
  .dropdown-menu {
    background-color: rgba(30, 27, 46, 0.95) !important;
    border: 1px solid rgba(249, 168, 212, 0.18) !important;
  }
  .dropdown-item {
    color: #e9d5ff !important;
  }
  .dropdown-item:hover, .dropdown-item.is-active {
    background-color: rgba(249, 168, 212, 0.12) !important;
    color: #fbcfe8 !important;
  }

  /* Generic text fallback for plain content */
  p, span, label, small, strong, em, li, td, th {
    color: inherit;
  }

  /* White-bg overrides — kill remaining light surfaces */
  [style*="background-color: white"],
  [style*="background-color:#fff"],
  [style*="background-color: #fff"],
  [style*="background: white"] {
    background-color: rgba(30, 27, 46, 0.5) !important;
    color: #f9a8d4 !important;
  }
}