/* ==UserStyle==
@name         Moj TVZ Dark
@author       Karl_255 (Karlo Bistrički)
@namespace    github.com/Karl255
@version      3.1.0
@description  Tamna tema za moj.tvz.hr i Grader sustav s mogućnostima za prilagođavanje
@homepageURL  https://github.com/Karl255/UserCSS-Styles
@supportURL   https://github.com/Karl255/UserCSS-Styles/issues
@updateURL    https://raw.githubusercontent.com/Karl255/UserCSS-Styles/master/Moj%20TVZ%20Dark/Moj%20TVZ%20Dark.user.css
@license      MIT
@preprocessor less

@var color  bg-color-base     "Temeljna pozadinska boja"                                          hsl(210, 5%, 5%)
@var number bg-l-increment    "Korak posvijetljenja pozadinske boje (za \"slojeve\" sučelja) (%)" 5%
@var number btn-hover-ligthen "Korak posvijetljenja za gumbe (%)"                                 -5%

@var color  primary-color     "\"Primarna\" boja"    #337ab7
@var color  info-color        "Boja \"informacija\"" #0b3c85
@var color  success-color     "Boja \"uspjeh\""      #117A11
@var color  warning-color     "Boja \"upozorenje\""  #8F6F0E
@var color  danger-color      "Boja \"opasnost\""    #900F0F

@var color  text-color        "Boja glasvnog teksta"                     whitesmoke
@var color  hc-text-color     "Boja teksta kod obojanih pozadina"        white
@var color  subtext-color     "Boja podteksta (pomalo izblijeđen tekst)" #cccccc
@var color  link-color        "Boja poveznica"                           #60b1f7

@var checkbox hide-profile-picture "Sakrij profilnu sliku na početnoj strani" 0
@var checkbox show-credits "Prikaži creditse na dnu stranica" 1

@var text dummy-grader-section "--- Postavke samo za grader sustav ---" ""

@var checkbox grader-whole-task   "Automatski prikaži cijeli tekst zadatka" 1
@var select   grader-whole-in-out "Veličina okvira za ulaz i izlaz programa" {
	"Mala (Grader default)": "small",
	"Srednja*":              "medium",
	"Velika":                "large"
}
@var select   grader-code-block-size "Veličina okvira za kod" {
	"Mala (350px, Grader default)": "small",
	"Srednja (600px)*":             "medium",
	"Velika (900px)":               "large",
	"Prikaži sve":                  "all"
}

==/UserStyle== */

@ad-text: "Moj TVZ Dark theme by Karlo Bistrički (https://userstyles.world/style/3078/moj-tvz-dark)";

@-moz-document domain("moj.tvz.hr") {
	/*** reset ***/
	
	html {
		height: 100%;
	}
	
	body {
		min-height: 100%;
	}
	
	/*** Bootstrap themeing ***/
	
	:root {
		color-scheme: dark;
		--bs-body-color: #dee2e6;
		--bs-body-color-rgb: 222,226,230;
		--bs-body-bg: #212529;
		--bs-body-bg-rgb: 33,37,41;
		--bs-emphasis-color: #fff;
		--bs-emphasis-color-rgb: 255,255,255;
		--bs-secondary-color: rgba(222, 226, 230, 0.75);
		--bs-secondary-color-rgb: 222,226,230;
		--bs-secondary-bg: #343a40;
		--bs-secondary-bg-rgb: 52,58,64;
		--bs-tertiary-color: rgba(222, 226, 230, 0.5);
		--bs-tertiary-color-rgb: 222,226,230;
		--bs-tertiary-bg: #2b3035;
		--bs-tertiary-bg-rgb: 43,48,53;
		--bs-primary-text-emphasis: #6ea8fe;
		--bs-secondary-text-emphasis: #a7acb1;
		--bs-success-text-emphasis: #75b798;
		--bs-info-text-emphasis: #6edff6;
		--bs-warning-text-emphasis: #ffda6a;
		--bs-danger-text-emphasis: #ea868f;
		--bs-light-text-emphasis: #f8f9fa;
		--bs-dark-text-emphasis: #dee2e6;
		--bs-primary-bg-subtle: #031633;
		--bs-secondary-bg-subtle: #161719;
		--bs-success-bg-subtle: #051b11;
		--bs-info-bg-subtle: #032830;
		--bs-warning-bg-subtle: #332701;
		--bs-danger-bg-subtle: #2c0b0e;
		--bs-light-bg-subtle: #343a40;
		--bs-dark-bg-subtle: #1a1d20;
		--bs-primary-border-subtle: #084298;
		--bs-secondary-border-subtle: #41464b;
		--bs-success-border-subtle: #0f5132;
		--bs-info-border-subtle: #087990;
		--bs-warning-border-subtle: #997404;
		--bs-danger-border-subtle: #842029;
		--bs-light-border-subtle: #495057;
		--bs-dark-border-subtle: #343a40;
		--bs-heading-color: inherit;
		--bs-link-color: #6ea8fe;
		--bs-link-hover-color: #8bb9fe;
		--bs-link-color-rgb: 110,168,254;
		--bs-link-hover-color-rgb: 139,185,254;
		--bs-code-color: #e685b5;
		--bs-highlight-color: #dee2e6;
		--bs-highlight-bg: #664d03;
		--bs-border-color: #495057;
		--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
		--bs-form-valid-color: #75b798;
		--bs-form-valid-border-color: #75b798;
		--bs-form-invalid-color: #ea868f;
		--bs-form-invalid-border-color: #ea868f;
	}

	/*** broken loader ***/
	
	.pace .pace-progress::before {
		width: unset;
		aspect-ratio: 1 / 1;

		display: grid;
		place-items: center;
	}

	.pace, // remove once it works properly
	.pace:has([data-progress-text="99%"]) {
		display: none;
	}
	
	/*** mojtvz.css overrides ***/
	
	.danger-mojtvz {
		background-color: var(--bs-card-bg);
	}
	
	.btn-mojtvzboja {
		//color: #ffffff;
		//background-color: #00447c;
		//border-color: #130269;
	}
	
	.btn-mojtvzboja:hover,
	.btn-mojtvzboja:focus,
	.btn-mojtvzboja:active,
	.btn-mojtvzboja.active,
	.open .dropdown-toggle.btn-mojtvzboja {
		//color: #ffffff;
		//background-color: #5b5754;
		//border-color: #130269;
	}
	
	.btn-mojtvzboja:active,
	.btn-mojtvzboja.active,
	.open .dropdown-toggle.btn-mojtvzboja {
		//background-image: none;
	}
	
	.btn-mojtvzboja.disabled,
	.btn-mojtvzboja[disabled],
	fieldset[disabled] .btn-mojtvzboja,
	.btn-mojtvzboja.disabled:hover,
	.btn-mojtvzboja[disabled]:hover,
	fieldset[disabled] .btn-mojtvzboja:hover,
	.btn-mojtvzboja.disabled:focus,
	.btn-mojtvzboja[disabled]:focus,
	fieldset[disabled] .btn-mojtvzboja:focus,
	.btn-mojtvzboja.disabled:active,
	.btn-mojtvzboja[disabled]:active,
	fieldset[disabled] .btn-mojtvzboja:active,
	.btn-mojtvzboja.disabled.active,
	.btn-mojtvzboja[disabled].active,
	fieldset[disabled] .btn-mojtvzboja.active {
		//background-color: #00447c;
		//border-color: #130269;
	}
	
	.btn-mojtvzboja .badge {
		//color: #00447c;
		//background-color: #ffffff;
	}
	
	.mojtvzlink {
		//position: relative;
		color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); /* reset to BS */
		//text-decoration: none;
	}
	
	.mojtvzlink:hover {
		color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); /* reset to BS */
	}
	
	.mojtvzlink::after {
		//position: absolute;
		//bottom: 0;
		//left: 0;
		//right: 0;
		//margin: 0 auto;
		//content: "";
		background-color: currentColor;
		//width: 0%;
		//height: 2px;
		//transition: all 0.5s;
	}
	.mojtvzlink:hover::after {
		//width: 100%;
	}
	
	.mojtvzdno {
		//margin-bottom: 1px;
		//height: 30px;
		//line-height: 30px;
		//padding: 0px 15px;
	}
	
	/*** datatables fixes ***/
	
	.dataTables_wrapper .dataTables_length {
		color: unset;
	}
	
	button.dt-button,
	div.dt-button,
	a.dt-button,
	input.dt-button,
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_processing,
	.dataTables_wrapper .dataTables_paginate
	{
		color: unset;
	}
	
	.dataTables_wrapper .dataTables_paginate .paginate_button {
		color: inherit !important;
		
		&.current,
		&.current:hover {
			color: inherit !important;
			background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
			border: 1px solid rgba(0, 0, 0, 0.3);
		}
	}
	
	.dataTables_wrapper .dataTables_length select {
		background-color: none;
	}
	
	/*** (dark) theme fixes ***/
	
	.border-white {
		border-color: var(--bs-border-color-translucent) !important;
	}
	
	.card.border-warning,
	.card.border-light {
		border-color: var(--bs-card-border-color) !important;
	}
	
	/*** other fixes ***/
		
	body > .container-fluid > .row {
		min-height: 100vh;
		
		display: flex;
		flex-direction: column;
		
		> .sadrzaj {
			flex-grow: 1;
		}
	}
	
	body.text-center {
		text-align: unset !important;
	}
	
	.sadrzaj {
		margin-block: 2rem;
	}
	
	.sadrzaj + .alert {
		margin-bottom: 0;
	}
	
	.containter > .card + .card {
		margin-top: 1rem;
	}
	
	// Bootstrap 5 apparently removed panels?
	.panel {
		padding-block: 1rem;
	}
	
	[style*="color: #000000"],
	[style*="color: black"],
	[style*="color: #333333"],
	[style*="color: windowtext"] /* TIL */ {
		color: inherit !important;
	}
	
	form[name="formac"] > .card + .card {
		margin-top: 2rem;
	}
	
	/*** ad ***/
	.sadrzaj + * h6 {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		
		&::after {
			content: @ad-text;
		}
	}
}

@-moz-document url("https://moj.tvz.hr/"), regexp("https://moj\\.tvz\\.hr/studij[A-Za-z0-9]*\\?.*"), regexp("https://moj\\.tvz\\.hr/studij[A-Za-z0-9]*/prikaz/mojtvz\\?.*"),
regexp("https://moj\\.tvz\\.hr/.*link=prikaz/.*") {
	// welcome page
	& when (@hide-profile-picture = 1) {
		.sadrzaj > .row > :first-child > center > :first-child [class*="col"]:has(img) {
			display: none;
			
			+ * {
				margin-inline: auto;
			}
		}
	}
}

// TODO: remove unnecessary styling
@-moz-document domain("grader.tvz.hr") {
	@link-hover-color: desaturate(darken(@link-color, 25%), 25%);

	* {
		box-shadow: none !important;
		text-shadow: none !important;
		scrollbar-color: lighten(@bg-color-base, 20%) @bg-color-base;
	}

	:root {
		color: @text-color;

		@border-color-base: lighten(@bg-color-base, @bg-l-increment);
		--bg-100: @bg-color-base;                               // unused on moj.tvz.hr and Grader
		--bg-200: lighten(@bg-color-base, @bg-l-increment);     // bottom/base panels
		--bg-300: lighten(@bg-color-base, 2 * @bg-l-increment); // hovered elements, some elements
		--bg-400: lighten(@bg-color-base, 3 * @bg-l-increment); // navbar, modal, most elements
		--border-100: @border-color-base;
		--border-200: lighten(@border-color-base, @bg-l-increment);
		--border-300: lighten(@border-color-base, 2 * @bg-l-increment);
		--border-400: lighten(@border-color-base, 3 * @bg-l-increment);
	}

	/* login page only */
	body > .main-section {
		color: inherit;

		display: flex;
		flex-direction: column;

		// proper centering while keeping the background "banner" stretched
		> .container-fluid {
			flex-grow: 1;

			margin: 0;
			padding: 0;
			height: unset !important;
			overflow: clip;

			> * {
				display: grid;

				.row {
					display: grid;
					place-items: center;

					&::before,
					&::after {
						display: none;
					}
				}
			}
		}

		.login-image-main {
			background-color: var(--bg-200);
			border: 1px solid var(--border-200);
			margin: 0;

			.user-image-section > img {
				width: 100%;
			}
		}

		// page background
		.banner {
			background-color: white;
			background-blend-mode: exclusion;
		}

		center > * {
			margin-top: 1rem !important;
		}

		// useless hr that breaks page height
		+ hr {
			display: none;
		}
	}

	/* rest */
	body[background] {
		background-color: #ffffff;
		background-blend-mode: exclusion; // XOR grid pattern with white, eg. invert grid pattern colors
	}

	body {
		color: inherit;
		background-color: var(--bg-200); // accounts for special pages on moj.tvz.hr (ex: /service/popis_pred_ex.php) and grader
	}

	/* navbar */
	.navbar {
		min-height: unset;
	}

	.navbar-default {
		background: var(--bg-400);
		border-color: var(--border-400);

		box-shadow: none;
	}

	// to properly center the right part of the navbar
	.navbar-right {
		margin-left: auto; // push self to the right
		display: flex;
		align-items: center;
	}

	.navbar > .container {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.navbar-collapse.collapse {
		flex-grow: 1;

		display: flex !important;
		align-items: center;
	}

	.navbar-default .navbar-brand {
		color: white;

		&:hover,
		&:focus {
			color: #dddddd;
			text-decoration: revert; // don't remove the underline on hover
		}
	}

	// empty navbar "brand" only on moj.tvz.hr
	.navbar-header > .navbar-brand {
		display: none;
	}

	.navbar-form {
		margin: 0;
	}

	// navbar links
	.navbar-nav a:not(.notifications-dropdown a) {
		text-shadow: none !important;
		text-decoration: none;
	}

	.navbar-collapse > .navbar-nav > li > a {
		padding-top: 8px;
		padding-bottom: 8px;

		color: white;

		&:hover,
		&:focus {
			color: #dddddd;
		}
	}

	// navbar opened dropdowns
	.navbar-default .navbar-nav > .open > a {
		&,
		&:hover,
		&:focus {
			color: #dddddd;
			background-color: var(--bg-300);
		}
	}

	.dropdown-menu {
		background-color: var(--bg-300);
		background-clip: revert;
		border-color: var(--border-300);

		& > li > a {
			color: inherit;

			&:hover,
			&:focus {
				color: inherit;
				background: var(--bg-400);
			}
		}
	}

	//grader specific nav stuff
	.single-notification:not(.marking-as-unread) {
		//background-color: var(--bg-300); // if ever needed

		&:hover {
			background-color: var(--bg-200);
		}
	}

	.single-notification.unread:not(.marking-as-unread) {
		background-color: var(--bg-400);

		&:hover {
			background-color: var(--bg-300);
		}
	}

	.nav .single-notification::after,
	.nav .single-notification.unread:not(.marking-as-unread)::after {
		border-color: var(--border-300);
	}

	/* page header */

	.page-header {
		border-color: var(--border-200);
	}

	/* footer */

	footer {
		background-color: var(--bg-300);
	}

	/* panels, alerts and such */

	// mixins
	#bootstrap-colors-bg() {
		&-primary { background: @primary-color; }
		&-info    { background: @info-color; }
		&-success { background: @success-color; }
		&-warning { background: @warning-color; }
		&-danger  { background: @danger-color; }
	}

	#bootstrap-colors-panel-heading() {
		// NOTE: bootstrap has "priamry panels", but they're not used on moj.tvz.hr
		&-default .panel-heading { background: var(--bg-300); color: inherit !important; }
		&-info    .panel-heading { background: @info-color; }
		&-success .panel-heading { background: @success-color; }
		&-warning .panel-heading { background: @warning-color; }
		&-danger  .panel-heading { background: @danger-color; }
	}

	#bootstrap-colors-lgi() {
		&-info    { background-color: @info-color; }
		&-success { background-color: @success-color; }
		&-warning { background-color: @warning-color; }
		&-danger  { background-color: @danger-color; }

		&-info,
		&-success,
		&-warning,
		&-danger {
			color: @hc-text-color;
			border: none;
		}
	}

	// panels
	.panel {
		background-color: var(--bg-200);
		#bootstrap-colors-panel-heading();
		border-color: var(--border-200);
		box-shadow: none;
	}

	.panel-heading {
		color: @hc-text-color !important;
		border-bottom: none;

		margin: -1px -1px 0 -1px; // single property to replace lots of border "magic"
	}

	.panel-footer {
		background-color: var(--bg-300);
		border: none;
	}

	// alert
	.alert {
		color: @hc-text-color;
		#bootstrap-colors-bg();
		border: none !important;

		box-shadow: none;
		text-shadow: none;

		// reset color for elements with a dark background
		select,
		input[type="submit"] {
			color: @text-color !important;
		}
	}

	// jumbotron
	.jumbotron {
		background-color: var(--bg-200);
	}

	// list group
	.list-group {
		box-shadow: none;
	}

	.list-group-item {
		color: inherit;
		background-color: var(--bg-200);
		#bootstrap-colors-lgi();
		border-color: var(--border-200);

		h5 {
			margin: 0;
		}
	}

	// modal
	.modal-content {
		background: var(--bg-400);
		border-color: var(--border-400);
	}

	.modal-header {
		border-color: var(--border-400);
	}

	.close {
		color: #ccc;
		text-shadow: none;
		opacity: 1;

		&:hover {
			color: #ccc;
			opacity: .5;
		}
	}

	// labels
	.label {
		color: @hc-text-color;

		#bootstrap-colors-bg();
	}

	// grader specific things
	// on grader, restore padding-left
	.student-home-page-summary-box .panel-heading {
		padding-left: 15px;
	}

	.student-home-page-summary-box .badges-box-link,
	.student-home-page-summary-box .leaderboard-box-link {
		color: inherit;
		text-decoration: none;

		&:hover {
			color: @link-hover-color;
		}
	}

	div.task-text {
		color: inherit;
		background-color: var(--bg-300);
		border: 1px solid var(--border-300) !important;

		& when (@grader-whole-task = 1) {
			height: auto !important;

			.expand-text {
				display: none;
			}
		}
	}

	.grader div.form-header-line {
		border-color: var(--border-300);
	}

	/* inputs and buttons */

	input[type="text"],
	input[type="password"] {
		background-color: var(--bg-400);
		border: 1px solid var(--border-400);

		border-radius: 4px;
		padding: 4px 10px;
	}

	input[type="submit"]:not(.btn) {
		color: inherit;
		background-color: var(--bg-400);
		border: 1px solid var(--border-400);

		border-radius: 4px;
		padding: 4px 20px;

		&:hover,
		&:focus {
			background-color: var(--bg-300);
			border: 1px solid var(--border-300);
		}
	}

	button {
		color: inherit;
		background-color: var(--bg-400);
		border: 1px solid var(--border-400);

		border-radius: 4px;
		padding: 4px 20px;

		&:hover,
		&:focus {
			background-color: var(--bg-300);
			border: 1px solid var(--border-300);
		}
	}

	// for simplicity, this basically "assumes" that the button has .btn-default, classes like .btn-info will have a higher specificity and override this
	.btn {
		color: inherit;
		background: var(--bg-400);
		border-color: var(--border-400);

		box-shadow: none !important;
		text-shadow: none !important;
		text-decoration: none;

		&:hover,
		&:focus {
			color: inherit;
			background: var(--bg-300);
			border-color: var(--border-300);
		}

		.navbar-nav &:not(.modal &) {
			background-color: var(--bg-400);
			border: 1px solid var(--border-400);

			&:hover,
			&:focus {
				background-color: var(--bg-300);
				border-color: var(--border-300);
			}
		}
	}

	@btn-border-darken: 4%; // no need to have this configurable

	#bootstrap-color-btn(@color) {
		color: @hc-text-color;
		background: @color;
		border-color: darken(@color, @btn-border-darken);

		&:hover,
		&:focus {
			background: lighten(@color, @btn-hover-ligthen);
			border-color: lighten(@color, @btn-hover-ligthen - @btn-border-darken);
		}
	}

	.btn.btn-default {
		color: inherit;
	}

	.btn-primary { #bootstrap-color-btn(@primary-color); }
	.btn-info { #bootstrap-color-btn(@info-color); }
	.btn.btn-success { #bootstrap-color-btn(@success-color); }
	.btn.btn-warning { #bootstrap-color-btn(@warning-color); }
	.btn.btn-danger { #bootstrap-color-btn(@danger-color); }

	.btn-disabled {
		pointer-events: none;
	}

	// pagination buttons
	.pagination > .paginate_button > a {
		background-color: var(--bg-400);
		border-color: var(--border-400);

		&:hover,
		&:focus {
			background-color: var(--bg-300);
			border-color: var(--border-300);
		}
	}

	// regular select input
	select {
		color: inherit;
		background: var(--bg-400);
		border: 1px solid var(--border-400);
		padding: 8px 20px;
		border-radius: 4px;
	}

	// select input "select2"
	.select2-container {
		.select2-choice {
			color: inherit;
			background: var(--bg-300);
			border-color: var(--border-300);

			box-shadow: none !important;

			height: unset;
			padding: 4px 10px !important;

			.select2-arrow {
				background: var(--bg-300);
				border-color: var(--border-300);

				& > b {
					background-position-y: 5px;
				}
			}
		}
	}

	// choose file input
	.bootstrap-filestyle.input-group {
		input[type="text"] {
			background-color: var(--bg-400);
		}

		input[type="text"][disabled] {
			background-color: var(--bg-300);
		}
	}

	// date-time picker
	.bootstrap-datetimepicker-widget {
		td span:not(.active):hover,
		thead tr:first-child th:hover,
		td.day:not(.active):hover {
			background-color: var(--bg-200);
		}
	}

	// tabs
	.nav-tabs {
		border-color: var(--border-300);
	}

	.nav-tabs > li > a,
	.nav-tabs.nav-justified > li > a {
			color: inherit;
			background-color: var(--bg-400);
			border-color: var(--border-400);

			text-decoration: none;

			&:hover,
			&:focus {
				color: inherit;
				background-color: var(--bg-300);
				border-color: var(--border-300);
		}
	}

	// active aka current tab
	.nav-tabs > li.active > a,
	.nav-tabs.nav-justified > .active > a {
		color: inherit;
		background-color: var(--bg-300);
		border-color: var(--border-300);

		text-decoration: none;

		&:hover,
		&:focus {
			color: inherit;
			background-color: var(--bg-300);
			border-color: var(--border-300);
		}
	}

	// ensure all tabs have the same height; issue with multiline text in justified tabs
	// NOTE: don't add this to regular tabs as well, those are designed to wrap and this will mess that up, because the li elements aren't display: table-cell
	.nav-tabs.nav-justified > li {
		height: 100%;

		> a {
			height: 100%;
		}
	}

	.select2-drop {
		color: inherit;
		background-color: var(--bg-300);
		border-color: var(--border-300);

		input {
			background: url("select2.png"), var(--bg-200);
			border-color: var(--border-200);
		}
	}

	.select2-results {
		.select2-no-results,
		.select2-searching,
		.select2-selection-limit {
			background: none;
		}
	}

	// "form-control"
	.form-control,
	.form-control[readonly] {
		color: inherit;
		background-color: var(--bg-300);
		border-color: var(--border-300);
	}

	// grader file upload
	.input-group-addon {
		color: inherit;
		background-color: var(--bg-300);
		border-color: var(--border-300);
	}

	// no double border
	.input-group > .file-name-display {
		border-right: none;
	}

	/* tables */

	.table > thead > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > th,
	.table > tbody > tr > td,
	.table > tfoot > tr > th,
	.table > tfoot > tr > td {
		border-color: var(--border-300);
	}

	// calendar/schedule table
	.table-hover > tbody > tr:hover {
		& > th,
		& > td {
			background-color: var(--bg-300);
		}
	}

	.table-striped > tbody tr:nth-child(2n+1) > td {
		background-color: var(--bg-300);
	}

	.table-bordered {
		border-color: var(--border-300);
	}

	.fc {
		background-color: var(--bg-200);
	}

	.fc-unthemed {
		thead,
		tbody,
		th,
		td,
		hr,
		.fc-row,
		.fc-popover {
			border-color: var(--border-300);
		}

		hr {
			background: var(--border-300);
		}
	}

	.fc td.fc-today {
		background-color: var(--bg-300);
	}

	.fc-button {
		color: inherit;
		background: var(--bg-400);
		border-color: var(--border-400);

		&:hover,
		&:focus {
			background: var(--bg-300);
			border-color: var(--border-300);
		}
	}

	.fc-state-disabled {
		pointer-events: none;
	}

	// table height fix
	.fc-time-grid-container {
		height: unset !important;
	}

	// progress element on grader; make the points count overflow and be always visible
	.progress {
		background-color: var(--bg-300);
		overflow: visible;
		white-space: nowrap;
		isolation: isolate;

		.progress-bar-success {
			position: relative;
			z-index: 1;

			font-weight: bold;
		}
	}

	/* typography/rest */

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: inherit;
	}

	h1,
	h2,
	h3 {
		small {
			color: #999;
		}
	}


	a {
		color: @link-color;
		text-decoration: underline;

		&:hover,
		&:focus {
			color: @link-hover-color;
		}
	}

	.badges-selector-item {
		filter: invert(1);
		transition: transform 200ms ease-in-out;
		position: relative;

		&:hover {
			transform: scale(2.5);

		}
	}

	// code blocks and stuff
	pre {
		color: inherit;
		background-color: var(--bg-300);
		border-color: var(--border-300);
	}

	code {
		color: inherit;
	}

	.grader textarea {
		& when (@grader-whole-in-out = medium) {
			height: 200px;
		}
		& when (@grader-whole-in-out = large) {
			height: 400px;
		}
	}

	.grader hr {
		border-color: var(--border-300);
	}

	.grader .countdown {
		background-color: var(--bg-300);
		border-color: var(--border-300);
	}

	.test-case-container .tc-ok {
		background-color: var(--bg-300);
		border-color: @success-color;
	}

	.test-case-container .tc-not-ok {
		background-color: var(--bg-300);
		border-color: @danger-color;
	}

	.diff-overview pre.diff del {
		color: #ff5e5e;
		text-decoration: 1px wavy underline currentColor;
	}

	.diff-overview pre.diff ins {
		color: #ffae5e;
	}

	// why do things like this even exist on that website? an issue with the website's own text editor I assume
	[style*="color: #000000"],
	[style*="color: black"],
	[style*="color: #333333"],
	[style*="color: windowtext"] /* TIL */ {
		color: inherit !important;
	}

	// idk why this was set, but it looks bad, so I'm reverting it (not for monospace, just in case)
	span[style*="font-family"]:not([style*="font-family: monospace"]) {
		font-family: inherit !important;
	}

	// screw inline styles for Grader task texts
	.task-text {
		[style*="color:"] {
			color: inherit !important;
		}

		[style*="background-color:"] {
			background-color: unset !important;
		}

		[style*="font-family:"] {
			font-family: inherit !important;
		}
	}

	// prevent images extending past its parent, causing it to go under text (white text on a white picture = not good)
	img:not(table img) {
		max-width: 100%;
	}

	// remove height of clearfix itself
	.clearfix {
		margin-bottom: -10px;
	}

	// has a really nasty contrast
	.panel-info font[color="red"] {
		color: contrast(@info-color, #ff0000, #fb7d22); // picks the better contrast; for when a custom color is used
	}

	/* shameless advertizing/theme credits */

	& when (@show-credits = 1) {
		body > .container-fluid > #non-printable > .potpis > .panel.panel-default > .panel-body > .row > .col-xs-6:first-child::before {
			color: #999;
			content: @ad-text;
		}

		// on grader
		footer .col-md-12 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			&::after {
				content: @ad-text;

				color: #999;
				font-size: .9em;
				line-height: 1;
			}

			> p {
				color: #999;
				margin: 0;
			}
		}
	}

	/*
	 * THE FOLLOWING CODE IS A SLIGHTLY MODIFIED HIGHLIGHT.JS THEME
	 *
	 * THE ORIGINAL CODE IS LICENSED UNDER THE BSD-3-Clause License
	 *
	 * SOURCE: https://github.com/highlightjs/highlight.js/blob/main/src/styles/vs2015.css
	 */

	pre {
		tab-size: 4;

		// .hljs
		&.source-code-view {
			//background: #1E1E1E;
			background: #181818;
			//color: #DCDCDC;
			color: #e4e4e4;

			& when (@grader-code-block-size = medium) {
				max-height: 600px;
			}
			& when (@grader-code-block-size = large) {
				max-height: 900px;
			}
			& when (@grader-code-block-size = all) {
				max-height: unset;
			}
		}

		//.hljs-keyword,
		//.hljs-literal,
		//.hljs-symbol,
		//.hljs-name
		.keyword,
		.literl,
		.symbol,
		.name {
			color: #569CD6;
		}

		//.hljs-link
		.link {
			color: #569CD6;
			text-decoration: underline;
		}

		//.hljs-built_in,
		//.hljs-type
		.built_in,
		.type {
			color: #4EC9B0;
		}

		//.hljs-number,
		//.hljs-class
		.number,
		.class {
			color: #B8D7A3;
		}

		//.hljs-string,
		//.hljs-meta .hljs-string
		.string,
		.meta .string {
			color: #D69D85;
		}

		//.hljs-regexp,
		//.hljs-template-tag
		.regexp,
		.template-tag {
			color: #9A5334;
		}


		//.hljs-subst,
		//.hljs-function,
		//.hljs-title,
		//.hljs-params,
		//.hljs-formula
		.subst,
		.function,
		.title,
		.params,
		.formula {
			color: #DCDCDC;
		}

		//.hljs-comment,
		//.hljs-quote
		.comment,
		.quote {
			color: #57A64A;
			//font-style: italic; // no, this is ugly
		}

		//.hljs-doctag
		.doctag {
			color: #608B4E;
		}

		//.hljs-meta,
		//.hljs-meta .hljs-keyword,
		//.hljs-tag
		.meta,
		.meta .keyword,
		.tag,
		.preprocessor {
			color: #9B9B9B;
		}

		//.hljs-variable,
		//.hljs-template-variable
		.variable,
		.template-variable {
			color: #BD63C5;
		}

		//.hljs-attr,
		//.hljs-attribute
		.attr,
		.attribute {
			color: #9CDCFE;
		}

		//.hljs-section
		.section {
			color: gold;
		}

		//.hljs-emphasis
		.emphasis {
			font-style: italic;
		}

		//.hljs-strong
		.strong {
			font-weight: bold;
		}

		/*.hljs-code {
		  font-family:'Monospace';
		}*/

		//.hljs-bullet,
		//.hljs-selector-tag,
		//.hljs-selector-id,
		//.hljs-selector-class,
		//.hljs-selector-attr,
		//.hljs-selector-pseudo
		.bullet,
		.selector-tag,
		.selector-id,
		.selector-class,
		.selector-attr,
		.selector-pseudo {
			color: #D7BA7D;
		}

		//.hljs-addition
		.addition {
			background-color: #144212;
			display: inline-block;
			width: 100%;
		}

		//.hljs-deletion
		.deletion {
			background-color: #600;
			display: inline-block;
			width: 100%;
		}
	}
}