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

/* ============================================================
   haker.ai theme for Vikunja — terminal/matrix palette
   bg #0a0f0a | surface #0f150f | surface2 #151b15
   border #202820 | text #edf2e9 | muted #a7ada4
   primary #00ff41 | link #9cff93 | warn #f59e0b | danger #ff7351
   ============================================================ */

html, html.dark, html.light {
  --scheme-main: #0a0f0a !important;
  --scheme-main-bis: #0f150f !important;
  --scheme-main-ter: #151b15 !important;
  --scheme-invert: #edf2e9 !important;
  --scheme-invert-bis: #edf2e9 !important;
  --scheme-invert-ter: #a7ada4 !important;

  --body-background-color: #0a0f0a !important;
  --body-color: #edf2e9 !important;
  --body-family: 'Inter', system-ui, sans-serif !important;

  --background: #0f150f !important;

  --text: #edf2e9 !important;
  --text-strong: #edf2e9 !important;
  --text-light: #a7ada4 !important;
  --text-invert: #0a0f0a !important;
  --title-color: #edf2e9 !important;
  --subtitle-color: #a7ada4 !important;
  --title-family: 'Space Grotesk', 'Inter', sans-serif !important;
  --subtitle-family: 'Space Grotesk', 'Inter', sans-serif !important;
  --content-heading-color: #edf2e9 !important;
  --label-color: #a7ada4 !important;

  --primary: #00ff41 !important;
  --primary-invert: #0a0f0a !important;
  --info: #a7ada4 !important;
  --success: #00ff41 !important;
  --warning: #f59e0b !important;
  --danger: #ff7351 !important;
  --link: #9cff93 !important;
  --link-hover: #00ff41 !important;
  --code: #9cff93 !important;
  --code-background: #151b15 !important;

  --border: #202820 !important;
  --border-hover: #444943 !important;
  --border-light: #202820 !important;
  --border-light-hover: #444943 !important;

  --card-border-color: #202820 !important;
  --box-background-color: #0f150f !important;

  --input-background-color: #151b15 !important;
  --input-border-color: #202820 !important;
  --input-color: #edf2e9 !important;
  --input-placeholder-color: #72776f !important;
  --input-hover-border-color: #444943 !important;
  --input-focus-border-color: #00ff41 !important;
  --input-icon-color: #a7ada4 !important;
  --input-icon-active-color: #00ff41 !important;
  --input-disabled-background-color: #0f150f !important;
  --input-disabled-color: #72776f !important;
  --input-arrow: #a7ada4 !important;

  --button-text-color: #edf2e9 !important;
  --button-text-hover-background-color: #151b15 !important;
  --button-hover-color: #0f150f !important;
  --button-active-color: #0f150f !important;

  --menu-item-color: #edf2e9 !important;
  --menu-item-hover-color: #edf2e9 !important;
  --menu-item-hover-background-color: #151b15 !important;
  --menu-item-active-color: #00ff41 !important;
  --menu-item-active-background-color: #151b15 !important;
  --menu-label-color: #72776f !important;

  --dropdown-item-hover-color: #edf2e9 !important;
  --dropdown-item-hover-background-color: #151b15 !important;

  --table-color: #edf2e9 !important;
  --table-body-background-color: #0f150f !important;
  --table-head-cell-color: #a7ada4 !important;
  --table-cell-heading-color: #edf2e9 !important;
  --table-cell-border: #202820 !important;
  --table-row-hover-background-color: #151b15 !important;
  --table-row-active-background-color: #151b15 !important;
  --table-row-active-color: #00ff41 !important;
  --table-striped-row-even-background-color: #0f150f !important;

  --loading-color: #00ff41 !important;

  /* greenish gray ramp */
  --grey-50:  #151b15 !important;
  --grey-100: #1b211a !important;
  --grey-200: #202820 !important;
  --grey-300: #2a3329 !important;
  --grey-400: #444943 !important;
  --grey-500: #72776f !important;
  --grey-600: #a7ada4 !important;
  --grey-700: #c9cdc7 !important;
  --grey-800: #edf2e9 !important;
  --grey-900: #edf2e9 !important;
  --grey-darker: #151b15 !important;
  --grey-dark: #202820 !important;
  --grey: #72776f !important;
  --grey-light: #444943 !important;
  --grey-lighter: #2a3329 !important;
  --grey-lightest: #1b211a !important;
}

/* buttons: solid primary = neon green w/ dark text */
html .button.is-primary,
html.dark .button.is-primary {
  background-color: #00ff41;
  color: #0a0f0a;
  font-weight: 600;
  border: none;
}
html .button.is-primary:hover,
html.dark .button.is-primary:hover {
  background-color: #9cff93;
  color: #0a0f0a;
}
/* amber accent for warnings */
html .button.is-warning { background-color: #f59e0b; color: #0a0f0a; }
html .button.is-danger { background-color: #ff7351; color: #0a0f0a; }

/* cards / surfaces */
html .card, html.dark .card,
html .modal-card, html.dark .modal-card,
html .dropdown-content, html.dark .dropdown-content,
html .menu-list, html.dark .menu-list {
  background-color: #0f150f;
  border-color: #202820;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}

/* navbar */
html .navbar, html.dark .navbar {
  background-color: #0a0f0a;
  border-bottom: 1px solid #202820;
}

/* links */
html a, html.dark a { color: #9cff93; }
html a:hover, html.dark a:hover { color: #00ff41; }

/* focus glow — matrix green */
html *:focus-visible, html.dark *:focus-visible {
  outline: 1px solid #00ff41 !important;
  outline-offset: 1px;
}

/* selection */
html ::selection, html.dark ::selection {
  background: #00ff41;
  color: #0a0f0a;
}

/* checkboxes */
html input[type="checkbox"], html.dark input[type="checkbox"] {
  accent-color: #00ff41;
}

/* scrollbars */
html ::-webkit-scrollbar, html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-track, html.dark ::-webkit-scrollbar-track { background: #0a0f0a; }
html ::-webkit-scrollbar-thumb, html.dark ::-webkit-scrollbar-thumb { background: #202820; border-radius: 5px; }
html ::-webkit-scrollbar-thumb:hover, html.dark ::-webkit-scrollbar-thumb:hover { background: #444943; }

/* --- hardcoded white surfaces in Vikunja components --- */
html, html.dark, html.light {
  --white: #0f150f !important;
}
html .noauth-container, html.dark .noauth-container {
  background-color: #0f150f !important;
  border: 1px solid #202820;
  box-shadow: 0 4px 24px rgba(0,0,0,.45) !important;
}
html .flatpickr-calendar, html.dark .flatpickr-calendar {
  background: #0f150f !important;
  border-color: #202820 !important;
  color: #edf2e9 !important;
}
html .menu .menu-list li:hover > div,
html .menu .menu-list.other-menu-items li:hover,
html.dark .menu .menu-list li:hover > div,
html.dark .menu .menu-list.other-menu-items li:hover {
  background: #151b15 !important;
}
html .input.title:focus, html.dark .input.title:focus { background: #151b15 !important; }

/* --- branded login: drop llama illustration, matrix-gradient panel --- */
html .noauth-container > section.image, html.dark .noauth-container > section.image {
  display: none !important;
}
html .noauth-container > main.content, html.dark .noauth-container > main.content {
  flex: 1 1 100% !important;
  background:
    radial-gradient(ellipse at top left, rgba(0,255,65,.08), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(0,255,65,.05), transparent 50%),
    #0f150f !important;
}
html .noauth-container > main.content::before, html.dark .noauth-container > main.content::before {
  content: 'haker.ai / TASKS';
  display: block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .12em;
  color: #00ff41;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
html .noauth-container, html.dark .noauth-container {
  background: #0f150f !important;
  border: 1px solid #202820 !important;
  border-radius: 8px !important;
}

/* --- Vikunja logo: blue -> haker.ai neon green, text -> off-white --- */
html svg.logo path[fill="#196aff"], html.dark svg.logo path[fill="#196aff"] {
  fill: #00ff41 !important;
}
html svg.logo, html.dark svg.logo {
  color: #edf2e9 !important;
}
/* on the dark login panel the llama body is white - keep, text legible */