:root { --is-dark-theme: true; }

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Righteous&family=Bebas+Neue&family=Space+Grotesk:wght@300..700&display=swap');

:root {
  /* Gitea core color variables — required for heatmap, labels, and UI components */
  --color-primary:          #00b4b4;
  --color-primary-light-1:  #00c8c8;
  --color-primary-light-2:  rgba(0, 180, 180, 0.55);
  --color-primary-light-3:  rgba(0, 180, 180, 0.35);
  --color-primary-light-4:  rgba(0, 180, 180, 0.2);
  --color-primary-light-5:  rgba(0, 180, 180, 0.1);
  --color-primary-light-6:  rgba(0, 180, 180, 0.06);
  --color-primary-dark-1:   #009999;
  --color-primary-dark-2:   #007a7a;
  --color-primary-dark-3:   #005f5f;
  --color-primary-dark-4:   #003f3f;
  --color-secondary:        rgba(240, 230, 211, 0.55);
  --color-secondary-alpha-60: rgba(240, 230, 211, 0.08);
  --color-secondary-alpha-30: rgba(240, 230, 211, 0.04);
  --color-text-dark:        #f0e6d3;
  --color-text:             #f0e6d3;
  --color-text-light-1:     rgba(240, 230, 211, 0.75);
  --color-text-light-2:     rgba(240, 230, 211, 0.55);
  --color-text-light-3:     rgba(240, 230, 211, 0.35);
  --color-body:             #1a1a2e;
  --color-box-header:       #16213e;
  --color-box-body:         rgba(22, 33, 62, 0.85);
  --color-input-background: rgba(26, 26, 46, 0.8);
  --color-input-border:     rgba(255, 255, 255, 0.22);
  --color-placeholder:      rgba(240, 230, 211, 0.35);
  --color-label-bg:         rgba(255, 255, 255, 0.05);
  --color-hover:            rgba(255, 255, 255, 0.05);
  --color-active:           rgba(0, 180, 180, 0.12);
  --color-menu:             #16213e;
  --color-card:             rgba(22, 33, 62, 0.85);
  --color-shadow:           rgba(0, 0, 0, 0.45);
  --color-border:           rgba(255, 255, 255, 0.14);

  --color-bg:        #1a1a2e;
  --color-nav:       #16213e;
  --color-card:      rgba(22, 33, 62, 0.85);
  --color-surface:   rgba(255, 255, 255, 0.05);
  --color-text:      #f0e6d3;
  --color-muted:     rgba(240, 230, 211, 0.55);
  --color-border:    rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  --color-cyan:      #00b4b4;
  --color-yellow:    #fbbf24;
  --color-orange:    #fb923c;
  --color-pink:      #ec4899;
  --color-purple:    #a855f7;
  --color-green:     #4ade80;
  --radius-panel:    12px;
  --radius-card:     10px;
  --radius-pill:     9999px;
  --shadow-1:        0 10px 30px rgba(0,0,0,0.35);
  --shadow-2:        0 18px 50px rgba(0,0,0,0.45);
  --rainbow: linear-gradient(135deg, #00b4b4 0%, #20b2aa 14%, #4ade80 28%, #fbbf24 42%, #fb923c 57%, #ef4444 71%, #ec4899 85%, #a855f7 100%);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: "Space Grotesk", "Outfit", sans-serif !important;
}

::selection {
  background: #1a1a2e;
  color: #fb923c;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--rainbow);
  border-radius: var(--radius-pill);
}

/* ─── Links ─── */
a { color: var(--color-cyan) !important; transition: color 0.15s; }
a:hover { color: var(--color-yellow) !important; }

/* ─── Navbar ─── */
.navbar,
#navbar,
.full.height > .left.menu,
header.navbar {
  background: rgba(22, 33, 62, 0.90) !important;
  backdrop-filter: blur(6px) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}

.navbar .item,
.navbar .item a,
#navbar .item,
#navbar .item a {
  color: var(--color-text) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

.navbar .active.item,
.navbar .item:hover,
#navbar .active.item,
#navbar .item:hover {
  color: var(--color-yellow) !important;
  background: rgba(251, 191, 36, 0.08) !important;
}

/* ─── Sidebar ─── */
.left.sidebar,
.ui.secondary.vertical.menu,
.repository .sidebar {
  background: var(--color-nav) !important;
  border-radius: var(--radius-panel) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-1) !important;
}

/* ─── Cards / Panels ─── */
.ui.card,
.ui.cards > .card,
.ui.segment,
.repository .file-list,
.dashboard .news .ui.segment,
.issue-list,
.milestone,
.release-list .release,
.diff-file-box,
.code-view,
.repository .ui.segment {
  background: var(--color-card) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-1) !important;
  color: var(--color-text) !important;
}

/* ─── Buttons ─── */
.ui.button,
.ui.buttons .button {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-pill) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  backdrop-filter: blur(4px) !important;
  transition: transform 0.15s, box-shadow 0.2s !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), var(--shadow-1) !important;
}

.ui.button:hover,
.ui.buttons .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 20px rgba(0,180,180,0.35), var(--shadow-1) !important;
  border-color: var(--color-cyan) !important;
  color: var(--color-cyan) !important;
}

.ui.primary.button,
.ui.green.button {
  background: var(--rainbow) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.ui.primary.button:hover,
.ui.green.button:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 25px rgba(0,180,180,0.5) !important;
}

.ui.red.button, .ui.negative.button {
  background: rgba(239,68,68,0.2) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* ─── Inputs / Forms ─── */
.ui.input input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select,
.ui.selection.dropdown {
  background: rgba(26, 26, 46, 0.8) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-card) !important;
  color: var(--color-text) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

.ui.input input:focus,
input:focus,
textarea:focus {
  border-color: var(--color-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 180, 180, 0.25) !important;
  outline: none !important;
}

.ui.selection.dropdown .menu {
  background: var(--color-nav) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-card) !important;
}

.ui.selection.dropdown .menu .item {
  color: var(--color-text) !important;
  border-top: 1px solid var(--color-border) !important;
}

.ui.selection.dropdown .menu .item:hover,
.ui.selection.dropdown .menu .item.selected {
  background: rgba(0, 180, 180, 0.12) !important;
  color: var(--color-cyan) !important;
}

/* ─── Labels / Tags ─── */
.ui.label,
.label {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--color-text) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

/* ─── Tables ─── */
.ui.table {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  color: var(--color-text) !important;
}

.ui.table thead th {
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}

.ui.table tr td {
  border-top: 1px solid var(--color-border) !important;
}

.ui.table tbody tr:hover td {
  background: rgba(255,255,255,0.03) !important;
}

/* ─── Code & Diff ─── */
code, .code, pre {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  color: var(--color-green) !important;
  font-size: 0.875em !important;
}

.diff-add { background: rgba(74, 222, 128, 0.08) !important; }
.diff-del { background: rgba(239, 68, 68, 0.08) !important; }

/* ─── Page header / repo title ─── */
.repository .header-wrapper,
.page-header,
.repository .ui.header {
  color: var(--color-text) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.ui.header {
  color: var(--color-text) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

/* ─── Repo list items ─── */
.item.repository,
.repository-list .item {
  border-bottom: 1px solid var(--color-border) !important;
  padding: 12px 0 !important;
}

/* ─── Activity feed ─── */
.news .event {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  margin-bottom: 8px !important;
  padding: 12px !important;
}

/* ─── Issue/PR status labels ─── */
.ui.green.label, .ui.teal.label { background: rgba(74,222,128,0.15) !important; border-color: var(--color-green) !important; color: var(--color-green) !important; }
.ui.red.label { background: rgba(239,68,68,0.15) !important; border-color: #ef4444 !important; color: #ef4444 !important; }
.ui.purple.label { background: rgba(168,85,247,0.15) !important; border-color: var(--color-purple) !important; color: var(--color-purple) !important; }
.ui.yellow.label, .ui.orange.label { background: rgba(251,191,36,0.15) !important; border-color: var(--color-yellow) !important; color: var(--color-yellow) !important; }

/* ─── Top rainbow bar ─── */
body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
  z-index: 9999;
}

/* ─── Footer ─── */
footer, #footer {
  background: var(--color-nav) !important;
  border-top: 3px solid transparent !important;
  border-image: var(--rainbow) 1 !important;
  color: var(--color-muted) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

/* ─── Misc ─── */
.divider, .ui.divider {
  border-color: var(--color-border) !important;
}

.ui.statistic .value,
.ui.statistics .statistic .value {
  color: var(--color-cyan) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

.ui.message {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  color: var(--color-text) !important;
}

.ui.positive.message { border-color: var(--color-green) !important; }
.ui.negative.message, .ui.error.message { border-color: #ef4444 !important; }
.ui.warning.message { border-color: var(--color-yellow) !important; }

/* ─── Pagination ─── */
.ui.pagination.menu {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
}

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

.ui.pagination.menu .active.item {
  background: var(--rainbow) !important;
  color: #fff !important;
}

/* ─── Checkboxes ─── */
.ui.checkbox label,
.ui.checkbox + label {
  color: var(--color-text) !important;
}

.ui.checkbox label::before {
  background: rgba(26, 26, 46, 0.9) !important;
  border: 2px solid var(--color-border-strong) !important;
  border-radius: 4px !important;
}

.ui.checkbox input:checked ~ label::before {
  background: var(--color-cyan) !important;
  border-color: var(--color-cyan) !important;
}

.ui.checkbox input:checked ~ label::after {
  color: #fff !important;
}

.ui.checkbox label:hover::before {
  border-color: var(--color-cyan) !important;
}

.ui.toggle.checkbox label::before {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
}

.ui.toggle.checkbox input:checked ~ label::before {
  background: var(--color-cyan) !important;
}