/*
 * Kintaro Purple Neon for Forgejo
 * Version 2
 *
 * Dark first, neon second.
 * Drop-in replacement for:
 *   $FORGEJO_CUSTOM/public/assets/css/kintaro-purple.css
 */

:root {
  --kn-bg: #07060a;
  --kn-bg-soft: #0b0910;
  --kn-surface: #0f0c14;
  --kn-surface-2: #14101b;
  --kn-surface-3: #1b1424;

  --kn-neon: #b84dff;
  --kn-neon-bright: #d278ff;
  --kn-neon-soft: #8a32c7;
  --kn-neon-pale: #ead4ff;

  --kn-text: #f2eef6;
  --kn-text-soft: #c7bccf;
  --kn-text-muted: #91859b;

  --kn-border: rgba(184, 77, 255, 0.15);
  --kn-border-hot: rgba(184, 77, 255, 0.43);

  --kn-glow-xs: 0 0 8px rgba(184, 77, 255, 0.18);
  --kn-glow-sm: 0 0 14px rgba(184, 77, 255, 0.22);
  --kn-glow-md: 0 0 24px rgba(184, 77, 255, 0.28);
}

/* ============================================================
   Forgejo variables
   ============================================================ */

html,
html[data-theme],
body {
  --color-primary: var(--kn-neon) !important;
  --color-primary-contrast: #fff !important;

  --color-primary-dark-1: #9d39df !important;
  --color-primary-dark-2: #822dbd !important;
  --color-primary-dark-3: #682498 !important;
  --color-primary-dark-4: #501c75 !important;

  --color-primary-light-1: #c567ff !important;
  --color-primary-light-2: #d68cff !important;
  --color-primary-light-3: #e5b5ff !important;
  --color-primary-light-4: #f1d9ff !important;

  --color-body: var(--kn-bg) !important;
  --color-nav-bg: rgba(8, 6, 11, 0.94) !important;
  --color-footer: #09070c !important;

  --color-box-header: var(--kn-surface-2) !important;
  --color-box-body: var(--kn-surface) !important;
  --color-box-body-highlight: var(--kn-surface-2) !important;

  --color-menu: var(--kn-surface) !important;
  --color-card: var(--kn-surface) !important;

  --color-secondary: #16111d !important;
  --color-secondary-dark-1: #1d1626 !important;
  --color-secondary-dark-2: #231a2e !important;
  --color-secondary-dark-3: #2a2037 !important;
  --color-secondary-dark-4: #332540 !important;
  --color-secondary-light-1: #131018 !important;
  --color-secondary-light-2: #18121f !important;
  --color-secondary-light-3: #1d1626 !important;
  --color-secondary-light-4: #251b30 !important;

  --color-text: var(--kn-text) !important;
  --color-text-light: var(--kn-text-soft) !important;
  --color-text-light-1: #b7aabd !important;
  --color-text-light-2: #a296ab !important;
  --color-text-light-3: var(--kn-text-muted) !important;

  --color-border: var(--kn-border) !important;
  --color-light-border: rgba(255,255,255,0.055) !important;

  --color-input-background: #0a080d !important;
  --color-input-border: rgba(184, 77, 255, 0.18) !important;

  --color-hover: rgba(184, 77, 255, 0.075) !important;
  --color-active: rgba(184, 77, 255, 0.12) !important;
}

/* ============================================================
   Fixed page background
   ============================================================ */

html {
  background: var(--kn-bg) !important;
}

body {
  position: relative;
  min-height: 100vh;
  background: transparent !important;
  color: var(--kn-text);
}

/*
 * Fixed lighting layer.
 * It stays in the viewport while the actual page scrolls.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 82% 4%,
      rgba(184, 77, 255, 0.095) 0,
      rgba(184, 77, 255, 0.035) 18rem,
      transparent 42rem
    ),
    radial-gradient(
      circle at 12% 72%,
      rgba(128, 38, 188, 0.055) 0,
      transparent 36rem
    ),
    linear-gradient(180deg, #08060b 0%, #060508 100%);
  background-attachment: fixed;
}

.full.height,
.page-content,
.dashboard,
.repository,
.user {
  background: transparent !important;
}

/* ============================================================
   Slightly wider desktop layout
   ============================================================ */

@media (min-width: 1400px) {
  .ui.container {
    width: min(92vw, 1500px) !important;
    max-width: 1500px !important;
  }
}

/* ============================================================
   Top navigation
   ============================================================ */

.ui.menu.bar,
header .ui.menu {
  background: rgba(9, 7, 12, 0.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184, 77, 255, 0.13) !important;
  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(184, 77, 255, 0.035) inset !important;
}

.ui.menu .item {
  color: var(--kn-text-soft) !important;
}

.ui.menu .item:hover {
  color: var(--kn-neon-pale) !important;
  background: rgba(184, 77, 255, 0.065) !important;
}

.ui.menu .active.item {
  color: var(--kn-neon-bright) !important;
  background: rgba(184, 77, 255, 0.09) !important;
  box-shadow: inset 0 -2px 0 var(--kn-neon);
}

/* ============================================================
   Links
   ============================================================ */

a,
.ui.breadcrumb a,
.repository .repo-title a {
  color: #c469ff;
}

a:hover,
.ui.breadcrumb a:hover,
.repository .repo-title a:hover {
  color: var(--kn-neon-pale);
  text-shadow: 0 0 8px rgba(184, 77, 255, 0.34);
}

/* Don't glow every boring utility link into another dimension. */
.repository.file.list a,
.code-view a,
.chroma a {
  text-shadow: none;
}

/* ============================================================
   Primary buttons: actual neon
   ============================================================ */

.ui.primary.button,
.ui.primary.buttons .button {
  background: #9f36e8 !important;
  color: #fff !important;
  border: 1px solid rgba(220, 150, 255, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.025) inset,
    var(--kn-glow-sm) !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: #b54df5 !important;
  border-color: rgba(232, 184, 255, 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    var(--kn-glow-md) !important;
}

.ui.button:not(.primary):not(.red):not(.green):not(.blue):not(.orange) {
  background: #121017 !important;
  color: var(--kn-text-soft) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.ui.button:not(.primary):not(.red):not(.green):not(.blue):not(.orange):hover {
  color: var(--kn-neon-pale) !important;
  background: #17111e !important;
  border-color: var(--kn-border-hot) !important;
  box-shadow: var(--kn-glow-xs);
}

/* ============================================================
   Panels / cards
   ============================================================ */

.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.ui.attached.segment,
.repository .ui.segment {
  background: rgba(15, 12, 20, 0.88) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    0 0 0 1px rgba(184, 77, 255, 0.018) inset !important;
}

.ui.card:hover,
.ui.cards > .card:hover {
  border-color: rgba(184, 77, 255, 0.22) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.28),
    0 0 18px rgba(184, 77, 255, 0.07) !important;
}

/* ============================================================
   Activity / repository lists
   ============================================================ */

.repository.list .item,
.user.list .item,
.organization.list .item,
.feeds .news {
  border-color: rgba(255,255,255,0.055) !important;
}

.repository.list .item:hover,
.feeds .news:hover {
  background: rgba(184, 77, 255, 0.028) !important;
}

/* Small timeline emphasis without turning everything purple. */
.feeds .news .ui.avatar,
.repository .avatar {
  filter: drop-shadow(0 0 5px rgba(184, 77, 255, 0.18));
}

/* ============================================================
   Tabs
   ============================================================ */

.ui.tabular.menu,
.ui.secondary.pointing.menu {
  border-color: rgba(255,255,255,0.06) !important;
}

.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
  color: var(--kn-neon-bright) !important;
  border-color: var(--kn-neon) !important;
  background: rgba(184, 77, 255, 0.045) !important;
  text-shadow: 0 0 8px rgba(184, 77, 255, 0.18);
}

/* ============================================================
   Labels / badges
   ============================================================ */

.ui.basic.label {
  background: rgba(255,255,255,0.025) !important;
  color: var(--kn-text-soft) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.ui.label:not(.red):not(.green):not(.blue):not(.orange):not(.yellow) {
  background: #15101b !important;
  border-color: rgba(184, 77, 255, 0.11) !important;
}

/* ============================================================
   Forms
   ============================================================ */

input,
textarea,
select,
.ui.input > input,
.ui.form textarea,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="url"],
.ui.selection.dropdown {
  background: #0a080d !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--kn-text) !important;
}

input:focus,
textarea:focus,
select:focus,
.ui.input > input:focus,
.ui.form textarea:focus,
.ui.selection.active.dropdown {
  border-color: var(--kn-neon) !important;
  box-shadow:
    0 0 0 1px rgba(184, 77, 255, 0.18),
    0 0 12px rgba(184, 77, 255, 0.08) !important;
}

/* ============================================================
   Code / files
   ============================================================ */

.repository.file.list,
.code-view,
.file-view,
.diff-file-box,
.chroma {
  border-color: rgba(255,255,255,0.065) !important;
}

.repository.file.list .header,
.file-header,
.diff-file-header {
  background: #0e0b12 !important;
  border-color: rgba(184, 77, 255, 0.12) !important;
}

.code-view,
.chroma,
.file-view .lines-code {
  background-color: #09070c !important;
}

/* Inline code only */
:not(pre) > code {
  background: #15101b !important;
  border: 1px solid rgba(184, 77, 255, 0.11);
  color: #d9b4f6 !important;
}

/* ============================================================
   Dropdowns / popups / modals
   ============================================================ */

.ui.dropdown .menu,
.ui.popup,
.ui.modal,
.tippy-box {
  background: #100c15 !important;
  border-color: rgba(184, 77, 255, 0.17) !important;
  color: var(--kn-text) !important;
  box-shadow:
    0 14px 45px rgba(0,0,0,0.48),
    0 0 20px rgba(184, 77, 255, 0.06) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .selected.item {
  background: rgba(184, 77, 255, 0.09) !important;
  color: var(--kn-neon-pale) !important;
}

/* ============================================================
   Pagination
   ============================================================ */

.ui.pagination.menu {
  background: #0c0910 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.ui.pagination.menu .item {
  background: transparent !important;
}

.ui.pagination.menu .active.item {
  color: var(--kn-neon-bright) !important;
  background: rgba(184, 77, 255, 0.12) !important;
  box-shadow:
    inset 0 0 0 1px rgba(184, 77, 255, 0.18),
    0 0 10px rgba(184, 77, 255, 0.08);
}

/* ============================================================
   Footer
   ============================================================ */

footer {
  background: rgba(8, 6, 11, 0.92) !important;
  border-top: 1px solid rgba(184, 77, 255, 0.08) !important;
}

/* ============================================================
   Selection / focus / scrollbar
   ============================================================ */

::selection {
  background: rgba(184, 77, 255, 0.38);
  color: #fff;
}

:focus-visible {
  outline: 2px solid rgba(184, 77, 255, 0.75) !important;
  outline-offset: 2px;
}

* {
  scrollbar-color: #4e2a62 #09070c;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #09070c;
}

::-webkit-scrollbar-thumb {
  background: #3e264b;
  border: 2px solid #09070c;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #63327e;
  box-shadow: 0 0 10px rgba(184, 77, 255, 0.22);
}

/* ============================================================
   Motion
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .ui.primary.button,
  .ui.card,
  .ui.menu .item,
  .ui.pagination.menu .item,
  a {
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      box-shadow 140ms ease,
      text-shadow 140ms ease,
      transform 140ms ease;
  }

  .ui.primary.button:hover {
    transform: translateY(-1px);
  }
}

img[src$="/assets/img/logo.svg"],
img[src$="/assets/img/avatar_default.png"] {
  filter:
    hue-rotate(270deg)
    saturate(1.45)
    brightness(1.18)
    contrast(1.05)
    drop-shadow(0 0 2px rgba(190, 80, 255, 0.18));
}

img.ui.avatar[src$="/assets/img/avatar_default.png"] {
  filter:
    hue-rotate(270deg)
    saturate(1.45)
    brightness(1.18)
    contrast(1.05)
    drop-shadow(0 0 2px rgba(190, 80, 255, 0.18)) !important;
}