Toast obaveštenja: slaganje više toastova, ujednačen mobilni prelom sa flash porukama

window.ntechToast je crtao svaki novi toast na istoj fiksnoj poziciji pa
su se preklapali kad se više njih pojavi zaredom (npr. auto-snimanje
više polja). Sad se dodaju u zajednički kontejner koji ih slaže jedan
iznad drugog preko flex-a.

Flash poruke su menjale raspored na 480px dok ostatak aplikacije koristi
768px kao mobilni prelom — ujednačeno na 768px.

web/static/css/main.css

@@ -862,6 +862,32 @@ select {
 .toast-greska { background: #fef2f2; color: #dc2626; border: 0.5px solid #fecaca; }
 .toast-uspeh { background: #f0fdf4; color: #15803d; border: 0.5px solid #86efac; }
 .toast.nestaje { animation: toastOut 0.3s ease forwards; }
+
+/* kontejner za više toastova (window.ntechToast) — slaže ih jedan iznad drugog
+   preko flex-a umesto da se svi iscrtaju na istoj fiksnoj poziciji */
+#ntech-toast-kontejner {
+    position: fixed;
+    bottom: 24px;
+    right: 16px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: 10px;
+}
+.toast.toast-u-nizu {
+    position: static;
+}
+@media (max-width: 768px) {
+    #ntech-toast-kontejner {
+        right: 12px;
+        left: 12px;
+        align-items: stretch;
+    }
+    .toast.toast-u-nizu {
+        max-width: none;
+    }
+}
 @keyframes toastIn {
     from { opacity: 0; transform: translateY(12px); }
     to { opacity: 1; transform: translateY(0); }
@@ -1525,7 +1551,7 @@ select {
 
 .flash-zatvori:hover { opacity: 1; }
 
-@media (max-width: 480px) {
+@media (max-width: 768px) {
     .flash-toast {
         top: auto;
         bottom: 20px;