From e2bb9e40363c09edc1f1d8dc5bb39c6c5dbea7df Mon Sep 17 00:00:00 2001
From: Kowalski <kmet.p@seznam.cz>
Date: Mon, 12 Oct 2026 16:48:04 +0200
Subject: [PATCH] =?UTF-8?q?Hl=C3=A1=C5=A1en=C3=AD=20-=20alerty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Presentation/@layout.latte | 16 +++++++++++++++-
 www/css/base.css               | 34 +++++++++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/app/Presentation/@layout.latte b/app/Presentation/@layout.latte
index b4abc38..3f7d290 100644
--- a/app/Presentation/@layout.latte
+++ b/app/Presentation/@layout.latte
@@ -35,7 +35,21 @@
 </head>
 
 <body>
-	<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
+	<div class="flash-obal" n:if="$flashes">
+		<div n:foreach="$flashes as $flash" n:class="alert, alert-dismissible, fade, show, flash, $flash->type" role="alert">
+			{$flash->message}
+			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Zavřít"></button>
+		</div>
+		<script>
+			document.querySelectorAll('.flash').forEach(function (el) {
+				window.setTimeout(function () {
+					if (el.isConnected) {
+						bootstrap.Alert.getOrCreateInstance(el).close();
+					}
+				}, 4000);
+			});
+		</script>
+	</div>
 
 	{* navigační panel *}
 	<nav id="menu" class="navbar navbar-expand-lg navbar-light mb-0 pb-0" style="background-color: #e3f2fd;">            
diff --git a/www/css/base.css b/www/css/base.css
index 018a264..e127c1f 100644
--- a/www/css/base.css
+++ b/www/css/base.css
@@ -964,18 +964,42 @@ body:has(#map[data-max]) {
     font-weight: 800;
 }
 
+.flash-obal {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 2000;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.5rem;
+    width: min(22rem, calc(100vw - 2rem));
+    pointer-events: none;
+}
+
 .flash {
+    width: 100%;
     margin: 0;
-    padding: 0.7rem 1rem;
-    background: #e3f2fd;
-    color: #1d4f91;
+    padding: 0.85rem 2.5rem 0.85rem 1rem;
+    background: #d1e7dd;
+    color: #0f5132;
+    border: 1px solid #a3cfbb;
+    border-radius: 0.9rem;
+    box-shadow: 0 10px 28px rgba(15, 81, 50, 0.18);
     font-weight: 700;
+    pointer-events: auto;
+}
+
+.flash .btn-close {
+    padding: 0.9rem;
 }
 
 .flash.error,
 .flash.warning {
-    background: #fde8ea;
-    color: #8d1d2c;
+    background: #f8d7da;
+    color: #842029;
+    border-color: #f1aeb5;
+    box-shadow: 0 10px 28px rgba(132, 32, 41, 0.16);
 }
 
 @media (max-width: 900px) {