diff --git a/web/static/css/main.css b/web/static/css/main.css
index f2adef1..7e4bac4 100644
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -737,6 +737,16 @@ select {
     gap: 18px;
 }
 
+/* layout utili — struktura bez razmaka; gap/margin se daju po instanci */
+.kolona {
+    display: flex;
+    flex-direction: column;
+}
+.red-izmedju {
+    display: flex;
+    justify-content: space-between;
+}
+
 /* grid raspored polja — osnovne (desktop) vrednosti;
    responsivni override na uže ekrane je niže u media bloku */
 .forma-grid-2 {
diff --git a/web/templates/stranice/admin_dozvole.html b/web/templates/stranice/admin_dozvole.html
index fa9faad..6ea4ef9 100644
--- a/web/templates/stranice/admin_dozvole.html
+++ b/web/templates/stranice/admin_dozvole.html
@@ -34,7 +34,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:20px;">
+<div class="kolona" style="gap:20px;">
 
     <!-- matrica dozvola — editabilna forma -->
     <div class="kartica animiraj" style="padding:0;overflow:hidden;">
diff --git a/web/templates/stranice/admin_korisnici.html b/web/templates/stranice/admin_korisnici.html
index 48a9002..eae66c0 100644
--- a/web/templates/stranice/admin_korisnici.html
+++ b/web/templates/stranice/admin_korisnici.html
@@ -22,7 +22,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     <!-- lista korisnika -->
     <div class="kartica animiraj" style="padding:0;overflow:hidden;">
diff --git a/web/templates/stranice/dobavljac_forma.html b/web/templates/stranice/dobavljac_forma.html
index 1c7c554..c0efa89 100644
--- a/web/templates/stranice/dobavljac_forma.html
+++ b/web/templates/stranice/dobavljac_forma.html
@@ -29,7 +29,7 @@
         {{end}}
 
         <form method="POST" action="{{if .Izmena}}/dobavljaci/izmeni/{{.Dobavljac.ID}}{{else}}/dobavljaci/novi{{end}}">
-            <div style="display:flex;flex-direction:column;gap:14px;">
+            <div class="kolona" style="gap:14px;">
 
                 <!-- naziv -->
                 <div>
diff --git a/web/templates/stranice/dobavljaci.html b/web/templates/stranice/dobavljaci.html
index 0df9323..97408ac 100644
--- a/web/templates/stranice/dobavljaci.html
+++ b/web/templates/stranice/dobavljaci.html
@@ -24,7 +24,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh poruka-animacija">Dobavljač je uspešno sačuvan.</div>
@@ -104,7 +104,7 @@
     <div class="dobavljaci-kartice">
         {{range .Dobavljaci}}
         <div class="kartica dobavljac-kartica animiraj">
-            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
+            <div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</span>
                 <div style="display:flex;gap:8px;flex-shrink:0;">
                     <a href="/dobavljaci/izmeni/{{.ID}}" class="btn-primarno-malo">
@@ -120,7 +120,7 @@
                     {{end}}
                 </div>
             </div>
-            <div style="display:flex;flex-direction:column;gap:6px;">
+            <div class="kolona" style="gap:6px;">
                 {{if .KontaktOsoba}}
                 <div class="pomocni-tekst">
                     <span style="color:var(--tekst-glavni);font-weight:500;">Kontakt:</span> {{.KontaktOsoba}}
diff --git a/web/templates/stranice/izvestaji.html b/web/templates/stranice/izvestaji.html
index cba72c6..91eef8e 100644
--- a/web/templates/stranice/izvestaji.html
+++ b/web/templates/stranice/izvestaji.html
@@ -26,7 +26,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:20px;">
+<div class="kolona" style="gap:20px;">
 
     <!-- 1. mesečni prihod -->
     <div class="kartica izv-sekcija animiraj">
diff --git a/web/templates/stranice/kategorije.html b/web/templates/stranice/kategorije.html
index a0bf033..76be502 100644
--- a/web/templates/stranice/kategorije.html
+++ b/web/templates/stranice/kategorije.html
@@ -18,7 +18,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh poruka-animacija">Kategorija je uspešno sačuvana.</div>
@@ -40,7 +40,7 @@
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Nova kategorija</span>
         </div>
         <form method="POST" action="/magacin/kategorije/dodaj">
-            <div style="display:flex;flex-direction:column;gap:12px;">
+            <div class="kolona" style="gap:12px;">
                 <div>
                     <label class="polje-labela">
                         Naziv <span style="color:#dc2626;">*</span>
diff --git a/web/templates/stranice/klijent_forma.html b/web/templates/stranice/klijent_forma.html
index fe40843..a34817d 100644
--- a/web/templates/stranice/klijent_forma.html
+++ b/web/templates/stranice/klijent_forma.html
@@ -62,7 +62,7 @@
                 </div>
 
                 <!-- sekcija fizičko lice -->
-                <div id="sec-fizicko" style="display:flex;flex-direction:column;gap:12px;">
+                <div id="sec-fizicko" class="kolona" style="gap:12px;">
                     <div class="sekcija-naslov">Ime i prezime</div>
                     <div class="forma-grid-2">
                         <div>
diff --git a/web/templates/stranice/klijenti.html b/web/templates/stranice/klijenti.html
index 379b1bf..7e757f7 100644
--- a/web/templates/stranice/klijenti.html
+++ b/web/templates/stranice/klijenti.html
@@ -24,7 +24,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh poruka-animacija">Klijent je uspešno sačuvan.</div>
@@ -113,7 +113,7 @@
     <div class="klijenti-kartice">
         {{range .Klijenti}}
         <div class="kartica klijent-kartica animiraj">
-            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
+            <div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     {{if .NazivFirme}}
                     <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.NazivFirme}}</div>
@@ -138,7 +138,7 @@
                     {{end}}
                 </div>
             </div>
-            <div style="display:flex;flex-direction:column;gap:6px;">
+            <div class="kolona" style="gap:6px;">
                 {{if .Telefon}}
                 <div class="pomocni-tekst">
                     <span style="color:var(--tekst-glavni);font-weight:500;">Telefon:</span> {{.Telefon}}
diff --git a/web/templates/stranice/magacin.html b/web/templates/stranice/magacin.html
index f3732bd..e23407c 100644
--- a/web/templates/stranice/magacin.html
+++ b/web/templates/stranice/magacin.html
@@ -25,7 +25,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh">Artikal je uspešno sačuvan.</div>
@@ -48,7 +48,7 @@
     </div>
 
     <!-- pretraga i filteri -->
-    <form method="GET" action="/magacin" style="display:flex;flex-direction:column;gap:10px;">
+    <form method="GET" action="/magacin" class="kolona" style="gap:10px;">
         <input type="text" name="pretraga" value="{{.Filter.Pretraga}}"
             placeholder="Pretraži artikle..."
             style="width:100%;">
@@ -134,7 +134,7 @@
     <div class="magacin-kartice">
         {{range .Artikli}}
         <div class="kartica magacin-kartica animiraj">
-            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
+            <div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</div>
                     {{if .KategorijaNaziv}}
diff --git a/web/templates/stranice/magacin_forma.html b/web/templates/stranice/magacin_forma.html
index 041dd32..80db9af 100644
--- a/web/templates/stranice/magacin_forma.html
+++ b/web/templates/stranice/magacin_forma.html
@@ -29,7 +29,7 @@
         {{end}}
 
         <form method="POST" action="{{if .Izmena}}/magacin/izmeni/{{.Artikal.ID}}{{else}}/magacin/novi{{end}}">
-            <div style="display:flex;flex-direction:column;gap:14px;">
+            <div class="kolona" style="gap:14px;">
 
                 <!-- naziv -->
                 <div>
diff --git a/web/templates/stranice/nabavka_detalji.html b/web/templates/stranice/nabavka_detalji.html
index 84e1fa7..98d7371 100644
--- a/web/templates/stranice/nabavka_detalji.html
+++ b/web/templates/stranice/nabavka_detalji.html
@@ -16,7 +16,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     <!-- nazad dugme -->
     <a href="/nabavke" class="nazad-link">
diff --git a/web/templates/stranice/nabavka_forma.html b/web/templates/stranice/nabavka_forma.html
index ddeb668..917c1db 100644
--- a/web/templates/stranice/nabavka_forma.html
+++ b/web/templates/stranice/nabavka_forma.html
@@ -36,7 +36,7 @@
             <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
                 <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Nova nabavka</span>
             </div>
-            <div style="display:flex;flex-direction:column;gap:14px;">
+            <div class="kolona" style="gap:14px;">
                 <div>
                     <label class="polje-labela">Dobavljač</label>
                     <select name="dobavljac_id" style="width:100%;">
@@ -142,7 +142,7 @@
                                 Ukloni
                             </button>
                         </div>
-                        <div style="display:flex;flex-direction:column;gap:10px;">
+                        <div class="kolona" style="gap:10px;">
                             <div>
                                 <label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Artikal</label>
                                 <select :name="'artikal_id[]'" x-model="stavka.artikal_id"
@@ -201,7 +201,7 @@
 
             <div x-show="modalGreska" class="poruka-greska greska-animacija" x-text="modalGreska"></div>
 
-            <div style="display:flex;flex-direction:column;gap:14px;">
+            <div class="kolona" style="gap:14px;">
                 <div>
                     <label class="polje-labela">
                         Naziv <span style="color:#dc2626;">*</span>
diff --git a/web/templates/stranice/nabavke.html b/web/templates/stranice/nabavke.html
index af19021..8044dd8 100644
--- a/web/templates/stranice/nabavke.html
+++ b/web/templates/stranice/nabavke.html
@@ -24,7 +24,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh poruka-animacija">Nabavka je uspešno sačuvana.</div>
@@ -98,7 +98,7 @@
     <div class="nabavke-kartice">
         {{range .Nabavke}}
         <div class="kartica nabavka-kartica animiraj">
-            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
+            <div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">
                         {{if .DobavljacNaziv}}{{.DobavljacNaziv}}{{else}}Bez dobavljača{{end}}
diff --git a/web/templates/stranice/podesavanja.html b/web/templates/stranice/podesavanja.html
index a9c9178..1c9e411 100644
--- a/web/templates/stranice/podesavanja.html
+++ b/web/templates/stranice/podesavanja.html
@@ -73,7 +73,7 @@
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Firma</span>
             </div>
 
-            <div style="display:flex;flex-direction:column;gap:14px;">
+            <div class="kolona" style="gap:14px;">
                 <div>
                     <label class="polje-labela">Naziv firme</label>
                     <input type="text" name="naziv_firme" value="{{.NazivFirme}}"
@@ -210,7 +210,7 @@
 
             <!-- slider: zamućenje pozadine -->
             <div style="margin-top:16px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zamućenje pozadine</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                 </div>
@@ -220,7 +220,7 @@
 
             <!-- slider: zamućenje kartice -->
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zamućenje kartice (glass)</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                 </div>
@@ -230,7 +230,7 @@
 
             <!-- slider: zatamnjivanje pozadine -->
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zatamnjivanje pozadine</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                 </div>
@@ -240,7 +240,7 @@
 
             <!-- slider: zatamnjivanje kartice NTech -->
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zatamnjivanje kartice NTech</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                 </div>
diff --git a/web/templates/stranice/podesavanja_izgled.html b/web/templates/stranice/podesavanja_izgled.html
index cb69742..97268f6 100644
--- a/web/templates/stranice/podesavanja_izgled.html
+++ b/web/templates/stranice/podesavanja_izgled.html
@@ -80,7 +80,7 @@
             </div>
 
             <div style="margin-top:16px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zamućenje pozadine</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                 </div>
@@ -88,7 +88,7 @@
                     class="klizac">
             </div>
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zamućenje kartice (glass)</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                 </div>
@@ -96,7 +96,7 @@
                     class="klizac">
             </div>
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zatamnjivanje pozadine</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                 </div>
@@ -104,7 +104,7 @@
                     class="klizac">
             </div>
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zatamnjivanje kartice NTech</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                 </div>
diff --git a/web/templates/stranice/podesavanja_opste.html b/web/templates/stranice/podesavanja_opste.html
index b244149..1931284 100644
--- a/web/templates/stranice/podesavanja_opste.html
+++ b/web/templates/stranice/podesavanja_opste.html
@@ -64,7 +64,7 @@
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Firma</span>
             </div>
 
-            <div style="display:flex;flex-direction:column;gap:14px;">
+            <div class="kolona" style="gap:14px;">
                 <div>
                     <label class="polje-labela">Naziv firme</label>
                     <input type="text" name="naziv_firme" value="{{.NazivFirme}}"
diff --git a/web/templates/stranice/podsetnici.html b/web/templates/stranice/podsetnici.html
index ec705df..384b80d 100644
--- a/web/templates/stranice/podsetnici.html
+++ b/web/templates/stranice/podsetnici.html
@@ -27,7 +27,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh poruka-animacija">Podsetnik je uspešno sačuvan.</div>
@@ -115,7 +115,7 @@
     <div class="pod-kartice">
         {{range .Podsetnici}}
         <div class="kartica pod-kartica animiraj">
-            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
+            <div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <div style="font-size:15px;font-weight:500;color:{{if .JePrekoracen}}var(--greska){{else}}var(--tekst-glavni){{end}};">{{.Naslov}}</div>
                     {{if .Napomena}}
diff --git a/web/templates/stranice/podsetnik_forma.html b/web/templates/stranice/podsetnik_forma.html
index 725644a..9750efc 100644
--- a/web/templates/stranice/podsetnik_forma.html
+++ b/web/templates/stranice/podsetnik_forma.html
@@ -28,7 +28,7 @@
         {{end}}
 
         <form method="POST" action="{{if .Izmena}}/podsetnici/izmeni/{{.Podsetnik.ID}}{{else}}/podsetnici/novi{{end}}">
-            <div style="display:flex;flex-direction:column;gap:16px;">
+            <div class="kolona" style="gap:16px;">
 
                 <div>
                     <label class="polje-labela">
diff --git a/web/templates/stranice/prodaja_detalji.html b/web/templates/stranice/prodaja_detalji.html
index f60adaf..7706a0d 100644
--- a/web/templates/stranice/prodaja_detalji.html
+++ b/web/templates/stranice/prodaja_detalji.html
@@ -226,7 +226,7 @@
 
   <!-- storno i brisanje -->
   <div class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
-    <div style="display:flex;flex-direction:column;gap:16px;">
+    <div class="kolona" style="gap:16px;">
 
       {{if and (index $.Dozvole "prodaja.storno") (not .Nalog.Stornirano) }}
       <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
diff --git a/web/templates/stranice/profil_tema.html b/web/templates/stranice/profil_tema.html
index dc1c687..03aee57 100644
--- a/web/templates/stranice/profil_tema.html
+++ b/web/templates/stranice/profil_tema.html
@@ -57,7 +57,7 @@
         <form method="POST" action="/profil/tema">
             <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
             <input type="hidden" name="koristi_lokalnu_temu" value="1">
-            <div style="display:flex;flex-direction:column;gap:14px;">
+            <div class="kolona" style="gap:14px;">
                 <div style="padding:12px;background:var(--pozadina);border-radius:8px;border:0.5px solid var(--ivica);">
                     <div style="font-size:13px;color:var(--tekst-sporedni);margin-bottom:10px;">Izaberite temu:</div>
                     <div style="display:flex;gap:16px;">
@@ -153,7 +153,7 @@
             </div>
 
             <div style="margin-top:16px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zamućenje pozadine</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                 </div>
@@ -161,7 +161,7 @@
                     class="klizac">
             </div>
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zamućenje stakla</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blur + 'px'"></span>
                 </div>
@@ -169,7 +169,7 @@
                     class="klizac">
             </div>
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zatamnjivanje pozadine</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                 </div>
@@ -177,7 +177,7 @@
                     class="klizac">
             </div>
             <div style="margin-top:12px;">
-                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
+                <div class="red-izmedju" style="margin-bottom:6px;">
                     <span class="pomocni-tekst">Zatamnjivanje stakla</span>
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="glassOpacity + '%'"></span>
                 </div>
diff --git a/web/templates/stranice/servis.html b/web/templates/stranice/servis.html
index 1bec3e6..c971908 100644
--- a/web/templates/stranice/servis.html
+++ b/web/templates/stranice/servis.html
@@ -45,7 +45,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh poruka-animacija">Nalog je uspešno sačuvan.</div>
@@ -55,7 +55,7 @@
     {{end}}
 
     <!-- gornja traka: pretraga + dugme nova, ispod toga dugme traži -->
-    <form method="GET" action="/servis" style="display:flex;flex-direction:column;gap:8px;">
+    <form method="GET" action="/servis" class="kolona" style="gap:8px;">
         <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
             <input type="text" name="pretraga" value="{{.Pretraga}}"
                 placeholder="Pretraži po broju naloga ili uređaju..."
@@ -138,7 +138,7 @@
     <div class="servis-kartice">
         {{range .Nalozi}}
         <div class="kartica servis-kartica animiraj">
-            <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
+            <div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <a href="/servis/{{.ID}}"
                         style="font-size:15px;font-weight:500;color:var(--sb-akcent);text-decoration:none;font-family:monospace;">
diff --git a/web/templates/stranice/servis_detalji.html b/web/templates/stranice/servis_detalji.html
index 709b1be..9175841 100644
--- a/web/templates/stranice/servis_detalji.html
+++ b/web/templates/stranice/servis_detalji.html
@@ -32,7 +32,7 @@
 {{end}}
 
 {{define "sadrzaj"}}
-<div style="display:flex;flex-direction:column;gap:16px;">
+<div class="kolona" style="gap:16px;">
 
     {{if .Sacuvano}}
     <div class="poruka-uspeh poruka-animacija">Nalog je uspešno sačuvan.</div>
@@ -47,7 +47,7 @@
     <!-- zaglavlje naloga -->
     <div class="kartica detalji-kartica animiraj">
         <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
-            <div style="display:flex;flex-direction:column;gap:8px;">
+            <div class="kolona" style="gap:8px;">
                 <span style="font-size:20px;font-weight:600;color:var(--tekst-glavni);font-family:monospace;">
                     {{.Nalog.BrojNaloga}}
                 </span>
@@ -94,7 +94,7 @@
         <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Uređaj</span>
         </div>
-        <div style="display:flex;flex-direction:column;gap:14px;">
+        <div class="kolona" style="gap:14px;">
             <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:16px;">
                 <div>
                     <div style="font-size:12px;color:var(--tekst-sporedni);margin-bottom:4px;">Naziv uređaja</div>
diff --git a/web/templates/stranice/servis_forma.html b/web/templates/stranice/servis_forma.html
index c6a84af..c9c915e 100644
--- a/web/templates/stranice/servis_forma.html
+++ b/web/templates/stranice/servis_forma.html
@@ -37,12 +37,12 @@
             <!-- broj naloga ide kao hidden — server ga je generisao, vraćamo ga pri POST-u -->
             <input type="hidden" name="broj_naloga" value="{{.Nalog.BrojNaloga}}">
 
-            <div style="display:flex;flex-direction:column;gap:20px;">
+            <div class="kolona" style="gap:20px;">
 
                 <!-- uređaj -->
                 <div>
                     <div class="sekcija-naslov">Uređaj</div>
-                    <div style="display:flex;flex-direction:column;gap:12px;">
+                    <div class="kolona" style="gap:12px;">
                         <div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                             <div>
                                 <label class="polje-labela">