/* theme name: darcula-purple (from filename theme-darcula-purple.css) */
:root {
  --is-dark-theme: true;

  /* Darcula-ish base */
  --color-body: #1e1f22;
  --color-box-body: #25262a;
  --color-box-header: #2b2d31;
  --color-navbar: #2b2d31;

  --color-text: #d7dae0;
  --color-text-light: #aab0bb;

  --color-primary-border: #3a3c43;
  --color-secondary-border: #34363c;

  /* Purple accents */
  --color-primary: #a277ff;
  --color-primary-dark-1: #8f5dff;
  --color-primary-dark-2: #7b43ff;
  --color-primary-light-1: #b897ff;

  --color-link: #a277ff;
  --color-link-hover: #c6a8ff;

  --color-input-background: #1f2024;
  --color-input-border: #3a3c43;

  --color-highlight-bg: rgba(162, 119, 255, 0.18);
}

/* make primary buttons pop like JetBrains/Darcula vibes */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary) !important;
  color: #14151a !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-light-1) !important;
  color: #14151a !important;
}

/* --- Fix transparent dropdown/menu/popover surfaces --- */

/* Common surface tokens used in various components */
:root {
  --darcula-surface-0: #1e1f22;  /* page background */
  --darcula-surface-1: #25262a;  /* cards / dropdown panels */
  --darcula-surface-2: #2b2d31;  /* headers / raised */
  --darcula-border:    #3a3c43;
  --darcula-hover:     #32343a;
}

/* Semantic UI dropdown menus */
.ui.dropdown .menu {
  background: var(--darcula-surface-1) !important;
  border: 1px solid var(--darcula-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

.ui.dropdown .menu > .item {
  background: transparent !important;
  color: var(--color-text) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .selected.item,
.ui.dropdown .menu > .active.item {
  background: var(--darcula-hover) !important;
  color: var(--color-text-dark) !important;
}

.ui.dropdown .menu > .divider {
  border-top: 1px solid var(--darcula-border) !important;
}

/* Dropdown/search inputs themselves */
.ui.selection.dropdown,
.ui.selection.dropdown:hover,
.ui.selection.dropdown.active,
.ui.selection.dropdown.visible {
  background: var(--darcula-surface-1) !important;
  border-color: var(--darcula-border) !important;
  color: var(--color-text) !important;
}

.ui.selection.dropdown .text,
.ui.selection.dropdown .dropdown.icon {
  color: var(--color-text) !important;
}

/* Search dropdown input field */
.ui.search.dropdown > input.search,
.ui.search.dropdown.active > input.search,
.ui.search.dropdown.visible > input.search {
  color: var(--color-text) !important;
}

/* Popups / tooltips / context menus used across the UI */
.ui.popup,
.ui.top.popup,
.ui.bottom.popup,
.ui.left.popup,
.ui.right.popup {
  background: var(--darcula-surface-1) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--darcula-border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* General menus (some parts use .ui.menu for dropdown-like lists) */
.ui.menu {
  background: var(--darcula-surface-2) !important;
  border-color: var(--darcula-border) !important;
}
.ui.menu .item {
  color: var(--color-text) !important;
}
.ui.menu .item:hover,
.ui.menu .active.item {
  background: var(--darcula-hover) !important;
  color: var(--color-text-dark) !important;
}

/* Modal content surfaces (avoids “see-through” panels) */
.ui.modal > .content,
.ui.modal > .header {
  background: var(--darcula-surface-1) !important;
  color: var(--color-text) !important;
  border-color: var(--darcula-border) !important;
}

/* Tables in popovers/menus sometimes inherit transparent rows */
table,
.ui.table {
  background: var(--darcula-surface-1) !important;
  color: var(--color-text) !important;
  border-color: var(--darcula-border) !important;
}


/* ─── PROJECT BOARD CARD FIXES ───────────────────────────────────────── */

:root {
  --pj-card-border: #3a3c43;
  --pj-card-bg:     #25262a;
  --pj-card-hover:  #32343a;
  --pj-card-shadow: rgba(0,0,0,0.3);
}

/* project board columns */
.board-column {
  background: var(--pj-card-bg) !important;
  border: 1px solid var(--pj-card-border) !important;
  box-shadow: 0 2px 6px var(--pj-card-shadow) !important;
  border-radius: 4px !important;
}

/* board cards (issues/tasks) */
.board-card,
.issue-card,
.board-card .issue-card {
  background: var(--pj-card-bg) !important;
  border: 1px solid var(--pj-card-border) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  color: var(--color-text) !important;
}

/* card hover state */
.board-card:hover,
.issue-card:hover {
  background: var(--pj-card-hover) !important;
  border-color: rgba(162,119,255,0.55) !important;
}

/* card heading & content */
.board-card .title,
.issue-card .title,
.board-card .issue-summary {
  color: var(--color-text-dark) !important;
}

/* patterns when lists or details use .ui.segment */
.board-column .ui.segment {
  background: var(--pj-card-bg) !important;
  border: 1px solid var(--pj-card-border) !important;
  box-shadow: 0 1px 3px var(--pj-card-shadow) !important;
}

/* ─── MILESTONES & BOARD CARD OUTLINES ───────────────────────────────── */

/* Milestone blocks (Milestones page) */
.milestone-item,
.milestone {
  background: var(--color-box-body) !important;
  border: 1px solid var(--color-primary-border) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

.milestone-item .milestone-title {
  color: var(--color-text-dark) !important;
}

/* Milestone progress bar container */
.milestone-progress {
  background: var(--color-input-background) !important;
  border-radius: 4px !important;
}

/* Milestone progress bar fill */
.milestone-progress .progress-bar {
  background: var(--color-primary) !important;
}

/* Project list cards and issues on boards */
.ui.project-list .ui.card,
.ui.project-list .project-card,
.board-card,
.issue-card,
.board-column .card,
.board-column .issue-card {
  background: var(--color-box-body) !important;
  border: 1px solid var(--color-primary-border) !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}

/* Hover state for cards */
.ui.project-list .ui.card:hover,
.project-card:hover,
.issue-card:hover,
.board-card:hover {
  background: var(--color-input-background) !important;
  border-color: var(--color-primary) !important;
}

/* Board columns */
.board-column {
  background: var(--color-body) !important;
  border: 1px solid var(--color-secondary-border) !important;
  border-radius: 6px !important;
}

/* Boards column headers */
.board-column .header {
  color: var(--color-text) !important;
}

/* Tables in milestone or project issues */
.ui.table {
  background: var(--color-box-body) !important;
  border: 1px solid var(--color-primary-border) !important;
}

/* Block quote backgrounds */
blockquote {
  background: var(--color-input-background) !important;
  border-left: 4px solid var(--color-primary) !important;
}


/* ─── LABELS ───────────────────────────────────────── */

.ui.label {
  background: #2b2d31 !important;
  color: var(--color-text) !important;
  border: 1px solid #3a3c43 !important;
}

/* Colored labels (keep semantic meaning but darken base) */
.ui.label.red,
.ui.label.orange,
.ui.label.yellow,
.ui.label.green,
.ui.label.blue,
.ui.label.purple,
.ui.label.pink,
.ui.label.grey {
  border: none !important;
  filter: brightness(0.9);
}


/* ─── MILESTONE PROGRESS BAR ───────────────────────── */
/* --- Fix commit-message / description links (center column) --- */
/* These are used for commit messages in the repo file list, activity, etc */
a.default-link.muted,
.default-link.muted:link,
.default-link.muted:visited {
  /* readable “muted text”, not primary link color */
  color: rgba(235, 235, 235, 0.72) !important;
  text-decoration: none !important;
}

/* On hover/focus, allow a subtle “link” affordance */
a.default-link.muted:hover,
a.default-link.muted:focus-visible {
  color: var(--color-primary-light-2, rgba(180, 140, 255, 0.92)) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* The track (background) */
progress {
  width: 100%;
  height: 8px;
  background-color: #2b2d31 !important;
  border: 1px solid #3a3c43 !important;
  border-radius: 4px;
  overflow: hidden;
}

/* WebKit track */
progress::-webkit-progress-bar {
  background-color: #2b2d31 !important;
}

/* Firefox track */
progress::-moz-progress-bar {
  background-color: var(--color-primary) !important;
}


/* The filled portion */

/* WebKit (Chrome, Edge, etc.) */
progress::-webkit-progress-value {
  background-color: var(--color-primary) !important;
}

/* Firefox */
progress::-moz-progress-bar {
  background-color: var(--color-primary) !important;
}


/* ─── PROJECT BOARD FLEX ITEMS (Darcula Style) ───────────────────── */

.flex-item {
  background: #2b2b2b !important;
  border: 1px solid #3c3f41 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover state */
.flex-item:hover {
  background: #313335 !important;
  border-color: #6897bb !important; /* Rider blue accent */
}

/* Card content text */
.flex-item .title,
.flex-item .issue-title,
.flex-item .content {
  color: #a9b7c6 !important;
}

/* Subtle separators inside cards */
.flex-item hr {
  border-color: #3c3f41 !important;
}

/* If flex-item contains labels, ensure they don’t blend */
.flex-item .ui.label {
  background: #3a3d41 !important;
  border: 1px solid #4e5254 !important;
  color: #a9b7c6 !important;
}


/* ─── FLEX ITEM SPACING FIX ───────────────────────── */

.flex-item {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Ensure inner content does not double-pad */
.flex-item > .content {
  padding: 0 !important;
}


/* ─── MILESTONE CARD (Darcula Style) ───────────────────────── */

.milestone-card {
  background: #2b2b2b !important;
  border: 1px solid #3c3f41 !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover state */
.milestone-card:hover {
  background: #313335 !important;
  border-color: #6897bb !important; /* Rider blue */
}

/* Title styling */
.milestone-card .milestone-title,
.milestone-card .title {
  color: #a9b7c6 !important;
}

/* Subtext / metadata */
.milestone-card .meta,
.milestone-card .milestone-meta {
  color: #808080 !important;
}

/* Progress bar spacing inside milestone */
.milestone-card progress {
  margin-top: 8px !important;
}

/* Divider consistency */
.milestone-card hr {
  border-color: #3c3f41 !important;
}


/* ─── TOOLTIP FIX (Forgejo / Semantic UI) ───────────────────────── */

/* Base popup */
.ui.popup {
  background: #2b2b2b !important;
  color: #a9b7c6 !important;
  border: 1px solid #3c3f41 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Arrow color (important — otherwise arrow stays light) */
.ui.popup:before {
  background: #2b2b2b !important;
  box-shadow: -1px -1px 0 0 #3c3f41 !important;
}

/* Inverted popups */
.ui.inverted.popup {
  background: #2b2b2b !important;
  color: #a9b7c6 !important;
  border: 1px solid #3c3f41 !important;
}

.ui.inverted.popup:before {
  background: #2b2b2b !important;
  box-shadow: -1px -1px 0 0 #3c3f41 !important;
}

/* Tooltip header */
.ui.popup .header {
  color: #ffffff !important;
}

/* Tooltip links */
.ui.popup a {
  color: #6897bb !important;
}

/* Remove accidental transparency from animation */
.ui.popup.transition.visible {
  opacity: 1 !important;
}


/* ─── TOOLTIP SYSTEMS (Tippy / generic / Bootstrap-ish) ───────────── */

/* Tippy.js */
.tippy-box,
.tippy-content,
.tippy-tooltip {
  background: #2b2b2b !important;
  color: #a9b7c6 !important;
  border: 1px solid #3c3f41 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55) !important;
  opacity: 1 !important;
}

.tippy-box[data-theme],
.tippy-box[data-theme] .tippy-content {
  background: #2b2b2b !important;
  color: #a9b7c6 !important;
}

/* Tippy arrow */
.tippy-arrow {
  color: #2b2b2b !important; /* many themes use currentColor */
}
.tippy-arrow:before {
  color: #2b2b2b !important;
  border-color: #2b2b2b !important;
}

/* Some tippy arrow styles use an SVG */
.tippy-svg-arrow {
  fill: #2b2b2b !important;
}

/* Generic tooltip roles */
[role="tooltip"] {
  background: #2b2b2b !important;
  color: #a9b7c6 !important;
  border: 1px solid #3c3f41 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55) !important;
  opacity: 1 !important;
}

/* Bootstrap-ish tooltips */
.tooltip,
.tooltip-inner {
  background: #2b2b2b !important;
  color: #a9b7c6 !important;
  border: 1px solid #3c3f41 !important;
  opacity: 1 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55) !important;
}
.tooltip .arrow:before,
.tooltip-arrow,
.tooltip::before {
  border-top-color: #2b2b2b !important;
  border-bottom-color: #2b2b2b !important;
}

/* Kill any “glass”/alpha styles */
.tippy-box,
.tippy-content,
.ui.popup,
[role="tooltip"],
.tooltip-inner {
  backdrop-filter: none !important;
}


/* ─── CONTRIBUTION GRAPH / HEATMAP ─────────────────────────────── */

/* Darcula base cell border/backdrop */
.contrib-calendar,
.contribution-graph,
#user-heatmap {
  background: transparent !important;
}

/* Base “no contributions” */
.contrib-calendar rect,
.contrib-calendar td,
#user-heatmap rect,
#user-heatmap td {
  outline: 1px solid rgba(60,63,65,0.65) !important;
  outline-offset: -1px !important;
}

/* If SVG rects use data-level / data-count */
.contrib-calendar rect[data-level="0"],
#user-heatmap rect[data-level="0"] { fill: #2b2b2b !important; }

.contrib-calendar rect[data-level="1"],
#user-heatmap rect[data-level="1"] { fill: #3a2f4b !important; }

.contrib-calendar rect[data-level="2"],
#user-heatmap rect[data-level="2"] { fill: #51406b !important; }

.contrib-calendar rect[data-level="3"],
#user-heatmap rect[data-level="3"] { fill: #6c55a0 !important; }

.contrib-calendar rect[data-level="4"],
#user-heatmap rect[data-level="4"] { fill: #a277ff !important; }

/* If it’s a table-based heatmap (td) */
.contrib-calendar td[data-level="0"],
#user-heatmap td[data-level="0"] { background: #2b2b2b !important; }

.contrib-calendar td[data-level="1"],
#user-heatmap td[data-level="1"] { background: #3a2f4b !important; }

.contrib-calendar td[data-level="2"],
#user-heatmap td[data-level="2"] { background: #51406b !important; }

.contrib-calendar td[data-level="3"],
#user-heatmap td[data-level="3"] { background: #6c55a0 !important; }

.contrib-calendar td[data-level="4"],
#user-heatmap td[data-level="4"] { background: #a277ff !important; }

/* Hover highlight (Rider-ish blue outline) */
.contrib-calendar rect:hover,
#user-heatmap rect:hover,
.contrib-calendar td:hover,
#user-heatmap td:hover {
  outline: 2px solid #6897bb !important;
  outline-offset: -2px !important;
}


/* ─── CONTRIBUTION GRAPH (clean override) ─────────────────────────
   Fix: map BOTH 0–4 and 0–5 level schemes, no outlines/no noise.
------------------------------------------------------------------ */

:root{
  --hm-0:#1f1f1f;  /* empty */
  --hm-1:#2d2440;
  --hm-2:#43305f;
  --hm-3:#5b3f86;
  --hm-4:#7a55b6;
  --hm-5:#a277ff;  /* max */
}

/* SVG-based heatmap */
.contrib-calendar rect,
#user-heatmap rect { stroke: none !important; }

.contrib-calendar rect[data-level="0"],
#user-heatmap rect[data-level="0"] { fill: var(--hm-0) !important; }

.contrib-calendar rect[data-level="1"],
#user-heatmap rect[data-level="1"] { fill: var(--hm-1) !important; }

.contrib-calendar rect[data-level="2"],
#user-heatmap rect[data-level="2"] { fill: var(--hm-2) !important; }

.contrib-calendar rect[data-level="3"],
#user-heatmap rect[data-level="3"] { fill: var(--hm-3) !important; }

.contrib-calendar rect[data-level="4"],
#user-heatmap rect[data-level="4"] { fill: var(--hm-4) !important; }

.contrib-calendar rect[data-level="5"],
#user-heatmap rect[data-level="5"] { fill: var(--hm-5) !important; }

/* Class-based scheme (some builds use level-0..level-4/5) */
.contrib-calendar rect.level-0, #user-heatmap rect.level-0 { fill: var(--hm-0) !important; }
.contrib-calendar rect.level-1, #user-heatmap rect.level-1 { fill: var(--hm-1) !important; }
.contrib-calendar rect.level-2, #user-heatmap rect.level-2 { fill: var(--hm-2) !important; }
.contrib-calendar rect.level-3, #user-heatmap rect.level-3 { fill: var(--hm-3) !important; }
.contrib-calendar rect.level-4, #user-heatmap rect.level-4 { fill: var(--hm-4) !important; }
.contrib-calendar rect.level-5, #user-heatmap rect.level-5 { fill: var(--hm-5) !important; }


/* ─── Heatmap (user contribution graph) ──────────────────────────
   Forgejo/Vue heatmap uses inline: fill: var(--color-...)
   If these vars are wrong, you get black squares no matter what.
------------------------------------------------------------------ */

/* empty / none */
:root{
  --color-secondary-alpha-60: #272b2e; /* empty squares */

  /* "more" scale (7 buckets total per your legend) */
  --color-primary-light-4:   #3a2c4d;
  --color-primary-light-2:   #4b3470;
  --color-primary:           #6d4cff;  /* main purple */
  --color-primary-dark-2:    #8a6bff;
  --color-primary-dark-4:    #a98eff;
}

/* make sure SVG rects don’t add strokes that turn it into noise */
#user-heatmap .vch__day__square,
#user-heatmap .vch__legend__wrapper rect{
  stroke: none !important;
}


/* === Activity graph cleanup + global link color === */

/* Remove borders/lines on contribution heatmap squares (SVG rects) */
#user-heatmap .vch__day__square,
#user-heatmap .vch__legend__wrapper rect,
.vch__wrapper .vch__day__square {
  stroke: none !important;
  outline: none !important;
  filter: none !important;
  shape-rendering: auto !important; /* avoids "crispEdges" artifacts in some themes */
}

/* Sitewide link color to match var(--color-primary-dark-2) */
a,
.ui.link,
a.ui.label,
a.ui.basic.label,
a.muted,
.ui.breadcrumb a,
.ui.menu a.item,
.ui.tabular.menu a.item {
  color: var(--color-primary-dark-2) !important;
}

a:hover,
.ui.link:hover,
.ui.menu a.item:hover,
.ui.breadcrumb a:hover {
  color: var(--color-primary) !important; /* keep hover brighter */
}


/* === Sitewide link color (darker) === */
a,
.ui.link,
a.ui.label,
a.ui.basic.label,
.ui.breadcrumb a,
.ui.menu a.item,
.ui.tabular.menu a.item {
  color: var(--color-primary-dark-4) !important;
}

a:hover,
.ui.link:hover,
.ui.menu a.item:hover,
.ui.breadcrumb a:hover {
  color: var(--color-primary-dark-2) !important; /* slightly brighter on hover */
}


/* === Links: readable Darcula-ish === */
/* Default links */
a,
.ui.link,
.ui.breadcrumb a,
.ui.menu a.item,
.ui.tabular.menu a.item {
  color: var(--color-primary-dark-2) !important;
}

/* Muted links / low-emphasis links need to stay readable */
a.muted,
.default-link.muted,
.muted a,
.ui.muted a,
.ui.small.muted a,
a.default-link.muted {
  color: var(--color-primary-light-2) !important;
}

/* Hover/focus */
a:hover,
.ui.link:hover,
.ui.breadcrumb a:hover,
.ui.menu a.item:hover,
.ui.tabular.menu a.item:hover,
a:focus-visible {
  color: var(--color-primary) !important;
  text-decoration: underline;
}


/* === Link readability hotfix (override previous link rules) === */

/* Base link color: readable on dark backgrounds */
a,
.ui.link,
.ui.breadcrumb a,
.ui.menu a.item,
.ui.tabular.menu a.item {
  color: var(--color-text-link) !important;
}

/* Muted links: still readable */
a.muted,
.default-link.muted,
.muted a,
.ui.muted a,
.ui.small.muted a {
  color: var(--color-text-muted) !important;
  text-decoration: none;
}

/* Hover: clear affordance */
a:hover,
.ui.link:hover,
.ui.breadcrumb a:hover,
.ui.menu a.item:hover,
.ui.tabular.menu a.item:hover {
  color: var(--color-text-link-hover) !important;
  text-decoration: underline;
}



/* Commit message / “description” links (should be readable purple, not dark) */
a.default-link.muted,
.default-link.muted:link,
.default-link.muted:visited {
  color: rgba(205, 170, 255, 0.92) !important; /* light lavender */
  text-decoration: none !important;
}

/* Slight lift on hover so it feels clickable */
a.default-link.muted:hover,
a.default-link.muted:focus-visible {
  color: rgba(225, 200, 255, 1.0) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
#navbar-logo img {
  display: none;
}

#navbar-logo {
  width: 30px;
  height: 30px;

  background-color: #b39ddb; /* your exact purple */
  -webkit-mask: url("/assets/img/logo.svg") no-repeat center / contain;
  mask: url("/assets/img/logo.svg") no-repeat center / contain;
}