/*
body {

font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
font-weight: normal;
}
 */
body {
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
}

/* Headings (h1-h6) override Bulma default */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
}
.card.processing{
	opacity: 0.3;
}
.hover-animate {
	transition: all 0.3s ease-in-out;
}

.hover-animate:hover {
	/*transform: scale(1.05);*/
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


.card-equal-height {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.card-equal-height .card-footer {
	margin-top: auto;
}

/* Pulsing time */
.pulse {
	animation: pulse-scale 0.3s ease;
}

@keyframes pulse-scale {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}


/* Default: mobile */
.navbar-menu.is-active {
	position: absolute;
	width: 100%;  /* full width on small screens */
}

/* Desktop and larger */
@media screen and (min-width: 1024px) {
	.navbar-menu.is-active {
		width: 10%;  /* narrow on desktop */
	}
}

/* fixed height for bulma card content */
.alarm-title {
	height: 10vh;
	overflow: hidden; 

}.message{
	height: 12vh;
	/*  overflow: hidden;    */
	overflow-y: auto;      /* scroll vertically when overflowing */
	overflow-x: hidden;    /* optional: hide horizontal scroll */
}
.ticket-data{
	height: 6vh;
}
.icinga-data{
	height: 6vh;
}


/* Spinners  */
/*  for loading*/
.spinner {
	opacity:0;
	transition-delay: 3s;
}
.indicator{
	opacity:1;
	transition-delay: 3s;
}

.indicator{
	opacity:1;
	transition-delay: 3s;
}
.htmx-request.indicator{
	opacity:0;
	transition-delay: 3s;
}
.htmx-request.spinner{
	opacity:1;
	transition-delay: 3s;
}

/* turn spinners green */
.filter-green{
	filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}



/* Transition API */
/* doesnt work yet */

@view-transition {
	navigation: auto;
}

/* modal should fit in screen */
.modal-card {
	max-width: 90%;   
	/*	    width: 400px;     
	}

	/* funky flask for configuration */
	/* just some animation for settings */    
	.funky_flash {
		/* Run fadeInDown first, then fadeOutUp after 3s */
		animation: 
		fadeInUp 0.5s ease,       /* enter animation */
		fadeOutDown 0.5s ease 3s forwards; /* exit animation after 3s */
	}


	pre code {
		display: block;
		background-color: #f5f5f5;
		padding: 10px;
		border-radius: 5px;
		overflow-x: auto;
	}

}
/* Spinner animation */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}