/* ---------------------------------------------------------------------------
   Obavijesti i održavanje - trake, animacije i prigodne teme.

   Sve je čisti CSS bez inline stilova jer ekran za prijavu ima strogi CSP
   (style-src 'self'), pa se ova datoteka učitava i tamo. Broj <i> elemenata
   koje ispisuje Announcement::render_effects() mora odgovarati nth-child
   pravilima niže ($FX_PARTICLES).
   --------------------------------------------------------------------------- */

/* ======================= 1. Trake s porukom ============================== */

/* Widget "OBAVIJESTI" na nadzornoj ploči. .widget_body je flex+centriran (za
   Google Charts tablice), pa se za popis kartica mora vratiti na normalan tok. */
.ann-widget .widget_body.ann-board {
	display: block;
	align-items: stretch;
	justify-content: flex-start;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px;
	box-sizing: border-box;
	text-align: left;
	background: #fbfbfc;
	}

/* Kartica obavijesti. Naglasak (rub + naslov + bljesak) ide kroz --ann-accent,
   koji se po potrebi prebriše inline vrijednošću iz baze. */
.ann-card {
	--ann-accent: #2f6f9f;
	position: relative;
	margin: 0 0 10px;
	padding: 11px 13px;
	border-radius: 3px;
	border-left: 4px solid var(--ann-accent);
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
	color: #333;
	text-align: left;
	}

.ann-card.ann-motd     { --ann-accent: #2f6f9f; }
.ann-card.ann-info     { --ann-accent: #c07a1a; }
.ann-card.ann-greeting { --ann-accent: #7a4fa3; }

	.ann-card .ann-card-date {
		margin-bottom: 2px;
		font-size: 11px;
		color: #9aa4ad;
		}

		/* Kratka oznaka uz datum (izvješće: "Nepročitano", jer tamo kartica ne pulsira). */
		.ann-card .ann-card-date .ann-card-tag {
			margin-left: 6px;
			padding: 1px 5px;
			border-radius: 2px;
			background: var(--ann-accent);
			color: #fff;
			font-size: 9px;
			text-transform: uppercase;
			letter-spacing: .4px;
			}

	.ann-card .ann-card-head {
		margin-bottom: 6px;
		font-size: 13px;
		font-weight: bold;
		line-height: 17px;
		color: var(--ann-accent);
		}

	.ann-card .ann-card-body {
		font-size: 12px;
		line-height: 18px;
		color: #444;
		}

		.ann-card .ann-card-body p  { margin: 0 0 7px; }
		.ann-card .ann-card-body p:last-child { margin-bottom: 0; }
		.ann-card .ann-card-body ul,
		.ann-card .ann-card-body ol { margin: 0 0 7px 18px; padding: 0; }
		.ann-card .ann-card-body li { margin: 0 0 3px; list-style: revert; }
		.ann-card .ann-card-body a  { color: #1d6fa5; text-decoration: underline; }
		.ann-card .ann-card-body a:hover { color: #14496d; }
		.ann-card .ann-card-body hr { border: 0; border-top: 1px solid #e4e4e4; margin: 8px 0; }
		/* Slika iz editora: nikad šira od kartice, inače razvuče widget od 380px. */
		.ann-card .ann-card-body img { max-width: 100%; height: auto; display: block; margin: 8px 0; }

	.ann-card .ann-card-foot {
		margin-top: 8px;
		padding-top: 7px;
		border-top: 1px solid #eee;
		font-size: 11px;
		color: #888;
		}

/* Nepotvrđena obavijest: diskretan puls u boji naglaska. Namjerno spor i blag -
   treba privući pogled, ne treperiti. */
.ann-card-new {
	animation: ann-bloom 2.8s ease-in-out infinite;
	}

@keyframes ann-bloom {
	0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
	50%      { box-shadow: 0 1px 3px rgba(0, 0, 0, .16), 0 0 11px 1px var(--ann-accent); }
	}

@media (prefers-reduced-motion: reduce) {
	.ann-card-new { animation: none; box-shadow: 0 0 0 1px var(--ann-accent), 0 1px 3px rgba(0, 0, 0, .16); }
	}

.ann-confirm {
	display: inline-block;
	margin-top: 9px;
	padding: 3px 10px;
	border-radius: 3px;
	background: var(--ann-accent);
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-decoration: none;
	cursor: pointer;
	}

	.ann-confirm:hover { opacity: .85; text-decoration: none; color: #fff; }

.ann-all {
	display: block;
	margin: 2px 0 4px;
	padding: 6px 0;
	font-size: 11px;
	color: #6f8ea5;
	text-align: center;
	text-decoration: none;
	}

	.ann-all:hover { color: #2f6f9f; text-decoration: underline; }

.ann-empty {
	margin: 0;
	padding: 18px 4px;
	font-size: 12px;
	color: #999;
	text-align: center;
	font-style: italic;
	}

/* Cijeli popis (/obavijesti/sve) - šire kartice za ugodno čitanje. */
.ann-list-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 18px 20px 40px;
	}

	.ann-list-page h1 {
		margin: 0 0 4px;
		font-size: 19px;
		color: #33484f;
		}

	.ann-list-page .ann-list-sub {
		margin: 0 0 20px;
		font-size: 12px;
		color: #8b969d;
		}

	.ann-list-page .ann-card { padding: 15px 18px; margin-bottom: 13px; }
	.ann-list-page .ann-card .ann-card-head { font-size: 15px; line-height: 20px; }
	.ann-list-page .ann-card .ann-card-body { font-size: 13px; line-height: 20px; }

/* Pregled obogaćenog teksta u slave formi (read mod). */
.richtext_view {
	float: left;
	width: 100%;
	box-sizing: border-box;
	margin: 2px 0 6px;
	padding: 9px 11px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	background: #fcfcfc;
	font-size: 12px;
	line-height: 18px;
	color: #444;
	}

	.richtext_view p  { margin: 0 0 7px; }
	.richtext_view ul,
	.richtext_view ol { margin: 0 0 7px 18px; }
	.richtext_view li { list-style: revert; }
	.richtext_view a  { color: #1d6fa5; text-decoration: underline; }

/* ---------------------- Trumbowyg unutar slave forme ---------------------- *
   Obrazac slaže fieldsete u stupce od 27%, a unutar njih natpis 35% + polje 62%.
   Editor je tako na prijenosniku (1366 px) dobivao ~210 px: alatna traka se lomila
   u pet redova, padajući izbornik (do 300 px) stršao je izvan okvira, a prozorčić
   "Dodaj poveznicu" (520 px) završavao je izvan vidljivog dijela stranice.

   Zato: obogaćeni tekst ide u vlastiti fieldset preko cijele širine, natpis iznad
   editora, a prozorčić se sidri na PROZOR, ne na editor.
 * -------------------------------------------------------------------------- */
.trumbowyg-box { margin: 2px 0 8px; float: left; width: 100%; }

/* Fieldset s obogaćenim tekstom: puna širina, ispod stupaca.
   Širina se mora navesti izričito: <fieldset> je poseban element i "width: auto"
   mu daje shrink-to-fit, pa bi se stegnuo na širinu alatne trake. */
.singlerecord fieldset.wide_fieldset {
	float: none;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	margin-right: 0;
	}

/* Natpis iznad editora - u ćeliji od 35% ostane premalo mjesta. */
.widget_wrapper_richtext { display: block; }
	.widget_wrapper_richtext > label {
		display: block;
		width: auto;
		margin: 4px 0 2px;
		padding-top: 0;
		}

/* Padajući izbornik nikad uži od svojih gumba, ali ni širi od editora. */
.trumbowyg-dropdown { max-width: 300px; }

/* Prozorčić ("Dodaj poveznicu", "Umetni sliku") se sidri na prozor.
   Izvorno je position: absolute unutar .trumbowyg-box, a gornji rub računa preko
   $(window).scrollTop() - a ova aplikacija ne pomiče prozor nego #main, pa je
   izračun uvijek 0 i prozorčić je znao ispasti izvan ekrana, bez načina da se do
   njega dođe. Fiksno usredinjen ne ovisi ni o jednom pomicanju. */
.trumbowyg-modal {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 520px !important;
	max-width: calc(100vw - 24px) !important;
	height: auto !important;
	max-height: calc(100vh - 24px) !important;
	overflow: auto !important;
	z-index: 10051;
	}

	.trumbowyg-modal-box {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		}

/* Zastor preko cijelog prozora: dok je prozorčić otvoren, forma iza njega ne prima
   klikove (prije je pokrivao samo editor, a prozorčić je bio drugdje na ekranu). */
.trumbowyg-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 10050;
	}

/* Široka traka iznad forme za prijavu i na stranici održavanja. */
.ann-bar {
	margin: 0 auto 18px;
	padding: 12px 16px;
	width: 360px;
	box-sizing: border-box;
	border-radius: 3px;
	border-left: 4px solid #2f6f9f;
	background: rgba(255, 255, 255, .92);
	color: #333;
	text-align: left;
	font-size: 12px;
	line-height: 18px;
	}

	.ann-bar strong {
		display: block;
		margin-bottom: 4px;
		font-size: 13px;
		color: #1d4f75;
		}

	.ann-bar p {
		margin: 0;
		color: #444;
		}

	/* Boje po vrsti - iste kao na karticama. Osnovna traka ostaje plava (MOTD). */
	.ann-bar.ann-info {
		border-left-color: #c07a1a;
		}

		.ann-bar.ann-info strong {
			color: #8d5a12;
			}

	.ann-bar.ann-greeting {
		border-left-color: #7a4fa3;
		}

		.ann-bar.ann-greeting strong {
			color: #5d3480;
			}

/* Napomena u formi za uređivanje: stvarni izračunati prozor prikaza. */
.ann-form-note {
	clear: both;
	margin: 6px 10px 10px;
	padding: 7px 10px;
	border-left: 3px solid #b8860b;
	background: #fdf6e3;
	color: #5c4a12;
	font-size: 11px;
	line-height: 17px;
	}

	.ann-form-note-ok {
		border-left-color: #3f7d3f;
		background: #eef7ee;
		color: #2c552c;
		}

	.ann-form-note-warn {
		border-left-color: #c00;
		background: #fdeeee;
		color: #7a1a1a;
		}

/* Prekidač animacija - diskretno, dolje desno, iznad sloja s česticama. */
.ann-fx-toggle {
	position: fixed;
	right: 10px;
	bottom: 8px;
	z-index: 10001;
	padding: 2px 7px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 10px;
	line-height: 15px;
	text-decoration: none;
	opacity: .45;
	}

	.ann-fx-toggle:hover {
		opacity: 1;
		text-decoration: none;
		}

/* ======================= 2. Stranica održavanja ========================== */

body.ann-page {
	background: #2b3a44;
	margin: 0;
	padding: 0;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

.ann-maint {
	position: relative;
	z-index: 2;
	width: 520px;
	max-width: 88%;
	margin: 12vh auto 0;
	padding: 28px 32px 32px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
	text-align: center;
	color: #333;
	}

	.ann-maint .ann-logo {
		margin-bottom: 18px;
		}

	.ann-maint h1 {
		margin: 0 0 12px;
		font-size: 20px;
		color: #1d4f75;
		}

	.ann-maint p {
		margin: 0 0 10px;
		font-size: 13px;
		line-height: 20px;
		color: #444;
		}

	.ann-maint .ann-until {
		margin-top: 18px;
		padding-top: 14px;
		border-top: 1px solid #ddd;
		font-size: 12px;
		color: #777;
		}

	.ann-maint .ann-admin {
		display: inline-block;
		margin-top: 6px;
		font-size: 11px;
		color: #999;
		}

/* ======================= 3. Sloj s animacijom ============================ */

.ann-fx {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 9999;
	}

	/* Na prijavi i stranici održavanja puna jačina, u radnim ekranima diskretno. */
	body.ann-surface-app .ann-fx {
		opacity: .5;
		}

	.ann-fx i {
		position: absolute;
		display: block;
		}

/* Poštuj sistemsku postavku za smanjeno gibanje. */
@media (prefers-reduced-motion: reduce) {
	.ann-fx { display: none; }
	}

/* --- 3a. Snijeg ---------------------------------------------------------- */

/* Pahulja mora biti vidljiva i na svijetloj (prijava) i na tamnoj (održavanje) podlozi -
   otud blagi plavkasti obrub umjesto čistog bijelog kruga koji se na bijelom gubi. */
.ann-fx-snow i {
	top: -6vh;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0%, #eaf3ff 55%, #cfe0f2 100%);
	box-shadow: 0 0 0 1px rgba(90, 130, 175, .30), 0 1px 3px rgba(50, 80, 120, .30);
	animation-name: ann-fall-l;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}

.ann-fx-snow i:nth-child(2n)  { animation-name: ann-fall-r; }
.ann-fx-snow i:nth-child(3n)  { width: 5px; height: 5px; opacity: .75; }
.ann-fx-snow i:nth-child(5n)  { width: 11px; height: 11px; opacity: .9; }

.ann-fx-snow i:nth-child(1)  { left:  2%; animation-duration: 11s; animation-delay:  0s; }
.ann-fx-snow i:nth-child(2)  { left:  7%; animation-duration:  8s; animation-delay:  3s; }
.ann-fx-snow i:nth-child(3)  { left: 12%; animation-duration: 14s; animation-delay:  1s; }
.ann-fx-snow i:nth-child(4)  { left: 17%; animation-duration:  9s; animation-delay:  5s; }
.ann-fx-snow i:nth-child(5)  { left: 22%; animation-duration: 12s; animation-delay:  2s; }
.ann-fx-snow i:nth-child(6)  { left: 27%; animation-duration: 10s; animation-delay:  6s; }
.ann-fx-snow i:nth-child(7)  { left: 32%; animation-duration: 13s; animation-delay:  0s; }
.ann-fx-snow i:nth-child(8)  { left: 37%; animation-duration:  8s; animation-delay:  4s; }
.ann-fx-snow i:nth-child(9)  { left: 42%; animation-duration: 15s; animation-delay:  2s; }
.ann-fx-snow i:nth-child(10) { left: 47%; animation-duration:  9s; animation-delay:  7s; }
.ann-fx-snow i:nth-child(11) { left: 52%; animation-duration: 11s; animation-delay:  1s; }
.ann-fx-snow i:nth-child(12) { left: 57%; animation-duration: 13s; animation-delay:  5s; }
.ann-fx-snow i:nth-child(13) { left: 62%; animation-duration:  8s; animation-delay:  3s; }
.ann-fx-snow i:nth-child(14) { left: 67%; animation-duration: 12s; animation-delay:  8s; }
.ann-fx-snow i:nth-child(15) { left: 72%; animation-duration: 10s; animation-delay:  0s; }
.ann-fx-snow i:nth-child(16) { left: 77%; animation-duration: 14s; animation-delay:  4s; }
.ann-fx-snow i:nth-child(17) { left: 82%; animation-duration:  9s; animation-delay:  2s; }
.ann-fx-snow i:nth-child(18) { left: 87%; animation-duration: 12s; animation-delay:  6s; }
.ann-fx-snow i:nth-child(19) { left: 92%; animation-duration: 10s; animation-delay:  1s; }
.ann-fx-snow i:nth-child(20) { left: 97%; animation-duration: 13s; animation-delay:  5s; }
.ann-fx-snow i:nth-child(21) { left:  4%; animation-duration: 16s; animation-delay:  9s; }
.ann-fx-snow i:nth-child(22) { left: 35%; animation-duration:  7s; animation-delay: 10s; }
.ann-fx-snow i:nth-child(23) { left: 65%; animation-duration: 16s; animation-delay:  3s; }
.ann-fx-snow i:nth-child(24) { left: 95%; animation-duration:  7s; animation-delay: 11s; }

@keyframes ann-fall-l {
	0%   { transform: translate3d(0, -6vh, 0) rotate(0deg);        opacity: 0; }
	8%   {                                                          opacity: .9; }
	92%  {                                                          opacity: .9; }
	100% { transform: translate3d(-4vw, 106vh, 0) rotate(320deg);  opacity: 0; }
	}

@keyframes ann-fall-r {
	0%   { transform: translate3d(0, -6vh, 0) rotate(0deg);        opacity: 0; }
	8%   {                                                          opacity: .9; }
	92%  {                                                          opacity: .9; }
	100% { transform: translate3d(5vw, 106vh, 0) rotate(-340deg);  opacity: 0; }
	}

/* --- 3b. Konfeti --------------------------------------------------------- */

.ann-fx-confetti i {
	top: -6vh;
	width: 8px;
	height: 13px;
	border-radius: 1px;
	background: #ef476f;
	animation-name: ann-fall-l;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}

.ann-fx-confetti i:nth-child(2n)   { animation-name: ann-fall-r; }
.ann-fx-confetti i:nth-child(5n+1) { background: #ffd166; }
.ann-fx-confetti i:nth-child(5n+2) { background: #06d6a0; }
.ann-fx-confetti i:nth-child(5n+3) { background: #118ab2; }
.ann-fx-confetti i:nth-child(5n+4) { background: #f78c6b; }
.ann-fx-confetti i:nth-child(3n)   { width: 6px; height: 9px; border-radius: 50%; }

.ann-fx-confetti i:nth-child(1)  { left:  3%; animation-duration:  7s; animation-delay:  0s; }
.ann-fx-confetti i:nth-child(2)  { left:  8%; animation-duration:  9s; animation-delay:  2s; }
.ann-fx-confetti i:nth-child(3)  { left: 13%; animation-duration:  6s; animation-delay:  4s; }
.ann-fx-confetti i:nth-child(4)  { left: 18%; animation-duration: 10s; animation-delay:  1s; }
.ann-fx-confetti i:nth-child(5)  { left: 23%; animation-duration:  8s; animation-delay:  5s; }
.ann-fx-confetti i:nth-child(6)  { left: 28%; animation-duration:  7s; animation-delay:  3s; }
.ann-fx-confetti i:nth-child(7)  { left: 33%; animation-duration: 11s; animation-delay:  0s; }
.ann-fx-confetti i:nth-child(8)  { left: 38%; animation-duration:  6s; animation-delay:  6s; }
.ann-fx-confetti i:nth-child(9)  { left: 43%; animation-duration:  9s; animation-delay:  2s; }
.ann-fx-confetti i:nth-child(10) { left: 48%; animation-duration:  8s; animation-delay:  4s; }
.ann-fx-confetti i:nth-child(11) { left: 53%; animation-duration: 10s; animation-delay:  1s; }
.ann-fx-confetti i:nth-child(12) { left: 58%; animation-duration:  7s; animation-delay:  7s; }
.ann-fx-confetti i:nth-child(13) { left: 63%; animation-duration:  9s; animation-delay:  3s; }
.ann-fx-confetti i:nth-child(14) { left: 68%; animation-duration:  6s; animation-delay:  5s; }
.ann-fx-confetti i:nth-child(15) { left: 73%; animation-duration: 11s; animation-delay:  0s; }
.ann-fx-confetti i:nth-child(16) { left: 78%; animation-duration:  8s; animation-delay:  2s; }
.ann-fx-confetti i:nth-child(17) { left: 83%; animation-duration:  7s; animation-delay:  6s; }
.ann-fx-confetti i:nth-child(18) { left: 88%; animation-duration: 10s; animation-delay:  4s; }
.ann-fx-confetti i:nth-child(19) { left: 93%; animation-duration:  9s; animation-delay:  1s; }
.ann-fx-confetti i:nth-child(20) { left: 98%; animation-duration:  6s; animation-delay:  8s; }
.ann-fx-confetti i:nth-child(21) { left: 15%; animation-duration: 12s; animation-delay:  9s; }
.ann-fx-confetti i:nth-child(22) { left: 45%; animation-duration:  5s; animation-delay: 10s; }
.ann-fx-confetti i:nth-child(23) { left: 70%; animation-duration: 12s; animation-delay:  7s; }
.ann-fx-confetti i:nth-child(24) { left: 90%; animation-duration:  5s; animation-delay: 11s; }

/* --- 3c. Uskrsna jaja ---------------------------------------------------- */

.ann-fx-eggs i {
	top: -8vh;
	width: 16px;
	height: 21px;
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background:
		repeating-linear-gradient(115deg,
			rgba(255, 255, 255, .75) 0px, rgba(255, 255, 255, .75) 3px,
			rgba(255, 255, 255,  0)  3px, rgba(255, 255, 255,  0)  7px),
		#f4a6c0;
	box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .12);
	animation-name: ann-wobble-l;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}

.ann-fx-eggs i:nth-child(2n)   { animation-name: ann-wobble-r; }
.ann-fx-eggs i:nth-child(4n+1) { background-color: #a8dda8; }
.ann-fx-eggs i:nth-child(4n+2) { background-color: #ffe08a; }
.ann-fx-eggs i:nth-child(4n+3) { background-color: #9ec9ef; }
.ann-fx-eggs i:nth-child(4n)   { background-color: #f4a6c0; }

.ann-fx-eggs i:nth-child(1)  { left:  4%; animation-duration: 12s; animation-delay:  0s; }
.ann-fx-eggs i:nth-child(2)  { left: 11%; animation-duration:  9s; animation-delay:  4s; }
.ann-fx-eggs i:nth-child(3)  { left: 18%; animation-duration: 14s; animation-delay:  2s; }
.ann-fx-eggs i:nth-child(4)  { left: 25%; animation-duration: 10s; animation-delay:  6s; }
.ann-fx-eggs i:nth-child(5)  { left: 32%; animation-duration: 13s; animation-delay:  1s; }
.ann-fx-eggs i:nth-child(6)  { left: 39%; animation-duration:  9s; animation-delay:  8s; }
.ann-fx-eggs i:nth-child(7)  { left: 46%; animation-duration: 15s; animation-delay:  3s; }
.ann-fx-eggs i:nth-child(8)  { left: 53%; animation-duration: 11s; animation-delay:  5s; }
.ann-fx-eggs i:nth-child(9)  { left: 60%; animation-duration: 12s; animation-delay:  0s; }
.ann-fx-eggs i:nth-child(10) { left: 67%; animation-duration:  9s; animation-delay:  7s; }
.ann-fx-eggs i:nth-child(11) { left: 74%; animation-duration: 14s; animation-delay:  2s; }
.ann-fx-eggs i:nth-child(12) { left: 81%; animation-duration: 10s; animation-delay:  9s; }
.ann-fx-eggs i:nth-child(13) { left: 88%; animation-duration: 13s; animation-delay:  4s; }
.ann-fx-eggs i:nth-child(14) { left: 95%; animation-duration: 11s; animation-delay:  6s; }
.ann-fx-eggs i:nth-child(15) { left: 22%; animation-duration: 16s; animation-delay: 10s; }
.ann-fx-eggs i:nth-child(16) { left: 70%; animation-duration: 16s; animation-delay: 12s; }

@keyframes ann-wobble-l {
	0%   { transform: translate3d(0, -8vh, 0) rotate(-14deg);     opacity: 0; }
	8%   {                                                         opacity: 1; }
	50%  { transform: translate3d(-3vw, 50vh, 0) rotate(16deg);   opacity: 1; }
	92%  {                                                         opacity: 1; }
	100% { transform: translate3d(-1vw, 108vh, 0) rotate(-10deg); opacity: 0; }
	}

@keyframes ann-wobble-r {
	0%   { transform: translate3d(0, -8vh, 0) rotate(12deg);      opacity: 0; }
	8%   {                                                         opacity: 1; }
	50%  { transform: translate3d(3vw, 50vh, 0) rotate(-18deg);   opacity: 1; }
	92%  {                                                         opacity: 1; }
	100% { transform: translate3d(1vw, 108vh, 0) rotate(14deg);   opacity: 0; }
	}

/* --- 3d. Vatromet -------------------------------------------------------- */

/* Tri sloja po raketi, svi na istom ciklusu - pseudo-elementi preuzimaju kašnjenje
   s <i> preko `animation-delay: inherit`:
     <i>        uzlet s repom, pa nestane
     <i>::after bljesak u trenutku rasprsnuća
     <i>::before sprej iskri koji se širi, pada pod gravitacijom, smanjuje se i gasi
   Iskre su jedna box-shadow lista koja se interpolira među ključnim kadrovima -
   zato se istovremeno šire I smanjuju (spread pada s +2.5px na -1px). Gašenje ide
   preko `opacity`, ne preko alfe u svakoj sjeni, pa je lista upola kraća.
   Boja rakete dolazi iz `color`; namjerno zasićene boje srednjeg tona jer se moraju
   vidjeti i na svijetlom ekranu za prijavu, ne samo na tamnoj stranici održavanja. */

.ann-fx-fireworks i {
	width: 3px;
	height: 3px;
	margin: -1.5px 0 0 -1.5px;
	border-radius: 50%;
	background: currentColor;
	animation: ann-shell 2.6s ease-out infinite;
	}

	.ann-fx-fireworks i::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 3px;
		height: 3px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		animation: ann-spray 2.6s cubic-bezier(.04, .75, .22, 1) infinite;
		animation-delay: inherit;
		}

	.ann-fx-fireworks i::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: radial-gradient(circle, #fff 0%, currentColor 34%, rgba(255, 255, 255, 0) 70%);
		opacity: 0;
		animation: ann-flash 2.6s ease-out infinite;
		animation-delay: inherit;
		}

/* Kašnjenja su raspoređena po cijelom ciklusu (2.6s / 6) da nebo nikad ne bude prazno. */
.ann-fx-fireworks i:nth-child(1) { color: #e8a33d; top: 24%; left: 15%; animation-delay:    0s; }
.ann-fx-fireworks i:nth-child(2) { color: #e63950; top: 37%; left: 79%; animation-delay:  .43s; }
.ann-fx-fireworks i:nth-child(3) { color: #17b978; top: 17%; left: 47%; animation-delay:  .87s; }
.ann-fx-fireworks i:nth-child(4) { color: #2b8fd8; top: 52%; left: 28%; animation-delay:  1.3s; }
.ann-fx-fireworks i:nth-child(5) { color: #9b5de5; top: 29%; left: 64%; animation-delay: 1.73s; }
.ann-fx-fireworks i:nth-child(6) { color: #e8a33d; top: 58%; left: 88%; animation-delay: 2.17s; }

/* Uzlet: točka se diže odozdo s kratkim repom i nestane u trenutku bljeska.
   PAZI: raketa se NE smije gasiti preko `opacity` - opacity roditelja gasi i
   ::before i ::after, pa bi nestali i sprej i bljesak. Gasi se bojom pozadine i
   negativnim spreadom repa. Translacija ostaje na 0 nakon rasprsnuća, tako da
   sprej krene točno odande gdje je raketa stala. */
@keyframes ann-shell {
	0%   { transform: translateY(17vh); background-color: transparent;
	       box-shadow: 0 7px 4px -3px currentColor, 0 14px 7px -3px currentColor; }
	5%   { background-color: currentColor;
	       box-shadow: 0 7px 4px -1px currentColor, 0 14px 7px -2px currentColor; }
	17%  { transform: translateY(1.5vh); background-color: currentColor;
	       box-shadow: 0 5px 4px -1px currentColor, 0 11px 7px -2px currentColor; }
	21%  { transform: translateY(0); background-color: transparent;
	       box-shadow: 0 0 0 -3px currentColor, 0 0 0 -3px currentColor; }
	100% { transform: translateY(0); background-color: transparent;
	       box-shadow: 0 0 0 -3px currentColor, 0 0 0 -3px currentColor; }
	}

@keyframes ann-flash {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
	19%  { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
	24%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
	44%  { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
	}

@keyframes ann-spray {
	0% { opacity: 0; box-shadow:
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor; }
	20% { opacity: 0; box-shadow:
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			-0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor,
			0px 0px 0px -2.0px currentColor; }
	25% { opacity: 1; box-shadow:
			15px 1px 0px 2.5px currentColor,
			9px 1px 0px 2.5px currentColor,
			12px 7px 0px 2.5px currentColor,
			5px 5px 0px 2.5px currentColor,
			11px 14px 0px 2.5px currentColor,
			3px 10px 0px 2.5px currentColor,
			3px 14px 0px 2.5px currentColor,
			-1px 8px 0px 2.5px currentColor,
			-7px 14px 0px 2.5px currentColor,
			-5px 8px 0px 2.5px currentColor,
			-11px 8px 0px 2.5px currentColor,
			-6px 4px 0px 2.5px currentColor,
			-17px 2px 0px 2.5px currentColor,
			-10px 0px 0px 2.5px currentColor,
			-14px -4px 0px 2.5px currentColor,
			-8px -3px 0px 2.5px currentColor,
			-11px -11px 0px 2.5px currentColor,
			-5px -6px 0px 2.5px currentColor,
			-5px -16px 0px 2.5px currentColor,
			-2px -10px 0px 2.5px currentColor,
			3px -14px 0px 2.5px currentColor,
			3px -7px 0px 2.5px currentColor,
			7px -14px 0px 2.5px currentColor,
			7px -6px 0px 2.5px currentColor,
			13px -7px 0px 2.5px currentColor,
			8px -1px 0px 2.5px currentColor; }
	45% { opacity: 1; box-shadow:
			67px 8px 1px 1.5px currentColor,
			38px 9px 1px 1.5px currentColor,
			51px 33px 1px 1.5px currentColor,
			20px 27px 1px 1.5px currentColor,
			47px 64px 1px 1.5px currentColor,
			12px 46px 1px 1.5px currentColor,
			15px 63px 1px 1.5px currentColor,
			-5px 38px 1px 1.5px currentColor,
			-32px 68px 1px 1.5px currentColor,
			-22px 39px 1px 1.5px currentColor,
			-47px 41px 1px 1.5px currentColor,
			-25px 20px 1px 1.5px currentColor,
			-74px 13px 1px 1.5px currentColor,
			-46px 4px 1px 1.5px currentColor,
			-61px -16px 1px 1.5px currentColor,
			-34px -11px 1px 1.5px currentColor,
			-50px -44px 1px 1.5px currentColor,
			-22px -22px 1px 1.5px currentColor,
			-20px -67px 1px 1.5px currentColor,
			-7px -39px 1px 1.5px currentColor,
			14px -58px 1px 1.5px currentColor,
			12px -26px 1px 1.5px currentColor,
			32px -57px 1px 1.5px currentColor,
			31px -21px 1px 1.5px currentColor,
			57px -29px 1px 1.5px currentColor,
			36px -1px 1px 1.5px currentColor; }
	72% { opacity: .8; box-shadow:
			97px 20px 2px 0.5px currentColor,
			56px 21px 2px 0.5px currentColor,
			74px 55px 2px 0.5px currentColor,
			30px 47px 2px 0.5px currentColor,
			68px 101px 2px 0.5px currentColor,
			17px 75px 2px 0.5px currentColor,
			22px 100px 2px 0.5px currentColor,
			-7px 63px 2px 0.5px currentColor,
			-47px 106px 2px 0.5px currentColor,
			-32px 64px 2px 0.5px currentColor,
			-68px 68px 2px 0.5px currentColor,
			-36px 36px 2px 0.5px currentColor,
			-108px 26px 2px 0.5px currentColor,
			-66px 14px 2px 0.5px currentColor,
			-89px -16px 2px 0.5px currentColor,
			-49px -8px 2px 0.5px currentColor,
			-73px -57px 2px 0.5px currentColor,
			-32px -24px 2px 0.5px currentColor,
			-29px -90px 2px 0.5px currentColor,
			-11px -48px 2px 0.5px currentColor,
			20px -76px 2px 0.5px currentColor,
			17px -30px 2px 0.5px currentColor,
			46px -75px 2px 0.5px currentColor,
			46px -23px 2px 0.5px currentColor,
			83px -34px 2px 0.5px currentColor,
			52px 7px 2px 0.5px currentColor; }
	100% { opacity: 0; box-shadow:
			108px 34px 5px -1.0px currentColor,
			62px 35px 5px -1.0px currentColor,
			83px 73px 5px -1.0px currentColor,
			33px 63px 5px -1.0px currentColor,
			75px 124px 5px -1.0px currentColor,
			19px 95px 5px -1.0px currentColor,
			24px 122px 5px -1.0px currentColor,
			-8px 82px 5px -1.0px currentColor,
			-52px 129px 5px -1.0px currentColor,
			-36px 82px 5px -1.0px currentColor,
			-76px 87px 5px -1.0px currentColor,
			-40px 52px 5px -1.0px currentColor,
			-120px 40px 5px -1.0px currentColor,
			-73px 27px 5px -1.0px currentColor,
			-99px -6px 5px -1.0px currentColor,
			-54px 2px 5px -1.0px currentColor,
			-81px -51px 5px -1.0px currentColor,
			-35px -15px 5px -1.0px currentColor,
			-32px -88px 5px -1.0px currentColor,
			-12px -42px 5px -1.0px currentColor,
			23px -73px 5px -1.0px currentColor,
			19px -22px 5px -1.0px currentColor,
			51px -72px 5px -1.0px currentColor,
			51px -14px 5px -1.0px currentColor,
			92px -26px 5px -1.0px currentColor,
			58px 19px 5px -1.0px currentColor; }
	}

/* ======================= 4. Prigodne teme ================================ */

/* Namjerno suzdržano: tanka traka na vrhu prozora, boja trake s porukom i
   naglasak na rubu panela za prijavu. Ništa što mijenja raspored ili
   čitljivost radnih ekrana. */

body[class*="ann-theme-"]::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 10000;
	pointer-events: none;
	}

body.ann-theme-christmas::before { background: linear-gradient(90deg, #b3121b 0%, #0f7b3f 25%, #b3121b 50%, #0f7b3f 75%, #b3121b 100%); }
body.ann-theme-newyear::before   { background: linear-gradient(90deg, #8a6d1f 0%, #e8c766 35%, #fff3cf 50%, #e8c766 65%, #8a6d1f 100%); }
body.ann-theme-easter::before    { background: linear-gradient(90deg, #f4a6c0 0%, #ffe08a 33%, #a8dda8 66%, #9ec9ef 100%); }
body.ann-theme-spring::before    { background: linear-gradient(90deg, #4f9d4f 0%, #a8dda8 50%, #4f9d4f 100%); }

body.ann-theme-christmas .ann-card.ann-greeting { --ann-accent: #a5121a; }
body.ann-theme-newyear   .ann-card.ann-greeting { --ann-accent: #8a6d1f; }
body.ann-theme-easter    .ann-card.ann-greeting { --ann-accent: #7f9c5a; }
body.ann-theme-spring    .ann-card.ann-greeting { --ann-accent: #3f7d3f; }

body.ann-theme-christmas .ann-bar { border-left-color: #a5121a; }
body.ann-theme-newyear   .ann-bar { border-left-color: #8a6d1f; }
body.ann-theme-easter    .ann-bar { border-left-color: #7f9c5a; }
body.ann-theme-spring    .ann-bar { border-left-color: #3f7d3f; }

body.ann-theme-christmas #content_login { box-shadow: 0 0 0 1px #a5121a; }
body.ann-theme-newyear   #content_login { box-shadow: 0 0 0 1px #b99a3d; }
body.ann-theme-easter    #content_login { box-shadow: 0 0 0 1px #cf9fbb; }
body.ann-theme-spring    #content_login { box-shadow: 0 0 0 1px #6fae6f; }