:root {
	--hit-success-text: #0a3622;
	--hit-success-bg: #d1e7dd;
	--hit-success-border: #a3cfbb;

	--hit-danger-text: #58151c;
	--hit-danger-bg: #f8d7da;
	--hit-danger-border: #f1aeb5;

	--hit-warning-text: #664d03;
	--hit-warning-bg: #fff3cd;
	--hit-warning-border: #ffe6b9;

	--hit-info-text: #055160;
	--hit-info-bg: #cff4fc;
	--hit-info-border: #9eeaf9;

	--hit-dots-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5'%3E%3C/circle%3E%3Ccircle cx='12' cy='4.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='12' cy='19.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E");

	--hit-sorting-background-color: #d1e7dd;

	/*	--sl-input-border-color: hsl(240 4.9% 83.9%);
	--sl-color-neutral-0: hsl(0, 0%, 100%);
	--sl-input-height-medium: 1.1rem;
	--sl-border-radius-circle: 50%;*/
}

body {
	min-height: 100vh;
	caret-color: transparent;
}

article {
	break-inside: avoid;
	height: fit-content;
}

header.menu {
	padding: 0;
	width: 60px;
	height: 60px;
	position: fixed;
	overflow: visible;
	z-index: 2;
}

header.menu details.dropdown summary::after {
	display: none;
}

header.menu details ul {
	background-color: var(--pico-primary);
}

header.menu details.dropdown summary+ul li a {
	font-size: x-large;
	color: var(--pico-primary-inverse);
}

header.menu details.dropdown summary+ul li a:hover {
	background-color: var(--pico-primary-hover);
}

header.nav {
	position: fixed;
	top: 0;
	left: 60px;
	right: 0;
	height: 60px;
	z-index: 1;
	padding: 0 16px;
	background: var(--pico-muted-border-color);
}

header.nav nav {
	height: 100%;
}

header.nav ul {
	line-height: 16px;
	margin-left: 0;
	margin-right: 0;
}

article>header>nav {
	height: 1em;
}

/* form.sortable details[open]>summary {
	display: none;
} */
form[method="dialog"] {
	position: relative;
	z-index: 2;
}

details.dropdown>summary.dots {
	border: none;
	background-color: transparent;
}

details.dropdown>summary.dots::after {
	margin: 0;
	background-image: var(--hit-dots-icon);
	background-position: right top;
}

details.dropdown>summary.dots:not([role]):focus {
	box-shadow: none;
	background-color: transparent;
}

nav details.dropdown>summary.dots:not([role]) {
	height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical));
}

nav li details.dropdown>summary {
	padding-top: 0;
	padding-bottom: 0;
}


/*header.nav li {
	--pico-nav-element-spacing-vertical: 0;
}

header.nav>nav>ul>li:first-of-type {
	padding-left: 0;
} */

main.first {
	padding-top: 80px;
}

.page-grid {
	grid-template-columns: 10rem repeat(auto-fit, minmax(0%, 1fr));
}

.board-grid {
	grid-template-areas: "done deliver refinement epics members";
}

.projects-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/4)), 1fr))
}

.column {
	padding: 0;
}

/** input fixes */

:where(input, select, textarea):not(
		[type="checkbox"],
		[type="radio"],
		[type="date"],
		[type="datetime-local"],
		[type="month"],
		[type="time"],
		[type="week"],
		[type="range"]
	) {
	text-overflow: ellipsis;
	caret-color: initial;
}

/* set invalid input border color */
:where(input, select, textarea):invalid:not(:placeholder-shown) {
	--pico-border-color: var(--pico-form-element-invalid-border-color);
}

/* set invalid input icon|addon color and background color */
:where(input, select, textarea)[aria-invalid="true"]+span[role="button"] {
	border-color: var(--pico-form-element-invalid-border-color);
	background-color: var(--pico-del-color);
}

/* remove picocss invalid input background image */
:where(input, select, textarea):not(
		[type="checkbox"],
		[type="radio"],
		[type="date"],
		[type="datetime-local"],
		[type="month"],
		[type="time"],
		[type="week"],
		[type="range"]
	)[aria-invalid="true"]:not(select) {
	background-image: none;
	padding: 0;
	padding-inline-end: 0 !important;
}

:is(button, [role="button"]).warning {
	--pico-color: var(var(--pico-primary-inverse));
	--pico-border-color: var(--pico-del-color);
	--pico-background-color: var(--pico-form-element-invalid-border-color);
}

:is(button, [type="submit"], [type="button"], [role="button"]).warning:is([aria-current]:not([aria-current="false"]),
	:hover,
	:active,
	:focus) {
	--pico-border-color: var(--pico-form-element-invalid-active-border-color);
}

:is(button, [role="button"]).warning.outline {
	--pico-color: var(--pico-del-color);
	--pico-border-color: var(--pico-del-color);
	--pico-background-color: transparent;
}

:is(button, [type="submit"], [type="button"], [role="button"]).warning:is([aria-current]:not([aria-current="false"]),
	:hover,
	:active,
	:focus) {
	--pico-color: var(--pico-del-color);
	--pico-border-color: var(--pico-form-element-invalid-active-border-color);
}

/* set invalid input icon */
/* :where(input):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week], [type=range]):invalid:not(:placeholder-shown):not(:focus) {
	background-image: var(--pico-icon-invalid);
	background-position: center right .75rem;
	background-size: 1rem auto;
	background-repeat: no-repeat;
} */

textarea {
	min-height: 63px;
}

fieldset[role="group"]:has(> [aria-invalid="true"])+small {
	color: var(--pico-del-color);
}

/* hack for input fields with icon group */
[role="group"] span[role="button"] {
	--pico-form-element-spacing-horizontal: 1em;
}

div.task {
	flex-grow: 1000;
	text-align: left;
}

[role="group"] button.icon {
	padding: var(--pico-form-element-spacing-vertical);
	aspect-ratio: 2 / 1;
}

/* burger menu */
#nav-icon {
	cursor: pointer;
	background-color: var(--pico-primary);
	margin: 0;
}

#nav-icon div {
	width: 32px;
	height: 32px;
	position: absolute;
	top: 14px;
	left: 14px;
}

#nav-icon span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: var(--pico-background-color);
	border-radius: 0;
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
}

#nav-icon>summary {
	position: relative;
	border: none;
	height: 60px;
	width: 60px;
	background-color: transparent;
	--pico-box-shadow: none;
	--pico-outline-width: 0;
}

/* ICON */
#nav-icon span:nth-child(1) {
	top: 4px;
	transform-origin: left center;
}

#nav-icon span:nth-child(2) {
	top: 14px;
	transform-origin: left center;
}

#nav-icon span:nth-child(3) {
	top: 24px;
	transform-origin: left center;
}

#nav-icon[open] span:nth-child(1) {
	transform: rotate(45deg);
	top: 2px;
	left: 5px;
}

#nav-icon[open] span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

#nav-icon[open] span:nth-child(3) {
	transform: rotate(-45deg);
	top: 25px;
	left: 5px;
}

/* table fixes */
th.actions,
td.actions {
	text-align: right;
}

table tr:hover td {
	background: var(--pico-table-row-stripped-background-color);
	cursor: pointer;
}

table.table th>div {
	padding: 0;
	margin: 0;
	display: inline-block;
}

table.table th>select {
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 0;
}

.table {
	margin-bottom: 0;
}

/* alerts */
#messages {
	position: fixed;
	bottom: 0;
	z-index: 100;
	left: 0;
	right: 0;
}

#messages>ul li {
	list-style-type: none;
	padding: 0;
}

.alert {
	--hit-alert-bg: transparent;
	--hit-alert-padding-x: 1rem;
	--hit-alert-padding-y: 1rem;
	--hit-alert-margin-bottom: 1rem;
	--hit-alert-color: inherit;
	--hit-alert-border-color: transparent;
	--hit-alert-border: 1px solid var(--hit-alert-border-color);
	--hit-alert-border-radius: 2px;
	--hit-alert-link-color: inherit;
	position: relative;
	padding: var(--hit-alert-padding-y) var(--hit-alert-padding-x);
	margin-bottom: var(--hit-alert-margin-bottom);
	color: var(--hit-alert-color);
	background-color: var(--hit-alert-bg);
	border: var(--hit-alert-border);
	border-radius: var(--hit-alert-border-radius);
}

.alert-success {
	--hit-alert-color: var(--hit-success-text);
	--hit-alert-bg: var(--hit-success-bg);
	--hit-alert-border-color: var(--hit-success-border);
	--hit-alert-link-color: var(--hit-success-text);
}

.alert-danger {
	--hit-alert-color: var(--hit-danger-text);
	--hit-alert-bg: var(--hit-danger-bg);
	--hit-alert-border-color: var(--hit-danger-border);
	--hit-alert-link-color: var(--hit-danger-text);
}

.alert-warning {
	--hit-alert-color: var(--hit-warning-text);
	--hit-alert-bg: var(--hit-warning-bg);
	--hit-alert-border-color: var(--hit-warning-border);
	--hit-alert-link-color: var(--hit-warning-text);
}

.alert-info {
	--hit-alert-color: var(--hit-info-text);
	--hit-alert-bg: var(--hit-info-bg);
	--hit-alert-border-color: var(--hit-info-border);
	--hit-alert-link-color: var(--hit-info-text);
}

.alert button.close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 1rem;
	width: 1em;
	height: 1em;
	background: transparent var(--pico-icon-close) center / 1em auto no-repeat;
	border: 0;
	opacity: 0.5;
}

button.close:hover {
	opacity: 1;
}

/* TABLE ORDER */

.th-filter {
	max-width: 300px;
}

table.table th>div.order {
	margin-top: -8px;
}

.order {
	/* display: inline-block; */
	float: right;
	/* width: 25px;
	height: 25px; */
	opacity: 0.5;
	margin: 2px;
	/* margin-right: 8px; */
	/* background-color: white;
	border: 1px solid #ccc;
	border-radius: 50%; */
	height: 16px;
	width: 40px;
}

.order:has(input:checked) {
	opacity: 1;
}

.order input {
	appearance: none;
	background-color: transparent;
	/* margin: 0; */
	font: inherit;
	color: currentColor;
	width: 40px;
	height: 40px;
	margin: 0;
	/* border: none; */
	/* border-radius: 50%; */
	position: absolute;
	text-align: center;
}

.order input:hover {
	cursor: pointer;
}

.order input:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.075),
		0 0 8px rgba(102, 175, 233, 0.6);
}

.order input::before {
	content: "";
	display: inline-block;
	/* text-align: center;
	text-transform: none; */
	font-weight: normal;
	/* font-style: normal;
	font-variant: normal; */
	font-family: "HoldIT";
	/* line-height: 24px; */
	/* -webkit-font-smoothing: antialiased; */
	/* padding-right: 1px; */
	/* width: 24px;
	height: 24px; */
	vertical-align: middle;
	font-size: 24px;
}

.order input.desc:not(:checked)::before {
	content: "\e666";
}

.order input.asc:not(:checked)::before {
	content: "\e665";
}

.order input:checked {
	transform: scale(0);
	pointer-events: none;
}

/* PAGER */
#pager {
	float: right;
	text-align: right;
	padding: 0 0 16px 0;
	box-sizing: border-box;
	user-select: none;

	position: absolute;
	right: 16px;
	bottom: 0px;
	background-color: white;
}

#pager a.disabled {
	cursor: default;
	color: #666 !important;
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}

#pager a {
	box-sizing: border-box;
	display: inline-block;
	min-width: 1.5em;
	padding: 0.4em 1em;
	margin-left: 2px;
	text-decoration: none !important;
	cursor: pointer;
}

#pager a.current {
	color: var(--pico-primary-inverse);
	background-color: var(--pico-primary-background);
	pointer-events: none;
	border-radius: var(--pico-border-radius);
}

#pager a:hover {
	box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
	border-radius: var(--pico-border-radius);
}

span.color {
	display: inline-block;
	width: var(--sl-input-height-medium);
	height: var(--sl-input-height-medium);
	/* vertical-align: bottom; */
	border-radius: var(--sl-border-radius-circle);
	box-shadow:
		inset 0 0 0 2px var(--sl-input-border-color),
		inset 0 0 0 4px var(--sl-color-neutral-0);
	margin: 0px 8px;
}

#stationColor {
	width: 70px;
	float: right;
}


/* dialog */
div.backdrop {
	display: block;
	z-index: 1;
	position: fixed;
	width: 100vw;
	height: 100vh;
	inset: 0;
	background: 0 0;
	content: "";
	cursor: default;
	background-color: rgba(232, 234, 237, 0.1);
}

dialog.inline {
	position: relative;
	display: inline-block;
	width: fit-content;
}

:where(button)[aria-invalid=true]+small {
	color: var(--pico-del-color);
}


/* sorter */
.sorting-class {
	background-color: var(--hit-sorting-background-color);
}

/* why? */
/*fieldset[role="group"] {
	margin-top: calc(var(--pico-spacing) * .25);
}*/

.m-top-0 {
	margin-top: 0;
}

.float-right {
	float: right;
}

.w100 {
	width: 100%;
}

.close-btn:before {
	display: inline-block;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'HoldIT';
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	padding-right: 0px;
	content: "\f00d";
}

.close-btn {
	height: 3em;
	width: 3em;
	/* position: absolute; */
	/* right: 20px; */
	/* z-index: 100; */
}

form > div.grid {
	grid-template-columns: 1fr auto;
}

avatar {
	background-color: var(--pico-code-background-color);
	border-radius: 1rem;
	box-shadow: 0 0 0 1px var(--pico-secondary-border);
	display: inline-block;
	flex-shrink: 0;
	line-height: 2;
	overflow: hidden;
	width: 32px;
	height: 32px;
	color: var(--pico-secondary);
	text-align: center;
	font-weight: 600;
	vertical-align: middle;
}