/*
 * Ayu Dark for Forgejo 16.0.x
 * https://github.com/ayu-theme/ayu-colors
 *
 * Designed for Forgejo 16.0.5
 */

:root {
	/* Ayu Dark */
	--ayu-bg: #0b0e14;
	--ayu-bg-elevated: #0f131a;
	--ayu-bg-surface: #131721;
	--ayu-bg-hover: #1a1f29;
	--ayu-bg-active: #202631;

	--ayu-border: #252b35;
	--ayu-border-strong: #303744;

	--ayu-fg: #e6e1cf;
	--ayu-fg-muted: #8a919e;
	--ayu-fg-dim: #626a78;

	--ayu-orange: #ffb454;
	--ayu-blue: #59c2ff;
	--ayu-green: #aad94c;
	--ayu-red: #f07178;
	--ayu-purple: #d2a6ff;
	--ayu-cyan: #95e6cb;

	--ayu-selection: #25364a;

	/* Forgejo variables */
	--color-body: var(--ayu-bg);
	--color-box-header: var(--ayu-bg-surface);
	--color-box-body: var(--ayu-bg-elevated);
	--color-box-body-highlight: var(--ayu-bg-surface);

	--color-text: var(--ayu-fg);
	--color-text-light: var(--ayu-fg-muted);
	--color-text-light-1: var(--ayu-fg-dim);
	--color-text-dark: var(--ayu-fg);

	--color-primary: var(--ayu-orange);
	--color-primary-hover: #ffc76b;

	--color-secondary: var(--ayu-bg-surface);
	--color-secondary-hover: var(--ayu-bg-hover);

	--color-border: var(--ayu-border);
	--color-secondary-alpha-60: rgba(19, 23, 33, .95);

	--color-green: var(--ayu-green);
	--color-red: var(--ayu-red);
	--color-orange: var(--ayu-orange);
	--color-blue: var(--ayu-blue);
}

/* ============================================================
   GLOBAL
   ============================================================ */

html,
body {
	background: var(--ayu-bg) !important;
	color: var(--ayu-fg) !important;
}

body {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif !important;
}

::selection {
	background: var(--ayu-selection) !important;
	color: var(--ayu-fg) !important;
}

a {
	color: var(--ayu-blue);
}

a:hover {
	color: var(--ayu-orange);
}

hr {
	border-color: var(--ayu-border) !important;
}

/* Remove excessive rounded modern UI */
.ui.segment,
.ui.card,
.ui.menu,
.ui.button,
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.dropdown,
.ui.selection.dropdown,
.ui.message,
.ui.label,
.ui.table,
.ui.modal,
.ui.popup {
	border-radius: 4px !important;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.page-header,
#navbar,
.ui.top.attached.menu,
.ui.menu {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
	box-shadow: none !important;
}

.page-header {
	border-bottom: 1px solid var(--ayu-border) !important;
}

.ui.menu .item {
	color: var(--ayu-fg-muted) !important;
}

.ui.menu .item:hover {
	background: var(--ayu-bg-hover) !important;
	color: var(--ayu-fg) !important;
}

.ui.menu .active.item {
	background: var(--ayu-bg-active) !important;
	color: var(--ayu-orange) !important;
}

/* Search */
.ui.menu .item input,
.ui.menu .item .searchbox input,
.searchbox input {
	background: var(--ayu-bg) !important;
	color: var(--ayu-fg) !important;
	border: 1px solid var(--ayu-border) !important;
}

.searchbox input:focus {
	border-color: var(--ayu-orange) !important;
	box-shadow: 0 0 0 1px var(--ayu-orange) !important;
}

/* ============================================================
   MAIN CONTAINERS
   ============================================================ */

.ui.container,
.repository .ui.container,
.page-content {
	color: var(--ayu-fg);
}

.ui.segment,
.ui.segments,
.ui.card,
.repository .segment {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
	box-shadow: none !important;
}

.ui.segment.secondary,
.ui.secondary.segment {
	background: var(--ayu-bg-surface) !important;
}

/* Headers */
.ui.segment > .header,
.ui.card > .content > .header {
	color: var(--ayu-fg) !important;
}

.ui.header,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ayu-fg) !important;
}

/* ============================================================
   REPOSITORY HEADER
   ============================================================ */

.repository .repo-header {
	background: var(--ayu-bg) !important;
	border-bottom: 1px solid var(--ayu-border) !important;
}

.repository .repo-header .ui.menu {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

.repository .repo-header .ui.menu .item {
	color: var(--ayu-fg-muted) !important;
}

.repository .repo-header .ui.menu .active.item {
	color: var(--ayu-orange) !important;
	border-color: var(--ayu-orange) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.ui.button {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-fg) !important;
	border: 1px solid var(--ayu-border) !important;
	box-shadow: none !important;
}

.ui.button:hover {
	background: var(--ayu-bg-hover) !important;
	border-color: var(--ayu-border-strong) !important;
	color: var(--ayu-fg) !important;
}

.ui.button:active,
.ui.button.active {
	background: var(--ayu-bg-active) !important;
}

.ui.primary.button {
	background: var(--ayu-orange) !important;
	border-color: var(--ayu-orange) !important;
	color: #0b0e14 !important;
	font-weight: 600;
}

.ui.primary.button:hover {
	background: #ffc76b !important;
	border-color: #ffc76b !important;
	color: #0b0e14 !important;
}

.ui.green.button {
	background: var(--ayu-green) !important;
	border-color: var(--ayu-green) !important;
	color: #0b0e14 !important;
}

.ui.red.button {
	background: var(--ayu-red) !important;
	border-color: var(--ayu-red) !important;
	color: #0b0e14 !important;
}

/* ============================================================
   FORMS
   ============================================================ */

input,
textarea,
select,
.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown {
	background: var(--ayu-bg) !important;
	color: var(--ayu-fg) !important;
	border: 1px solid var(--ayu-border) !important;
	box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
	color: var(--ayu-fg-dim) !important;
}

input:focus,
textarea:focus,
select:focus,
.ui.input > input:focus {
	border-color: var(--ayu-orange) !important;
	box-shadow: 0 0 0 1px var(--ayu-orange) !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */

.ui.dropdown .menu,
.ui.dropdown .menu .item {
	background: var(--ayu-bg-elevated) !important;
	color: var(--ayu-fg) !important;
	border-color: var(--ayu-border) !important;
}

.ui.dropdown .menu .item:hover {
	background: var(--ayu-bg-hover) !important;
	color: var(--ayu-fg) !important;
}

.ui.dropdown .menu .item.active {
	background: var(--ayu-bg-active) !important;
	color: var(--ayu-orange) !important;
}

/* ============================================================
   TABLES
   ============================================================ */

.ui.table {
	background: var(--ayu-bg-elevated) !important;
	color: var(--ayu-fg) !important;
	border-color: var(--ayu-border) !important;
}

.ui.table thead th {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-fg-muted) !important;
	border-color: var(--ayu-border) !important;
}

.ui.table td,
.ui.table th {
	border-color: var(--ayu-border) !important;
}

.ui.table tr:hover {
	background: var(--ayu-bg-hover) !important;
}

.repository .repo-file-list {
	border-color: var(--ayu-border) !important;
}

.repository .repo-file-list .item {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

.repository .repo-file-list .item:hover {
	background: var(--ayu-bg-hover) !important;
}

/* ============================================================
   LABELS
   ============================================================ */

.ui.label {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-fg-muted) !important;
	border: 1px solid var(--ayu-border) !important;
}

.ui.label:hover {
	background: var(--ayu-bg-hover) !important;
	color: var(--ayu-fg) !important;
}

.ui.green.label {
	background: #1d2917 !important;
	color: var(--ayu-green) !important;
	border-color: #344b25 !important;
}

.ui.red.label {
	background: #321b1f !important;
	color: var(--ayu-red) !important;
	border-color: #533035 !important;
}

.ui.blue.label {
	background: #162b3a !important;
	color: var(--ayu-blue) !important;
	border-color: #29485b !important;
}

.ui.orange.label {
	background: #332817 !important;
	color: var(--ayu-orange) !important;
	border-color: #554326 !important;
}

/* ============================================================
   CODE
   ============================================================ */

code,
kbd,
pre {
	font-family:
		"JetBrains Mono",
		"Fira Code",
		"SFMono-Regular",
		Consolas,
		monospace !important;
}

code {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-orange) !important;
	border: 1px solid var(--ayu-border) !important;
}

pre {
	background: #0b0e14 !important;
	color: var(--ayu-fg) !important;
	border: 1px solid var(--ayu-border) !important;
	border-radius: 4px !important;
}

.highlight,
.file-view,
.code-view {
	background: #0b0e14 !important;
	border-color: var(--ayu-border) !important;
}

/* Code line numbers */
.lines-num {
	background: #0f131a !important;
	color: #4f5663 !important;
	border-color: var(--ayu-border) !important;
}

.lines-code {
	background: #0b0e14 !important;
}

/* ============================================================
   MARKDOWN
   ============================================================ */

.markdown-body {
	color: var(--ayu-fg) !important;
}

.markdown-body blockquote {
	color: var(--ayu-fg-muted) !important;
	border-left-color: var(--ayu-orange) !important;
}

.markdown-body hr {
	background: var(--ayu-border) !important;
}

.markdown-body table th {
	background: var(--ayu-bg-surface) !important;
}

.markdown-body table td,
.markdown-body table th {
	border-color: var(--ayu-border) !important;
}

.markdown-body table tr {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

.markdown-body table tr:nth-child(2n) {
	background: var(--ayu-bg-surface) !important;
}

/* ============================================================
   ISSUES / PRS
   ============================================================ */

.issue,
.issue.list,
.comment-list .comment {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

.comment {
	box-shadow: none !important;
}

.comment-header {
	background: var(--ayu-bg-surface) !important;
	border-color: var(--ayu-border) !important;
}

.comment-content {
	color: var(--ayu-fg) !important;
}

.issue .issue-content,
.issue .comment-list {
	background: var(--ayu-bg) !important;
}

/* ============================================================
   TABS
   ============================================================ */

.ui.tabular.menu {
	border-color: var(--ayu-border) !important;
}

.ui.tabular.menu .item {
	background: transparent !important;
	color: var(--ayu-fg-muted) !important;
	border-color: transparent !important;
}

.ui.tabular.menu .item:hover {
	color: var(--ayu-fg) !important;
	background: var(--ayu-bg-hover) !important;
}

.ui.tabular.menu .active.item {
	background: var(--ayu-bg-elevated) !important;
	color: var(--ayu-orange) !important;
	border-color: var(--ayu-border) !important;
	border-bottom-color: var(--ayu-bg-elevated) !important;
}

/* ============================================================
   SIDEBARS
   ============================================================ */

.repository .ui.right.sidebar,
.repository .ui.left.sidebar,
.ui.sidebar {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

.ui.vertical.menu {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

.ui.vertical.menu .item {
	color: var(--ayu-fg-muted) !important;
}

.ui.vertical.menu .item:hover {
	background: var(--ayu-bg-hover) !important;
	color: var(--ayu-fg) !important;
}

/* ============================================================
   MODALS / POPUPS
   ============================================================ */

.ui.modal {
	background: var(--ayu-bg-elevated) !important;
	color: var(--ayu-fg) !important;
	border: 1px solid var(--ayu-border) !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .55) !important;
}

.ui.modal > .header {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-fg) !important;
	border-color: var(--ayu-border) !important;
}

.ui.modal > .content {
	background: var(--ayu-bg-elevated) !important;
}

.ui.modal > .actions {
	background: var(--ayu-bg-surface) !important;
	border-color: var(--ayu-border) !important;
}

.ui.popup {
	background: var(--ayu-bg-elevated) !important;
	color: var(--ayu-fg) !important;
	border-color: var(--ayu-border) !important;
}

/* ============================================================
   NOTICES
   ============================================================ */

.ui.message {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-fg) !important;
	border: 1px solid var(--ayu-border) !important;
	box-shadow: none !important;
}

.ui.positive.message {
	background: #172118 !important;
	border-color: #30442b !important;
	color: var(--ayu-green) !important;
}

.ui.warning.message {
	background: #2b2316 !important;
	border-color: #4b3d25 !important;
	color: var(--ayu-orange) !important;
}

.ui.negative.message,
.ui.error.message {
	background: #29191c !important;
	border-color: #4c292e !important;
	color: var(--ayu-red) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination.menu {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

.pagination.menu .item {
	background: var(--ayu-bg-elevated) !important;
	color: var(--ayu-fg-muted) !important;
	border-color: var(--ayu-border) !important;
}

.pagination.menu .item:hover {
	background: var(--ayu-bg-hover) !important;
	color: var(--ayu-fg) !important;
}

.pagination.menu .active.item {
	background: var(--ayu-bg-active) !important;
	color: var(--ayu-orange) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer {
	background: var(--ayu-bg) !important;
	color: var(--ayu-fg-dim) !important;
	border-color: var(--ayu-border) !important;
}

footer a {
	color: var(--ayu-fg-muted) !important;
}

footer a:hover {
	color: var(--ayu-orange) !important;
}

/* ============================================================
   AVATARS / ICONS
   ============================================================ */

.avatar {
	border-color: var(--ayu-border) !important;
}

svg {
	/* Keep Forgejo icons from becoming weirdly bright */
	color: inherit;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

* {
	scrollbar-color: #303744 #0b0e14;
	scrollbar-width: thin;
}

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

::-webkit-scrollbar-track {
	background: #0b0e14;
}

::-webkit-scrollbar-thumb {
	background: #303744;
	border: 2px solid #0b0e14;
}

::-webkit-scrollbar-thumb:hover {
	background: #414a59;
}

/* ============================================================
   MISC FORGEJO ELEMENTS
   ============================================================ */

.feather {
	stroke-width: 1.8;
}

.repo-buttons .ui.button {
	border-color: var(--ayu-border) !important;
}

.repository .ui.basic.button {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-fg-muted) !important;
}

.repository .ui.basic.button:hover {
	background: var(--ayu-bg-hover) !important;
	color: var(--ayu-fg) !important;
}

.repository .ui.basic.button .icon {
	color: inherit !important;
}

.following.button,
.follow.button {
	background: var(--ayu-bg-surface) !important;
	color: var(--ayu-fg) !important;
	border-color: var(--ayu-border) !important;
}

/* Stars / watch / fork */
.repository .repo-buttons .star.button:hover,
.repository .repo-buttons .watch.button:hover {
	color: var(--ayu-orange) !important;
	border-color: var(--ayu-orange) !important;
}

/* Activity */
.timeline-item {
	border-color: var(--ayu-border) !important;
}

.timeline-item .timeline-item-icon {
	background: var(--ayu-bg-surface) !important;
	border-color: var(--ayu-border) !important;
}

/* Wiki / release boxes */
.release-list,
.release,
.wiki-content {
	background: var(--ayu-bg-elevated) !important;
	border-color: var(--ayu-border) !important;
}

/* Disable the "modern translucent" feel */
.ui,
.segment,
.card,
.menu,
.modal,
.popup,
.dropdown,
input,
textarea,
select,
button {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}