@layer framework, theme, fonts;
@import url("bulma.min.css") layer(framework);
@import url("https://fonts.googleapis.com/css2?family=Baloo+2&display=swap") layer(fonts);
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=bloodtype,chevron_left,chevron_right,directions_bike,directions_run,directions_walk,finance_mode,info,pool,self_improvement,settings_account_box,stat_0,stat_2,stat_minus_2,trending_down,trending_flat,trending_up,verified,view_timeline") layer(fonts);

@layer theme {
	:root {
		--bulma-family-primary: "Baloo 2", sans-serif;
		
		--hs-logo-color1: #7bc5ed;
		--hs-logo-color2: #5cb2e0;
		--hs-logo-color3: #378fc1;
		--hs-logo-color4: #1f6fa3;
		--hs-logo-color5: #a6dcf8;
		
		--bulma-link-h: 200.49;
		--bulma-link-s: 85.42%;
		--bulma-link-l: 81.18%;
		--bulma-link-invert-h: 0;
		--bulma-link-invert-s: 0%;
		--bulma-link-invert-l: 0%;
		
		--bulma-link-h: 203.27;
		--bulma-link-s: 62.55%;
		--bulma-link-l: 46.08%;
		--bulma-link-invert-h: 0;
		--bulma-link-invert-s: 0%;
		--bulma-link-invert-l: 100%;
		
		--table-row-background-l: var(--bulma-background-l);
		--table-row-background-lh: calc(var(--bulma-background-l) - 2%);
		
		--alt-progress-background: color-mix(in srgb, var(--bulma-border-weak), #000 10%);
	}
	@media (prefers-color-scheme: dark) {
		:root {
			--hs-logo-color1: #afdbf5;
			--hs-logo-color2: #9acef0;
			--hs-logo-color3: #549ece;
			--hs-logo-color4: #2c86bf;
			--hs-logo-color5: #ddf2fd;
			
			--bulma-link-h: 200.49;
			--bulma-link-s: 85.42%;
			--bulma-link-l: 81.18%;
			--bulma-link-invert-h: 0;
			--bulma-link-invert-s: 0%;
			--bulma-link-invert-l: 0%;
			
			--table-row-background-l: calc(var(--bulma-background-l) - 3%);
			--table-row-background-lh: calc(var(--bulma-background-l) - 1%);
			
			--alt-progress-background: var(--bulma-border-weak);
		}
	}
	@media only screen and (max-width: 768px) {

	}

	[data-theme=light], .theme-light {
		--hs-logo-color1: #7bc5ed;
		--hs-logo-color2: #5cb2e0;
		--hs-logo-color3: #378fc1;
		--hs-logo-color4: #1f6fa3;
		--hs-logo-color5: #a6dcf8;
		
		--bulma-link-h: 200.49;
		--bulma-link-s: 85.42%;
		--bulma-link-l: 81.18%;
		--bulma-link-invert-h: 0;
		--bulma-link-invert-s: 0%;
		--bulma-link-invert-l: 0%;
		
		--bulma-link-h: 203.27;
		--bulma-link-s: 62.55%;
		--bulma-link-l: 46.08%;
		--bulma-link-invert-h: 0;
		--bulma-link-invert-s: 0%;
		--bulma-link-invert-l: 100%;
		
		--table-row-background-l: var(--bulma-background-l);
		--table-row-background-lh: calc(var(--bulma-background-l) - 2%);
		
		--alt-progress-background: color-mix(in srgb, var(--bulma-border-weak), #000 10%);
	}
	[data-theme=dark], .theme-dark {
		--hs-logo-color1: #afdbf5;
		--hs-logo-color2: #9acef0;
		--hs-logo-color3: #549ece;
		--hs-logo-color4: #2c86bf;
		--hs-logo-color5: #ddf2fd;
		
		--bulma-link-h: 200.49;
		--bulma-link-s: 85.42%;
		--bulma-link-l: 81.18%;
		--bulma-link-invert-h: 0;
		--bulma-link-invert-s: 0%;
		--bulma-link-invert-l: 0%;
		
		--table-row-background-l: calc(var(--bulma-background-l) - 3%);
		--table-row-background-lh: calc(var(--bulma-background-l) - 1%);
		
		--alt-progress-background: var(--bulma-border-weak);
	}

	.hejtostats-logo {
		fill: var(--hs-logo-color1);
		max-width: 100%;
		transition: fill 0.2s ease-out;
		
		* {
			transition: fill 0.2s ease-out;
		}
		
		._hs01 { fill: var(--hs-logo-color2); }
		._hs02 { fill: var(--hs-logo-color3); }
		._hs03 { fill: var(--hs-logo-color4); }
		._hs04 { fill: var(--hs-logo-color5); }
		
		&:hover {
			fill: var(--hs-logo-color4) !important;
			
			* {
				fill: var(--hs-logo-color4) !important;
			}
		}
	}
	.hejtostats-debug {
		left: 0;
		right: 0;
		height: 25vh;
		bottom: 0;
		z-index: 100;
		position: fixed;
		overflow: auto;
		border-top: 2px solid color-mix(in oklab, var(--bulma-danger-on-scheme), transparent 70%);
		overscroll-behavior: none;
		
		pre {
			color: color-mix(in oklab, var(--bulma-pre), transparent 70%);
			backdrop-filter: blur(2px);
			background-color: color-mix(in oklab, var(--bulma-pre-background), transparent 70%);
		}
		
		&:hover {
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
			border-top-color: var(--bulma-danger-on-scheme);
			background-color: color-mix(in oklab, var(--bulma-pre-background), transparent 20%);
			
			pre {
				color: var(--bulma-pre);
			}
		}
	}
	.hejtostats-navbar {
		&.notification {
			background: hsl(var(--bulma-notification-h), var(--bulma-notification-s), var(--bulma-notification-background-l));
			
			a:not(.button) {
				text-decoration: none;
				
				&:hover {
					text-decoration: underline;
				}
			}
		}
		
		.navbar-item {
			gap: 10px;
			display: flex !important;
			flex-wrap: wrap;
			max-width: 100%;
			
			.field {
				margin-bottom: 0;
			}
		}
		.navbar-start {
			.navbar-item {
				max-width: 100%;
			}
		}
	}
	
	.material-symbols-rounded {
		display: none;
		font-size: 0;
	}
	
	.modal {
		z-index: 100;
	}
	.table {
		--bulma-table-head-cell-color: color-mix(in oklab, var(--bulma-text-strong), transparent 50%);
		
		table-layout: auto;
		border-spacing: 0 4px;
		border-collapse: separate;
		
		thead {
			th {
				font-size: 0.8em;
				vertical-align: bottom;
			}
		}
		tbody {
			tr {
				&:hover {
					background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--table-row-background-lh));
				}
				
				&:nth-child(-n+3) {
					.author {
						font-weight: 600;
					}
				}
			}
			td {
				white-space: nowrap;
				vertical-align: middle;
				
				&.text-wrap {
					/* bo firefox, xd */
					white-space: initial;
				}
			}
		}
		caption {
			opacity: 0.6;
			font-size: 0.8em;
			margin-top: 0.5em;
			caption-side: bottom;
		}
		thead, tbody {
			tr {
				background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--table-row-background-l));
				
				th, td {
					border: none;
					
					&:first-child {
						border-top-left-radius: var(--bulma-radius-small);
						border-bottom-left-radius: var(--bulma-radius-small);
					}
					&:last-child {
						border-top-right-radius: var(--bulma-radius-small);
						border-bottom-right-radius: var(--bulma-radius-small);
					}
				}
			}
		}
		
		.prev {
			font-size: 0.8em !important;
		}
		.author {
			a {
				gap: 0.8rem;
			}
			
			img {
				&.is-rounded {
					object-fit: cover;
					aspect-ratio: 1 / 1;
				}
			}
		}
		.trophy {
			width: 30px;
			text-align: center;
			padding: 0;
		}
	}
	.chart {
		canvas {
			max-height: var(--canvas-height, 100px);
		}
		
		.chart-toggle {
			gap: 8px;
			display: flex;
			opacity: 0.6;
			padding: 0 5px;
			font-size: smaller;
			align-items: center;
			border-radius: 5px;
			justify-content: flex-end;
			
			&::before {
				content: attr(data-title);
			}
			
			label {
				gap: 5px;
				display: flex;
				align-items: center;
			}
		}
	}
	.field {
		.checkbox {
			gap: 10px;
			display: flex;
			align-items: center;
		}
	}
	.nowrap {
		white-space: nowrap;
	}
	.container {
		&.is-fluid {
			min-height: 80vh;
		}
	}
	.with-gap {
		gap: 0.5em;
	}
	.menu-list {
		--bulma-menu-list-line-height: 1em;
		
		.is-active-main {
			background-color: hsl(var(--bulma-menu-item-h), var(--bulma-menu-item-s), calc(var(--bulma-menu-item-background-l) + 8%));
		}
		
		a {
			* {
				&:first-child {
					flex: 0 0 auto;
				}
				
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.tag-header, .tag-link {
		&.is-flex {
			gap: 0.5em;
			
			svg {
				fill: currentColor;
				max-width: 24px;
				max-height: 24px;
			}
			
			img {
				max-height: 64px;
			}
		}
		
		&:is(.tag-link) {
			svg {
				max-height: 24px;
				max-width: 24px;
				min-width: 24px;
				min-height: 24px;
			}
			
			img {
				max-height: 1em;
			}
		}
	}
	.auth-user {
		gap: 10px;
		color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l)) !important;
		padding: 5px 15px;
		background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--table-row-background-l));
		border-radius: 32px;
		
		&:has(figure) {
			padding: 5px 5px 5px 15px;
		}
		
		b {
			text-align: right;
			line-height: 1em;
			
			span {
				opacity: 0.6;
				font-size: 0.7em;
			}
		}
		
		&:hover {
			background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--table-row-background-lh));
		}
	}
	.calc-field {
		gap: 10px;
		
		[data-prefix] {
			gap: 10px;
			display: flex;
			align-items: center;
			
			&::before {
				content: var(--control-prefix);
			}
			&:not([data-prefix=""]) {
				&::before {
					content: attr(data-prefix)
				}
			}
		}
		
		input[type="number"] {
			-moz-appearance: textfield;
			
			&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}
	}
	.calc-value {
		span[data-sum] {
			&::after {
				content: "(" var(--control-prefix) " " attr(data-sum) ")";
				opacity: 0.6;
				margin-left: 5px;
			}
		}
	}
	.file-previews {
		.field-body {
			gap: 5px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			
			.image {
				img {
					max-width: 100%;
					max-height: 100%;
					object-fit: cover;
					aspect-ratio: 1 / 1;
					border-radius: var(--bulma-radius);
					
					&:hover {
						filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.6));
						object-fit: contain;
						border-radius: 0;
					}
				}
			}
		}
	}
	.achievements {
		--verified-color: rgb(95, 206, 179);
		
		row-gap: 6rem !important;
		column-gap: 2rem !important;
		padding-top: 4rem;
		
		@media (max-width: 800px) {
			row-gap: 10rem !important;
			column-gap: 2rem !important;
			padding-top: 8rem;
		}
		
		.achievement {
			color: var(--bulma-text);
			padding: 4.5rem 20px 20px 20px;
			position: relative;
			min-height: 10em;
			border-radius: var(--bulma-radius);
			background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--table-row-background-lh));
			
			@media (max-width: 800px) {
				padding-top: 7.5rem;
			}
			
			&.completed {
				outline: 4px solid var(--verified-color);
				
				.verify-icon {
					color: var(--verified-color);
					opacity: 1;
				}
			}
			&:is(a):hover {
				outline: 4px solid var(--hs-logo-color3);
				
				.achievement-image {
					filter: drop-shadow(0px 0px 8px var(--hs-logo-color3));
				}
			}
			
			.verify-icon {
				opacity: 0.1;
			}
			.achievement-image {
				top: 0;
				left: 50%;
				max-width: 75%;
				max-height: 8em;
				position: absolute;
				transform: translate(-50%, -50%);
			}
			
			progress {
				&::-webkit-progress-bar {
					background-color: var(--alt-progress-background);
				}
			}
		}
	}
	.achievement-item {
		gap: 10px;
		display: flex;
		align-items: center;
		
		img:first-child {
			max-width: 150px;
			max-height: 150px;
		}
		
		.achievement-info {
			gap: 10px;
			flex: 1 1 auto;
			display: flex;
			line-height: 1.2em;
			flex-direction: column;
			
			em {
				font-style: normal;
				font-weight: 600;
			}
			
			.is-small {
				font-size: 0.8em;
			}
			.achievement-desc {
				gap: 10px;
				display: flex;
				align-items: center;
			}
			.achievement-author {
				gap: 10px;
				display: flex;
				align-items: center;
			}
		}
	}
	
	p:has(+ hr) {
		margin-bottom: 0;
		
		& + hr {
			margin-top: 10px;
		}
	}
}