/*
 * =========================================================
 * skyeGit — Gitea 1.26.x
 * =========================================================
 */

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

	--skye-purple: #7c3aed;
	--skye-purple-hover: #8b5cf6;
	--skye-purple-light: #a78bfa;
	--skye-purple-dark: #5b21b6;

	--skye-bg: #0b0910;
	--skye-bg-soft: #100d17;
	--skye-surface: #15111d;
	--skye-surface-2: #1b1624;
	--skye-surface-hover: #241d30;

	--skye-border: rgba(167, 139, 250, .14);
	--skye-border-hover: rgba(167, 139, 250, .30);

	--skye-text: #f5f3ff;
	--skye-text-secondary: #b8b1c7;
	--skye-text-muted: #81798e;

	--color-primary: #7c3aed;
	--color-primary-hover: #8b5cf6;
	--color-primary-active: #6d28d9;

	--color-primary-bg: rgba(124, 58, 237, .12);
	--color-primary-bg-hover: rgba(124, 58, 237, .18);

	--color-body: #0b0910;
	--color-body-highlight: #100d17;

	--color-box-header: #15111d;
	--color-box-body: #15111d;

	--color-text: #f5f3ff;
	--color-text-light: #b8b1c7;
	--color-text-light-1: #91899e;
	--color-text-light-2: #706879;

	--color-border: rgba(167, 139, 250, .14);

	--color-secondary: #1b1624;
	--color-secondary-hover: #241d30;

	--color-button: #1b1624;
	--color-button-hover: #241d30;

	--fonts-proportional:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}


/* =========================================================
   BASE
   ========================================================= */

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

body {
	background:
		radial-gradient(
			ellipse 900px 450px at 50% -180px,
			rgba(124, 58, 237, .10),
			transparent 70%
		),
		var(--skye-bg) !important;

	color: var(--skye-text);
	font-family: var(--fonts-proportional);
	-webkit-font-smoothing: antialiased;
}


/* =========================================================
   TEXT
   ========================================================= */

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

p {
	color: var(--skye-text-secondary);
}

.muted,
.description,
.help,
.sub {
	color: var(--skye-text-muted) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
	color: var(--skye-purple-light);
	transition: color .15s ease;
}

a:hover {
	color: #c4b5fd;
}


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

.navbar {
	background: rgba(11, 9, 16, .94) !important;
	border-bottom: 1px solid var(--skye-border) !important;
	box-shadow: 0 4px 25px rgba(0, 0, 0, .18);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.navbar .item {
	color: var(--skye-text-secondary) !important;
}

.navbar .item:hover {
	background: rgba(124, 58, 237, .09) !important;
	color: var(--skye-text) !important;
}

.navbar .item.active {
	background: rgba(124, 58, 237, .14) !important;
	color: var(--skye-text) !important;
}

.navbar .brand {
	color: var(--skye-text) !important;
	font-weight: 700;
}

.navbar .brand img {
	filter: drop-shadow(0 5px 15px rgba(124, 58, 237, .32));
}


/* =========================================================
   SEARCH
   ========================================================= */

.searchbox input,
.navbar .searchbox input {
	background: rgba(255, 255, 255, .035) !important;
	border: 1px solid var(--skye-border) !important;
	color: var(--skye-text) !important;
	border-radius: 9px !important;
}

.searchbox input:focus {
	border-color: var(--skye-purple) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .13) !important;
}


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

.ui.button {
	background: var(--skye-surface-2);
	border: 1px solid var(--skye-border);
	color: var(--skye-text);

	border-radius: 8px;

	transition:
		background .15s ease,
		border-color .15s ease,
		color .15s ease,
		transform .15s ease,
		box-shadow .15s ease;
}

.ui.button:hover {
	background: var(--skye-surface-hover);
	border-color: var(--skye-border-hover);
	color: #fff;
}

.ui.primary.button {
	background: linear-gradient(
		135deg,
		#7133d8,
		#8b4cf5
	);

	border-color: transparent;
	color: white;

	box-shadow:
		0 6px 22px rgba(124, 58, 237, .24);
}

.ui.primary.button:hover {
	background: linear-gradient(
		135deg,
		#8243e8,
		#a06aff
	);

	box-shadow:
		0 8px 28px rgba(124, 58, 237, .36);

	transform: translateY(-1px);
}


/* =========================================================
   INPUTS
   ========================================================= */

.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form input[type="search"],
.ui.form textarea,
.ui.form select,
input:not([type]),
textarea,
select {
	background: #0e0b13 !important;
	border: 1px solid var(--skye-border) !important;
	color: var(--skye-text) !important;
	border-radius: 8px !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
select:focus {
	border-color: var(--skye-purple) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .14) !important;
	outline: none !important;
}

input::placeholder,
textarea::placeholder {
	color: var(--skye-text-muted) !important;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

input[type="checkbox"] {
	accent-color: var(--skye-purple);
}

input[type="checkbox"]:focus-visible {
	accent-color: var(--skye-purple-hover);
	outline-color: var(--skye-purple);
}


/* =========================================================
   RADIO BUTTON
   ========================================================= */

input[type="radio"] {
	accent-color: var(--skye-purple);
}

input[type="radio"]:focus-visible {
	accent-color: var(--skye-purple-hover);
	outline-color: var(--skye-purple);
}


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

.ui.selection.dropdown {
	background: #0e0b13 !important;
	border: 1px solid var(--skye-border) !important;
	color: var(--skye-text) !important;
	border-radius: 8px !important;
}

.ui.selection.dropdown:hover {
	border-color: var(--skye-border-hover) !important;
}

.ui.selection.dropdown.active,
.ui.selection.dropdown:focus {
	border-color: var(--skye-purple) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .13) !important;
}

.ui.dropdown .menu {
	background: var(--skye-surface-2) !important;
	border: 1px solid var(--skye-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .40) !important;
}

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

.ui.dropdown .menu > .item:hover {
	background: rgba(124, 58, 237, .12) !important;
}


/* =========================================================
   CARDS / SEGMENTS
   ========================================================= */

.ui.segment,
.ui.card,
.ui.segments {
	background: var(--skye-surface);
	border: 1px solid var(--skye-border);
	color: var(--skye-text);

	box-shadow:
		0 8px 28px rgba(0, 0, 0, .10);
}

.ui.segment {
	border-radius: 10px;
}

.ui.segments {
	border-radius: 10px;
	overflow: hidden;
}

.ui.segments > .segment {
	border-color: var(--skye-border);
}


/* =========================================================
   HEADERS
   ========================================================= */

.ui.top.attached.header,
.ui.segment > .header {
	background: var(--skye-surface-2);
	border-color: var(--skye-border);
	color: var(--skye-text) !important;
}


/* =========================================================
   SETTINGS
   ========================================================= */

.settings .ui.segment,
.settings .ui.segments {
	background: var(--skye-surface);
}

.settings .ui.top.attached.header {
	background: var(--skye-surface-2);
}

.settings .field {
	margin-bottom: 20px;
}

.settings .ui.form .field > label {
	color: var(--skye-text);
	font-weight: 600;
}


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

.ui.tabular.menu {
	border-bottom: 1px solid var(--skye-border);
}

.ui.tabular.menu .item {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--skye-text-secondary);
}

.ui.tabular.menu .item:hover {
	color: var(--skye-text);
}

.ui.tabular.menu .active.item {
	background: var(--skye-surface) !important;
	color: var(--skye-purple-light) !important;
	border-color: var(--skye-border) !important;

	box-shadow:
		inset 0 -2px 0 var(--skye-purple);
}


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

.ui.table {
	background: var(--skye-surface) !important;
	color: var(--skye-text) !important;
	border-color: var(--skye-border) !important;
}

.ui.table thead th {
	background: var(--skye-surface-2) !important;
	color: var(--skye-text) !important;
	border-color: var(--skye-border) !important;
}

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

.ui.table tbody tr:hover {
	background: rgba(124, 58, 237, .055) !important;
}


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

.repository .header-wrapper {
	background: var(--skye-bg-soft);
	border-bottom: 1px solid var(--skye-border);
}

.repository .repo-title {
	color: var(--skye-text) !important;
}

.repository .repo-title a {
	color: var(--skye-purple-light) !important;
}

.repository.file.list {
	background: var(--skye-surface);
	border: 1px solid var(--skye-border);
	border-radius: 10px;
	overflow: hidden;
}

.repository.file.list .item {
	border-color: var(--skye-border);
}

.repository.file.list .item:hover {
	background: rgba(124, 58, 237, .055);
}

.repository.file.list .name {
	color: var(--skye-purple-light);
}


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

.issue.list {
	background: var(--skye-surface);
	border-color: var(--skye-border);
}

.issue.list .item {
	border-color: var(--skye-border);
}

.issue.list .item:hover {
	background: rgba(124, 58, 237, .055);
}

.issue.list .title {
	color: var(--skye-text);
}

.issue.list .title:hover {
	color: var(--skye-purple-light);
}


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

.ui.label {
	background: #282034;
	border: 1px solid var(--skye-border);
	color: var(--skye-text);
	border-radius: 6px;
}

.ui.label:hover {
	background: #342741;
	border-color: var(--skye-border-hover);
}


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

.repository .diff-file-box {
	background: var(--skye-surface);
	border-color: var(--skye-border);
}

.repository .diff-file-box .header {
	background: var(--skye-surface-2);
	border-color: var(--skye-border);
}

.code-view,
.highlight {
	background: #08070c !important;
}


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

.markdown {
	color: var(--skye-text);
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
	color: var(--skye-text) !important;
}

.markdown blockquote {
	border-left-color: var(--skye-purple);
	color: var(--skye-text-secondary);
}

.markdown code {
	background: rgba(124, 58, 237, .12);
	color: var(--skye-purple-light);
	border-radius: 4px;
}

.markdown pre {
	background: #08070c;
	border: 1px solid var(--skye-border);
}


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

.ui.modal {
	background: var(--skye-surface) !important;
	color: var(--skye-text) !important;
	border: 1px solid var(--skye-border) !important;
	border-radius: 12px !important;

	box-shadow:
		0 25px 80px rgba(0, 0, 0, .55) !important;
}

.ui.modal > .header {
	background: var(--skye-surface-2) !important;
	color: var(--skye-text) !important;
	border-color: var(--skye-border) !important;
}

.ui.modal > .content {
	background: var(--skye-surface) !important;
}

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


/* =========================================================
   MESSAGES
   ========================================================= */

.ui.info.message {
	background: rgba(124, 58, 237, .10);
	border: 1px solid rgba(124, 58, 237, .22);
	color: var(--skye-text);
}

.ui.success.message {
	background: rgba(139, 213, 165, .10);
	border: 1px solid rgba(139, 213, 165, .20);
}

.ui.warning.message {
	background: rgba(245, 199, 107, .10);
	border: 1px solid rgba(245, 199, 107, .20);
}

.ui.error.message,
.ui.negative.message {
	background: rgba(242, 123, 138, .10);
	border: 1px solid rgba(242, 123, 138, .20);
}


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

footer {
	background: #08070c !important;
	border-top: 1px solid var(--skye-border) !important;
	color: var(--skye-text-muted) !important;
}

footer a {
	color: var(--skye-purple-light) !important;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
	background: rgba(124, 58, 237, .35);
	color: white;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

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

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

::-webkit-scrollbar-thumb {
	background: #30263c;
	border-radius: 10px;
	border: 2px solid #08070c;
}

::-webkit-scrollbar-thumb:hover {
	background: #514064;
}