unutra. */
background: var(--surface) !important;
color: var(--ink) !important;
font-family: var(--sans) !important;
font-style: normal !important;
font-size: 14px !important;
font-weight: 400 !important;
height: auto !important;
padding: 0 !important;
border-bottom: 1px solid var(--line);
border-radius: var(--r-l) var(--r-l) 0 0;
vertical-align: middle;
}
.naslov-dev { border-bottom: 2px solid var(--crit); }
.b2b-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 9px 14px;
min-height: 52px;
box-sizing: border-box;
}
/* --- logo -------------------------------------------------------------- */
.b2b-logo {
display: inline-flex;
align-items: center;
gap: 9px;
flex: none;
text-decoration: none;
}
.b2b-logo:hover { text-decoration: none; }
.b2b-logo .mark {
width: 30px; height: 30px;
border-radius: 7px;
background: var(--brand);
color: var(--on-brand);
display: flex; align-items: center; justify-content: center;
font-family: var(--cond);
font-weight: 700;
font-size: 13.5px;
letter-spacing: -.02em;
flex: none;
}
.b2b-logo b {
font-family: var(--cond);
font-size: 16px;
font-weight: 700;
color: var(--ink);
line-height: 1.05;
display: block;
letter-spacing: -.01em;
}
.b2b-logo b em {
display: block;
font-style: normal;
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
color: var(--ink-3);
letter-spacing: .01em;
}
/* --- pretraga ----------------------------------------------------------- */
.b2b-search {
flex: 1 1 auto;
max-width: 460px;
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-m);
padding: 0 10px;
height: 34px;
margin: 0;
transition: border-color .12s, box-shadow .12s;
}
.b2b-search:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
background: var(--surface);
}
.b2b-search svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.b2b-search input[type="text"] {
flex: 1 1 auto;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
font-size: 13px;
color: var(--ink);
height: 30px;
min-width: 0;
}
.b2b-search input[type="text"]:focus { box-shadow: none !important; outline: 0; }
.b2b-search .kbd {
font-family: var(--mono);
font-size: 10px;
color: var(--ink-3);
border: 1px solid var(--line-2);
border-radius: 3px;
padding: 1px 5px;
flex: none;
white-space: nowrap;
}
/* stanje dok stizu predlozi */
.b2b-search.trazi svg { opacity: .35; }
.b2b-search.trazi::after {
content: "";
width: 12px; height: 12px;
border: 2px solid var(--line-2);
border-top-color: var(--brand);
border-radius: 50%;
animation: b2b-vrti .7s linear infinite;
flex: none;
}
@keyframes b2b-vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.b2b-search.trazi::after { animation: none; border-top-color: var(--line-2); }
}
/* lista predloga globalne pretrage */
.ui-autocomplete .ui-menu-item strong,
.ui-autocomplete .ui-menu-item a strong {
font-weight: 600;
color: var(--brand);
background: none;
}
/* Jedan red po predlogu: sve stavke su iste visine, pa se lista ne zavrsava
presecenim redom koji izgleda kao greska u prikazu. Dugi nazivi se skracuju. */
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.45;
box-sizing: border-box;
max-width: 100%;
}
/* --- desna grupa -------------------------------------------------------- */
.b2b-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
flex: none;
}
.b2b-korpa {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 11px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--surface);
color: var(--ink-2) !important;
font-size: 12.5px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.b2b-korpa:hover {
border-color: var(--brand);
color: var(--brand) !important;
background: var(--brand-soft);
text-decoration: none;
}
.b2b-korpa svg { width: 14px; height: 14px; flex: none; }
.b2b-korpa .badge {
background: var(--brand);
color: var(--on-brand);
border-radius: 20px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
min-width: 18px;
text-align: center;
line-height: 1.5;
}
.b2b-korisnik {
display: inline-flex;
align-items: center;
gap: 8px;
padding-left: 4px;
white-space: nowrap;
}
.b2b-korisnik .ini {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--surface-3);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
flex: none;
}
.b2b-korisnik .ko { display: flex; flex-direction: column; line-height: 1.25; }
.b2b-korisnik .ko b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.b2b-korisnik .ko small { font-size: 11px; color: var(--ink-3); }
.b2b-tool {
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--surface);
color: var(--ink-2) !important;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
text-decoration: none;
flex: none;
}
.b2b-tool:hover {
border-color: var(--ink-3);
background: var(--surface-2);
color: var(--ink) !important;
text-decoration: none;
}
/* ============================================================================
05 NAVIGACIJA
----------------------------------------------------------------------------
Stara LWIS tema se ne ucitava — otvaranje podmenija je ovde.
========================================================================== */
.b2b-navcelija {
background: var(--surface) !important;
padding: 0 !important;
border-bottom: 1px solid var(--line);
text-align: left;
}
ul#nav.dropdown {
list-style: none;
margin: 0;
padding: 0 8px;
position: relative;
z-index: 60;
display: flex;
flex-wrap: wrap;
align-items: stretch;
background: transparent;
font-family: var(--sans);
float: none;
width: auto;
}
ul#nav.dropdown li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
float: none;
display: block;
}
/* --- prvi nivo ---------------------------------------------------------- */
ul#nav.dropdown > li > a {
display: flex;
align-items: center;
gap: 5px;
height: 40px;
padding: 0 12px !important;
color: var(--ink-2) !important;
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color .12s, background .12s;
}
ul#nav.dropdown > li > a:hover,
ul#nav.dropdown > li:hover > a {
color: var(--brand) !important;
background: var(--brand-soft);
text-decoration: none;
}
ul#nav.dropdown > li.b2b-active > a {
color: var(--brand) !important;
border-bottom-color: var(--brand);
font-weight: 600;
}
/* strelica kod stavki sa podmenijem */
ul#nav.dropdown a.dir::after {
content: "";
width: 5px; height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: .5;
flex: none;
}
/* --- podmeni ------------------------------------------------------------ */
ul#nav.dropdown ul {
list-style: none;
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 70;
min-width: 216px;
width: auto;
margin: 0;
padding: 5px !important;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 0 var(--r-m) var(--r-m) var(--r-m);
box-shadow: var(--shadow-m);
transition: opacity .1s;
}
ul#nav.dropdown li:hover > ul,
ul#nav.dropdown li.hover > ul {
visibility: visible;
opacity: 1;
}
ul#nav.dropdown ul li a {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 10px !important;
color: var(--ink-2) !important;
font-size: 13px;
font-weight: 400;
border-radius: var(--r-s);
text-decoration: none;
white-space: nowrap;
height: auto;
border: 0;
}
ul#nav.dropdown ul li a:hover {
background: var(--brand-soft);
color: var(--brand) !important;
text-decoration: none;
}
/* --- treci nivo (Export) ------------------------------------------------ */
ul#nav.dropdown ul ul {
top: -6px;
left: 100%;
border-radius: var(--r-m);
}
ul#nav.dropdown ul a.dir::after {
margin-left: auto;
transform: rotate(-45deg);
}
/* ============================================================================
06 TABELE
========================================================================== */
.box-table-a {
font-family: var(--sans) !important;
font-size: 13px !important;
border-collapse: separate !important;
border-spacing: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-m);
overflow: hidden;
margin-bottom: 12px;
}
.box-table-a:not([width]) { width: 100%; }
.box-table-a th {
background: var(--surface-2) !important;
border-top: 0 !important;
border-bottom: 1px solid var(--line) !important;
color: var(--ink-3) !important;
font-family: var(--mono) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: .07em;
text-transform: uppercase;
padding: 8px 10px !important;
text-align: left;
vertical-align: middle;
}
/* Red sa poljima za pretragu unutar zaglavlja tabele */
.box-table-a thead tr + tr th {
background: var(--surface) !important;
text-transform: none;
font-family: var(--sans) !important;
font-size: 12.5px !important;
font-weight: 400 !important;
letter-spacing: 0;
padding: 7px 10px !important;
}
.box-table-a td {
background: var(--surface) !important;
border-bottom: 1px solid var(--line) !important;
border-top: 0 !important;
color: var(--ink) !important;
padding: 8px 10px !important;
vertical-align: middle;
}
.box-table-a tbody tr:last-child td { border-bottom: 0 !important; }
.box-table-a tr:hover td {
background: var(--surface-2) !important;
color: var(--ink) !important;
}
/* Napomena / upozorenje u redu tabele */
.box-table-a td#nap,
.box-table-a-is td {
background-color: var(--crit-soft) !important;
color: var(--crit) !important;
border-bottom: 1px solid var(--crit-line) !important;
}
.box-table-a tr:hover td#nap,
.box-table-a-is tr:hover td {
background-color: var(--crit-soft) !important;
color: var(--crit) !important;
}
/* Bočne / info tabele */
.hor-minimalist-b,
.hor-minimalist-c,
.hor-minimalist-d {
font-family: var(--sans) !important;
font-size: 12.5px !important;
border-radius: var(--r-m) !important;
padding: 0 !important;
border-collapse: separate !important;
border-spacing: 0;
overflow: hidden;
width: 100%;
behavior: none;
}
.hor-minimalist-b { background: var(--surface) !important; border: 1px solid var(--line) !important; }
.hor-minimalist-c { background: var(--crit-soft) !important; border: 1px solid var(--crit-line) !important; }
.hor-minimalist-d { background: var(--ok-soft) !important; border: 1px solid var(--ok-line) !important; }
.hor-minimalist-b th,
.hor-minimalist-c th,
.hor-minimalist-d th {
font-family: var(--mono) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: .07em;
text-transform: uppercase;
padding: 8px 10px !important;
text-align: left;
border-bottom: 1px solid var(--line) !important;
}
.hor-minimalist-b th { color: var(--ink-3) !important; background: var(--surface-2) !important; }
.hor-minimalist-c th { color: var(--crit) !important; border-bottom-color: var(--crit-line) !important; }
.hor-minimalist-d th { color: var(--ok) !important; border-bottom-color: var(--ok-line) !important; }
.hor-minimalist-b th a, .hor-minimalist-b th a:link, .hor-minimalist-b th a:visited { color: var(--ink-2) !important; }
.hor-minimalist-b th a:hover { color: var(--brand) !important; }
.hor-minimalist-b td,
.hor-minimalist-c td,
.hor-minimalist-d td {
font-size: 12.5px !important;
padding: 6px 10px !important;
color: var(--ink-2) !important;
line-height: 1.45;
}
.hor-minimalist-c td { color: var(--crit) !important; }
.hor-minimalist-d td { color: var(--ok) !important; }
.hor-minimalist-b tbody tr:hover td { color: var(--ink) !important; }
/* Brojevi u tabelama poravnati po cifri */
.box-table-a td, .hor-minimalist-b td { font-variant-numeric: tabular-nums; }
/* Sličica u listi — daljinski se bira po izgledu, pa je slika glavni podatak
u redu, ne ukras. Tipičan snimak je izrazito uspravan (oko 32x120 px), pa ga
kvadratni okvir svede na crticu od desetak piksela; okvir je zato uspravan.
Visina 108 px je otprilike prirodna veličina thumb datoteke (120 px po dužoj
strani), a na gušćim ekranima ![]()
uzima original iz iste fascikle. */
.b2b-slicica {
width: 88px;
height: 108px;
object-fit: contain;
object-position: center;
display: block;
margin-left: auto;
margin-right: auto;
background: var(--slika-podloga);
border: 1px solid var(--line);
border-radius: var(--r-m);
padding: 3px;
box-sizing: border-box;
transition: border-color .12s ease, box-shadow .12s ease;
}
table[summary="Lager daljinaca"] tbody td:first-child {
width: 102px;
padding: 7px 8px !important;
text-align: center; /* sličica stoji u sredini svoje kolone */
}
table[summary="Lager daljinaca"] tbody td { padding-top: 7px !important; padding-bottom: 7px !important; }
/* Slika je link ka punoj veličini — okvir to nagovesti na prelazu mišem */
table[summary="Lager daljinaca"] tbody tr:hover .b2b-slicica {
border-color: var(--brand-line);
box-shadow: var(--shadow-s);
}
/* Red je sada visok pa naziv, kao njegov nosilac, ide krupnije od ostalih ćelija */
table[summary="Lager daljinaca"] tbody td:nth-child(2) {
font-size: 15px;
line-height: 1.35;
}
table[summary="Lager daljinaca"] tbody td:nth-child(2) a { font-weight: 600; }
/* ikonica popisa uz dostupnost ne sme da odskače */
.box-table-a td img[src*="note_edit"] { width: 13px; height: 13px; vertical-align: -2px; opacity: .55; }
.box-table-a td img[src*="note_edit"]:hover { opacity: 1; }
/* Vodoravno skrolovanje umesto lomljenja rasporeda */
.b2b-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Oznaka umesto prazne ćelije kad daljinski nema sliku */
.b2b-bez-slike {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--surface-2);
border: 1px dashed var(--line-2);
border-radius: var(--r-m);
width: 88px;
height: 108px;
text-align: center;
}
/* ============================================================================
06b PRIKAZ U MREŽI
----------------------------------------------------------------------------
Isti HTML služi za oba prikaza — menja se samo data-prikaz na omotaču, pa
prebacivanje ne traži ponovno učitavanje stranice ni drugi upit.
Red tabele postaje kartica: slika preko cele širine (u mreži se daljinski
bira po izgledu, pa je ona ovde glavna), pa naziv, pa parovi podataka
levo/desno, i na dnu dodavanje u korpu. Raspored se oslanja na data-kolona
oznake, ne na redni broj ćelije — kolona „Smeštaj" postoji samo za neke
dozvole, pa broj ćelija nije svuda isti.
========================================================================== */
.b2b-lista[data-prikaz="mreza"] table.box-table-a {
display: block;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a thead { display: none; }
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
gap: 14px;
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
gap: 0 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-l);
overflow: hidden;
transition: border-color .12s ease, box-shadow .12s ease;
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody tr:hover {
border-color: var(--brand-line);
box-shadow: var(--shadow-m);
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td {
display: block;
/* širine kolona važe za tabelu; u kartici svaka ćelija ide preko cele
širine — bez ovoga slika ostaje u okviru od 102 px uz levu ivicu */
width: auto !important;
background: var(--surface) !important;
border: 0 !important;
padding: 2px 12px !important;
text-align: left !important;
font-size: 12.5px;
line-height: 1.4;
min-height: 0;
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td::before { display: none !important; }
/* --- slika: krupna, preko cele širine kartice --------------------------- */
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Slika"] {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
padding: 0 !important;
background: var(--slika-podloga) !important;
border-bottom: 1px solid var(--line) !important;
}
.b2b-lista[data-prikaz="mreza"] td[data-kolona="Slika"] a { display: block; width: 100%; height: 100%; }
.b2b-lista[data-prikaz="mreza"] .b2b-slicica {
width: 100%;
height: 100%;
padding: 12px;
border: 0;
border-radius: 0;
background: transparent;
}
.b2b-lista[data-prikaz="mreza"] .b2b-bez-slike {
width: auto;
height: auto;
border: 0;
background: transparent;
}
/* --- naziv: nosilac kartice; dva reda visine da kartice ostanu poravnate - */
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Daljinski"] {
grid-column: 1 / -1;
padding-top: 9px !important;
font-size: 13.5px;
font-weight: 600;
line-height: 1.3;
/* Nazivi umeju da budu jedan dug niz bez razmaka (L027/C2002/C0018/...) —
bez preloma bi izašli iz kartice. Dva reda su gornja granica da bi cena i
stanje ostali u istoj visini na svim karticama u redu; pun naziv stoji u
title atributu i na kartici daljinskog. */
overflow-wrap: anywhere;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 2.6em;
}
/* --- vrsta i šifra u istom redu ----------------------------------------- */
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Vrsta"] { padding-top: 4px !important; }
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Šifra"] {
padding-top: 4px !important;
text-align: right !important;
color: var(--ink-3) !important;
font-size: 11.5px;
}
/* --- cena i stanje: najvažniji brojevi, pa idu krupnije ------------------ */
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Cena"] {
padding-top: 6px !important;
padding-bottom: 8px !important;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Dostupnost"] {
padding-top: 6px !important;
padding-bottom: 8px !important;
text-align: right !important;
white-space: nowrap;
}
/* --- smeštaj: sitno, sa oznakom da se ne pomeša sa količinom ------------- */
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Smeštaj"] {
grid-column: 1 / -1;
padding-bottom: 8px !important;
color: var(--ink-3) !important;
font-size: 11.5px;
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Smeštaj"]::before {
content: "Smeštaj: ";
display: inline !important;
font-family: var(--sans);
}
/* --- dodavanje u korpu: uvek uz donju ivicu kartice --------------------- */
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Akcije"] {
grid-column: 1 / -1;
align-self: end;
padding: 8px 12px !important;
background: var(--surface-2) !important;
border-top: 1px solid var(--line) !important;
}
.b2b-lista[data-prikaz="mreza"] .korpa_form { display: flex; gap: 6px; align-items: stretch; }
.b2b-lista[data-prikaz="mreza"] .korpa_form .b2b-kolicina { flex: none; }
.b2b-lista[data-prikaz="mreza"] .korpa_form button { flex: 1 1 auto; }
/* prazna pretraga zauzima celu širinu mreže */
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody tr.b2b-prazno {
grid-column: 1 / -1;
display: block;
border: 1px solid var(--line);
background: var(--surface);
}
.b2b-lista[data-prikaz="mreza"] tbody tr.b2b-prazno:hover { box-shadow: none; border-color: var(--line); }
/* širina 102 px važi za kolonu sa slikom, ne i za poruku preko celog reda */
.b2b-lista[data-prikaz="mreza"] tbody tr.b2b-prazno td {
width: auto !important;
text-align: center !important;
}
/* --- prekidač lista / mreža -------------------------------------------- */
.b2b-resultbar .b2b-desno { margin-left: auto; }
.b2b-prekidac {
display: inline-flex;
border: 1px solid var(--line-2);
border-radius: var(--r-m);
background: var(--surface);
overflow: hidden;
}
.b2b-prekidac a,
.b2b-prekidac a:link,
.b2b-prekidac a:visited {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: var(--ink-3);
background: var(--surface);
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.b2b-prekidac a + a { border-left: 1px solid var(--line-2); }
.b2b-prekidac a svg { width: 14px; height: 14px; flex: none; }
.b2b-prekidac a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.b2b-prekidac a.on,
.b2b-prekidac a.on:link,
.b2b-prekidac a.on:visited {
background: var(--brand-soft);
color: var(--brand);
cursor: default;
}
.b2b-prekidac a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Na užem ekranu ostaju same ikonice — smisao nose i bez natpisa */
@media (max-width: 620px) {
.b2b-prekidac a .tekst { display: none; }
.b2b-prekidac a { padding: 5px 9px; }
}
/* --- dopuna liste pri skrolovanju --------------------------------------- */
.b2b-jos {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 10px 4px;
min-height: 34px;
}
.b2b-jos .info {
font-family: var(--mono);
font-size: 11.5px;
color: var(--ink-3);
}
.b2b-jos.kraj { padding-top: 10px; }
/* dok stiže sledeća strana, traka trepće umesto da skače */
.b2b-jos.radi .info { opacity: .7; }
/* Na telefonu mreža ide u uže kolone, sa nižom slikom */
@media (max-width: 760px) {
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.b2b-lista[data-prikaz="mreza"] table.box-table-a tbody td[data-kolona="Slika"] { height: 150px; }
}
/* ============================================================================
07 FORME I DUGMAD
========================================================================== */
input, select, textarea {
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
background-color: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--r-m);
padding: 5px 8px;
line-height: 1.35;
max-width: 100%;
box-sizing: border-box;
}
textarea { line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
background-color: var(--surface);
color: var(--ink);
border-color: var(--brand);
outline: 0;
box-shadow: 0 0 0 3px var(--brand-soft);
}
input[type="checkbox"], input[type="radio"] {
width: auto; padding: 0; accent-color: var(--brand);
vertical-align: middle;
}
input[type="submit"], input[type="button"], input[type="reset"], button {
font-family: var(--sans);
font-size: 12.5px;
font-weight: 600;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--r-m);
padding: 5px 12px;
cursor: pointer;
line-height: 1.4;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
background: var(--surface-2);
border-color: var(--ink-3);
color: var(--ink);
}
input[type="submit"]:active, input[type="button"]:active, button:active { transform: translateY(1px); }
/* Glavna radnja — „Traži", „U redu", potvrde */
input[type="submit"][value="Trazi"],
input[type="submit"][value="Traži"],
input[type="submit"][value="trazi"],
input[type="submit"][value="U redu"],
input[type="submit"][value="OK"] {
background: var(--brand);
border-color: var(--brand);
color: var(--on-brand);
}
input[type="submit"][value="Trazi"]:hover,
input[type="submit"][value="Traži"]:hover,
input[type="submit"][value="trazi"]:hover,
input[type="submit"][value="U redu"]:hover,
input[type="submit"][value="OK"]:hover {
background: var(--brand-2);
border-color: var(--brand-2);
color: var(--on-brand);
}
input[disabled], select[disabled], textarea[disabled],
input[readonly] {
background: var(--surface-2);
color: var(--ink-3);
cursor: not-allowed;
}
/* Polje za količinu — usko, brojevi poravnati */
input[size="2"], input[size="3"], input[name="trazeno"] {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
text-align: center;
padding: 5px 4px;
}
/* --- prozor sa pitanjem ------------------------------------------------
Stoji umesto confirm(), koji se ne moze oblikovati i zamrzne stranu. */
.b2b-zastor {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
background: rgba(16, 21, 28, .52);
animation: b2b-utapanje .12s ease-out;
}
.b2b-prozor {
width: 100%; max-width: 400px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-l);
box-shadow: var(--shadow-l);
padding: 20px 22px 16px;
animation: b2b-uzdizanje .14s ease-out;
}
.b2b-prozor h2 {
margin: 0 0 8px;
font-family: var(--sans);
font-size: 16px; font-weight: 650;
color: var(--ink);
line-height: 1.3;
}
.b2b-prozor p {
margin: 0 0 18px;
font-family: var(--sans);
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.5;
overflow-wrap: anywhere;
}
.b2b-prozor-dugmad {
display: flex; gap: 8px; justify-content: flex-end;
flex-wrap: wrap;
}
.b2b-prozor-dugmad button {
font-family: var(--sans);
font-size: 13px; font-weight: 550;
padding: 8px 15px;
border-radius: var(--r-m);
border: 1px solid var(--line-2);
background: var(--surface-2);
color: var(--ink);
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.b2b-prozor-dugmad button:hover { background: var(--surface-3); }
.b2b-prozor-dugmad button:focus-visible {
outline: 0; box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand);
}
.b2b-prozor-dugmad .b2b-dugme-glavno {
background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
.b2b-prozor-dugmad .b2b-dugme-glavno:hover { background: var(--brand-2); border-color: var(--brand-2); }
.b2b-prozor-dugmad .b2b-dugme-opasno {
background: var(--crit); border-color: var(--crit); color: #fff;
}
.b2b-prozor-dugmad .b2b-dugme-opasno:hover { filter: brightness(1.08); }
.b2b-prozor-dugmad .b2b-dugme-opasno:focus-visible { box-shadow: 0 0 0 3px var(--crit-line); }
@keyframes b2b-utapanje { from { opacity: 0 } to { opacity: 1 } }
@keyframes b2b-uzdizanje { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
.b2b-zastor, .b2b-prozor { animation: none; }
}
@media (max-width: 460px) {
.b2b-prozor-dugmad { flex-direction: column-reverse; }
.b2b-prozor-dugmad button { width: 100%; padding: 11px 15px; }
}
/* --- korpa: kako izgleda slanje nove kolicine --------------------------
Bez ovoga se ne bi videlo da je promena zabelezena, jer se strana vise
ne ucitava ponovo. */
.forma-kolicina { position: relative; }
.forma-kolicina.salje .b2b-kolicina { opacity: .55; }
.forma-kolicina.uspelo .b2b-kolicina { border-color: var(--ok); }
.forma-kolicina.uspelo .b2b-kolicina input[type="text"] { background: var(--ok-soft); }
.forma-kolicina.nije-uspelo .b2b-kolicina { border-color: var(--crit); }
.forma-kolicina.nije-uspelo .b2b-kolicina input[type="text"] { background: var(--crit-soft); }
.forma-kolicina .b2b-kolicina { transition: border-color .15s, opacity .15s; }
.forma-kolicina .b2b-kolicina input[type="text"] { transition: background .15s; }
/* --- polje za količinu sa dugmadima − i + ------------------------------- */
.b2b-kolicina {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--line-2);
border-radius: var(--r-m);
background: var(--surface);
overflow: hidden;
vertical-align: middle;
line-height: 1;
}
.b2b-kolicina:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.b2b-kolicina .kol-dugme {
width: 26px;
border: 0 !important;
border-radius: 0 !important;
background: var(--surface-2) !important;
color: var(--ink-2) !important;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 0 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition: background .12s, color .12s;
}
.b2b-kolicina .kol-dugme:hover:not(:disabled) {
background: var(--brand) !important;
color: var(--on-brand) !important;
}
.b2b-kolicina .kol-dugme:active:not(:disabled) { transform: none; filter: brightness(.92); }
.b2b-kolicina .kol-dugme:disabled {
color: var(--line-2) !important;
cursor: default;
background: var(--surface-2) !important;
}
/* samo polje — bez svog okvira, okvir nosi grupa */
.b2b-kolicina input[type="text"] {
width: 42px;
border: 0 !important;
border-left: 1px solid var(--line) !important;
border-right: 1px solid var(--line) !important;
border-radius: 0 !important;
background: var(--surface) !important;
box-shadow: none !important;
text-align: center;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 600;
padding: 6px 2px !important;
-moz-appearance: textfield;
}
.b2b-kolicina input[type="text"]:focus { outline: 0; box-shadow: none !important; }
/* u uskim kolonama tabele grupa ne sme da razvuče red */
.box-table-a td .b2b-kolicina { margin: 1px 0; }
@media (max-width: 620px) {
.b2b-kolicina .kol-dugme { width: 34px; font-size: 17px; }
.b2b-kolicina input[type="text"] { width: 46px; padding: 8px 2px !important; }
}
/* Kontejner sa jQuery UI dugmadima */
.dugmici { line-height: 2.1; }
.dugmici a { margin-right: 4px; }
/* ============================================================================
08 BOČNA TRAKA
========================================================================== */
td[width="150"] { vertical-align: top; }
td.b2b-side > table { margin-bottom: 10px; }
td.b2b-side { width: 210px !important; }
/* naslovi grupa u bočnoj traci vode na svoj modul */
td.b2b-side .hor-minimalist-b th {
padding: 7px 9px !important;
background: transparent !important;
border-bottom: 0 !important;
}
td.b2b-side .hor-minimalist-b td { padding: 0 9px 9px !important; }
td.b2b-side .hor-minimalist-b input[type="text"] { width: 100%; font-size: 12.5px; padding: 5px 8px; }
#korpa { font-size: 12.5px; }
#korpa table { width: 100%; }
#korpa td {
padding: 3px 6px !important;
border-bottom: 1px solid var(--line);
color: var(--ink-2) !important;
font-size: 12px !important;
line-height: 1.4;
}
#korpa tr:last-child td { border-bottom: 0; }
#korpa td[align="right"] {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--ink) !important;
width: 34px;
text-align: right;
}
#notifikacije table { margin-bottom: 0; }
#notifikacije td { font-size: 12px !important; line-height: 1.45; }
/* Polja za brzu pretragu u bočnoj traci */
#q_lager, #q_model, #q_marka { width: 100%; }
.ui-widget { font-family: var(--sans) !important; font-size: 13px !important; }
/* ============================================================================
09 DOSTUPNOST LAGERA
----------------------------------------------------------------------------
Funkcija dostupnost() ispisuje PNG ikonice. Dok se ne zameni oznakama,
ikonicama se daje ujednačeno poravnanje i čitljiva veličina.
========================================================================== */
img[src*="/icons/"] {
vertical-align: -3px;
image-rendering: -webkit-optimize-contrast;
}
img[src*="accept.png"], img[src*="error.png"], img[src*="cancel.png"] {
width: 14px; height: 14px;
}
/* Oznake stanja — koristi ih b2b_dostupnost() posle Faze 4 */
.stock {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.stock .pip { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.stock small { font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: var(--ink-3); }
.stock-ok { color: var(--ok); }
.stock-ok .pip { background: var(--ok); }
.stock-low { color: var(--warn); }
.stock-low .pip { background: var(--warn); }
.stock-none { color: var(--crit); }
.stock-none .pip { background: var(--crit); }
.stock-eol { color: var(--ink-3); }
.stock-eol .pip { background: var(--ink-3); border-radius: 50%; }
/* Oznaka stanja stoji ispred kolicine, pa joj treba vazduha sa desne strane. */
.stock + .b2b-mono { margin-left: 7px; }
/* Radnje u redu tabele (npr. popis) — pojavljuju se kad se predje preko reda.
Ne diraju dozvole: link se i dalje ispisuje samo kome sledi, ovo je vidljivost.
Ostaju dostupne tastaturom (:focus-within) i uvek vidljive tamo gde nema misa. */
@media (hover: hover) and (pointer: fine) {
.akcija-hover {
opacity: 0;
transition: opacity .12s ease;
}
tr:hover .akcija-hover,
tr:focus-within .akcija-hover,
.akcija-hover:focus,
.akcija-hover:focus-visible {
opacity: 1;
}
}
.akcija-hover img { vertical-align: middle; }
/* Oznaka vrste / proizvođača */
.badge-t {
display: inline-block;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
background: var(--surface-3);
color: var(--ink-2);
border: 1px solid var(--line);
}
/* ============================================================================
10 PAGINACIJA
========================================================================== */
.b2b-pager {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
padding: 12px 2px 4px;
font-family: var(--mono);
font-size: 12.5px;
}
.b2b-pager a, .b2b-pager span.p {
min-width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 9px;
border: 1px solid var(--line);
border-radius: var(--r-m);
background: var(--surface);
color: var(--ink-2) !important;
text-decoration: none;
}
.b2b-pager a:hover {
border-color: var(--brand);
color: var(--brand) !important;
background: var(--brand-soft);
text-decoration: none;
}
.b2b-pager .on {
background: var(--brand);
border-color: var(--brand);
color: var(--on-brand) !important;
font-weight: 600;
}
.b2b-pager .gap { border: 0; background: none; color: var(--ink-3) !important; min-width: 16px; padding: 0 2px; }
.b2b-pager .info { margin-left: auto; color: var(--ink-3); font-size: 11.5px; border: 0; background: none; }
/* Stara paginacija kroz forme — dok se ne zameni, bar da izgleda uredno */
tr.dugmici td form { display: inline-block; margin: 0; }
/* Traka za pretragu iznad tabele */
.b2b-filteri {
display: flex;
align-items: flex-end;
gap: 10px;
flex-wrap: wrap;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-m);
padding: 11px 13px;
margin: 0 0 12px;
}
.b2b-filteri .fld { display: inline-flex; flex-direction: column; gap: 4px; }
.b2b-filteri .fld label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-3);
}
.b2b-filteri input[type="text"], .b2b-filteri select { margin: 0; }
.b2b-filteri input[type="submit"] {
background: var(--brand);
border-color: var(--brand);
color: var(--on-brand);
padding: 6px 15px;
}
.b2b-filteri input[type="submit"]:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); }
.b2b-check {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--ink-2);
padding-bottom: 6px;
cursor: pointer;
white-space: nowrap;
}
/* Zaglavlje kolone koje se sortira */
a.b2b-sort, a.b2b-sort:link, a.b2b-sort:visited {
color: var(--ink-3) !important;
font: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap;
}
a.b2b-sort:hover { color: var(--brand) !important; text-decoration: none; }
a.b2b-sort .sort { color: var(--brand); font-size: 11px; }
/* Traka sa brojem rezultata i aktivnim filterima */
.b2b-resultbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 10px;
font-size: 12.5px;
color: var(--ink-3);
}
.b2b-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brand-soft);
border: 1px solid var(--brand-line);
color: var(--brand);
border-radius: var(--r-m);
padding: 3px 9px;
font-size: 12px;
font-weight: 600;
}
.b2b-chip a, .b2b-chip a:link, .b2b-chip a:visited {
color: var(--brand);
opacity: .7;
font-weight: 700;
line-height: 1;
}
.b2b-chip a:hover { opacity: 1; text-decoration: none; }
.b2b-count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
/* Tabovi na kartici daljinskog */
.b2b-tabs {
display: flex;
gap: 2px;
flex-wrap: wrap;
border-bottom: 1px solid var(--line);
margin: 16px 0 12px;
}
.b2b-tab {
background: none;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
padding: 8px 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.b2b-tab:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.b2b-tab.on {
color: var(--brand);
border-bottom-color: var(--brand);
font-weight: 600;
background: none;
}
.b2b-tab em {
font-style: normal;
font-family: var(--mono);
font-size: 10.5px;
color: var(--ink-3);
background: var(--surface-2);
border-radius: 20px;
padding: 1px 6px;
}
.b2b-tab.on em { background: var(--brand-soft); color: var(--brand); }
/* ============================================================================
11 POS REŽIM
========================================================================== */
.pos_on, .pos_off {
display: inline-block;
font-family: var(--sans) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
padding: 7px 16px !important;
border-radius: var(--r-m) !important;
text-shadow: none !important;
box-shadow: none !important;
filter: none !important;
background-image: none !important;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.pos_on {
background: var(--ok-soft) !important;
border: 1px solid var(--ok-line) !important;
color: var(--ok) !important;
}
.pos_on:hover { background: var(--ok) !important; color: var(--on-brand) !important; text-decoration: none; }
.pos_off {
background: var(--crit-soft) !important;
border: 1px solid var(--crit-line) !important;
color: var(--crit) !important;
}
.pos_off:hover { background: var(--crit) !important; color: #fff !important; text-decoration: none; }
.pos_on:active, .pos_off:active { position: static !important; top: auto !important; transform: translateY(1px); }
/* ============================================================================
12 POMOĆNE KLASE
========================================================================== */
.polje_crveno {
background-color: var(--crit-soft) !important;
color: var(--crit) !important;
font-weight: 600;
border-radius: var(--r-s);
}
.polje_plavo {
background-color: var(--brand-soft) !important;
color: var(--brand) !important;
font-weight: 600;
border-radius: var(--r-s);
}
.nap_novosti, .paznja { color: var(--crit) !important; }
/* Poruke iz info() */
.hor-minimalist-c td b, .hor-minimalist-d td b { font-weight: 600; }
/* --- poruke o gresci u obrascima ---------------------------------------
Ispisuje ih scripts/validacija.js, i to tek kad polje ostane sporno —
ne dok se jos kuca. Poruka stoji ispod polja i vezana je za njega
preko aria-describedby. */
.polje-greska {
/* marker: po njemu validacija.js zna da stranica vec ima svoj stil
i da ne treba da dodaje svoj */
--validacija-stil: 1;
display: block;
margin: 4px 0 0;
color: var(--crit);
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
line-height: 1.35;
overflow-wrap: anywhere;
}
.polje-greska::before {
content: "";
display: inline-block;
width: 13px; height: 13px;
margin-right: 5px;
vertical-align: -2px;
border-radius: 50%;
background: var(--crit);
/* uzvicnik izrezan iz kruga — bez slike i bez dodatnog zahteva */
-webkit-mask: radial-gradient(circle at 50% 78%, #000 0 1.1px, transparent 1.2px),
linear-gradient(#000 0 0) 50% 22%/1.6px 5px no-repeat;
mask: radial-gradient(circle at 50% 78%, #000 0 1.1px, transparent 1.2px),
linear-gradient(#000 0 0) 50% 22%/1.6px 5px no-repeat;
-webkit-mask-composite: source-over;
mask-composite: add;
}
.polje-greska[hidden] { display: none; }
/* polje koje ceka ispravku */
.ima-gresku input[type="text"],
.ima-gresku input[type="password"],
.ima-gresku input:not([type]),
.ima-gresku textarea,
.ima-gresku select {
border-color: var(--crit) !important;
background: var(--crit-soft);
}
.ima-gresku input[type="text"]:focus,
.ima-gresku input[type="password"]:focus,
.ima-gresku input:not([type]):focus,
.ima-gresku textarea:focus,
.ima-gresku select:focus {
box-shadow: 0 0 0 3px var(--crit-line) !important;
}
/* u uskoj celiji tabele poruka ne sme da razvuce kolonu */
td .polje-greska, th .polje-greska { max-width: 190px; white-space: normal; }
/* Spry validacione poruke.
Spry ih drzi na display:none i prikazuje ih tek tako sto na kontejner polja
doda klasu stanja (npr. textfieldRequiredState). Zato ovde NE sme da stoji
display na samoj poruci — inace stoje ispisane sve vreme, bez razloga.
Spisak pokriva sve poruke koje se koriste u portalu; stanja bez skripte
(radio nema Spry modul) tako i ostaju skrivena. */
.textfieldRequiredMsg, .textfieldInvalidFormatMsg,
.textfieldMinCharsMsg, .textfieldMaxCharsMsg,
.textfieldMinValueMsg, .textfieldMaxValueMsg,
.textareaRequiredMsg, .textareaMinCharsMsg, .textareaMaxCharsMsg,
.passwordRequiredMsg, .passwordMinCharsMsg, .passwordMaxCharsMsg,
.passwordInvalidStrengthMsg,
.selectRequiredMsg, .selectInvalidMsg,
.radioRequiredMsg {
/* Sakrivene po pravilu — Spry ih otkriva klasom stanja (pravilo ispod).
Stoji i ovde jer se Password i Select Spry CSS uopste ne ucitavaju,
pa bi te poruke inace stajale ispisane bez greske. */
display: none;
color: var(--crit) !important;
font-size: 12px;
font-weight: 500;
background: var(--crit-soft);
border: 1px solid var(--crit-line);
border-radius: var(--r-s);
padding: 2px 7px;
margin-left: 6px;
white-space: nowrap;
}
/* prikazuju se samo kada Spry oznaci gresku na kontejneru */
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg,
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg,
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState .passwordInvalidStrengthMsg,
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg {
display: inline-block;
}
.b2b-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.b2b-muted { color: var(--ink-3); }
.b2b-hide { display: none !important; }
/* ============================================================================
13 jQuery UI I FANCYBOX KOREKCIJE
========================================================================== */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: var(--sans) !important;
font-size: 13px !important;
}
.ui-button, .ui-widget-content .ui-button, .ui-widget-header .ui-button,
.ui-state-default, .ui-widget-content .ui-state-default {
background: var(--surface) !important;
background-image: none !important;
border: 1px solid var(--line-2) !important;
color: var(--ink-2) !important;
border-radius: var(--r-m) !important;
font-weight: 600 !important;
text-shadow: none !important;
}
.ui-button:hover, .ui-state-hover, .ui-widget-content .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus {
background: var(--surface-2) !important;
background-image: none !important;
border-color: var(--ink-3) !important;
color: var(--ink) !important;
}
.ui-button .ui-button-text { padding: .3em .8em !important; }
.ui-autocomplete {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-m) !important;
box-shadow: var(--shadow-m);
padding: 4px !important;
/* svih 10 predloga (10 x 42px + okvir) stane bez preseka; na niskim
ekranima lista ne prelazi 60% visine prozora */
max-height: 430px;
max-height: min(430px, 60vh);
overflow-y: auto;
/* jQuery UI upisuje inline sirinu bez paddinga; bez border-box sadrzaj
prelazi okvir i pojavi se suvisan vodoravni klizac */
box-sizing: border-box;
overflow-x: hidden;
/* jQuery UI upisuje i inline z-index:1, pa se navigacija (60) i njen podmeni
(70) crtaju preko liste predloga — zato !important. */
z-index: 9999 !important;
}
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item {
color: var(--ink-2) !important;
border-radius: var(--r-s) !important;
padding: 6px 9px !important;
font-size: 13px !important;
border: 0 !important;
background: transparent !important;
line-height: 1.4;
}
.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete .ui-menu-item:hover {
background: var(--brand-soft) !important;
color: var(--brand) !important;
}
.ui-dialog {
border-radius: var(--r-l) !important;
box-shadow: var(--shadow-l);
border: 1px solid var(--line) !important;
background: var(--surface) !important;
padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar {
background: var(--surface-2) !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid var(--line) !important;
border-radius: var(--r-l) var(--r-l) 0 0 !important;
color: var(--ink) !important;
font-family: var(--cond);
font-weight: 700;
padding: 11px 14px !important;
}
.ui-dialog .ui-dialog-content { color: var(--ink) !important; padding: 14px !important; }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid var(--line) !important; background: var(--surface-2) !important; }
.ui-widget-overlay { background: rgba(22,27,34,.55) !important; opacity: 1 !important; }
/* --- Fancybox ------------------------------------------------------------
Modal uvek stoji na tamnoj podlozi, bez obzira na temu, pa su boje ovde
fiksne — brend plava na crnom daje oko 2.8:1 i ne moze da se cita. */
.fancybox-skin {
border-radius: var(--r-l) !important;
background: #FFFFFF !important;
padding: 8px !important;
}
.fancybox-opened .fancybox-skin { box-shadow: 0 18px 60px rgba(0,0,0,.55) !important; }
.fancybox-overlay { background: rgba(10, 13, 17, .82) !important; }
/* natpis ispod slike */
.fancybox-title-float-wrap .child,
.fancybox-title-inside-wrap,
.fancybox-title-over-wrap {
background: rgba(16, 19, 23, .94) !important;
color: #EDF1F6 !important;
font-family: var(--sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
padding: 9px 15px !important;
border-radius: var(--r-m) !important;
text-shadow: none !important;
box-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
white-space: normal !important;
max-width: 620px;
}
.fancybox-title-float-wrap .child a,
.fancybox-title-inside-wrap a,
.fancybox-title-over-wrap a {
color: #9CC8F5 !important; /* svetlija plava — oko 8:1 na ovoj podlozi */
font-weight: 600;
text-decoration: none;
}
.fancybox-title-float-wrap .child a:hover,
.fancybox-title-inside-wrap a:hover { color: #C5DFFA !important; text-decoration: underline; }
/* dugme za zatvaranje — vidljivije */
.fancybox-close {
background: #FFFFFF !important;
border: 1px solid rgba(0,0,0,.16) !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
width: 30px !important;
height: 30px !important;
top: -13px !important;
right: -13px !important;
background-image: none !important;
}
.fancybox-close::before, .fancybox-close::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 13px; height: 1.7px;
background: #161B22;
border-radius: 1px;
}
.fancybox-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.fancybox-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.fancybox-close:hover { background: #161B22 !important; }
.fancybox-close:hover::before, .fancybox-close:hover::after { background: #fff; }
/* strelice levo/desno u galeriji */
.fancybox-nav span { background-color: rgba(16,19,23,.7) !important; border-radius: var(--r-m); }
/* ============================================================================
14 MOBILNI I TABLET
========================================================================== */
@media (max-width: 1100px) {
body > div[align="center"] > table > tbody > tr > td > table { width: 100% !important; }
}
@media (max-width: 860px) {
body, body td, body th { font-size: 14px; }
/* Glavni raspored: sadržaj i bočna traka jedno ispod drugog */
body > div[align="center"] > table > tbody > tr > td > table,
body > div[align="center"] > table > tbody > tr > td > table > tbody,
body > div[align="center"] > table > tbody > tr > td > table > tbody > tr {
display: block; width: 100% !important;
}
body > div[align="center"] > table > tbody > tr > td > table > tbody > tr > td {
display: block; width: 100% !important; padding: 4px 0 !important;
}
td[width="150"] {
width: 100% !important;
border-top: 1px solid var(--line);
margin-top: 12px;
padding: 12px 0 !important;
}
td[width="150"] > table { max-width: 100%; }
/* Navigacija se prelama u dve-tri vrste umesto vodoravnog niza */
ul#nav.dropdown { float: none; display: flex; flex-wrap: wrap; padding: 4px !important; }
ul#nav.dropdown > li { float: none; }
ul#nav.dropdown > li > a { padding: 9px 10px !important; font-size: 13px; }
ul#nav.dropdown ul { min-width: 190px; }
/* Široke tabele skroluju u svom okviru, stranica ne ide u stranu */
.box-table-a { display: block; overflow-x: auto; }
.b2b-filteri { gap: 8px; padding: 10px; }
.b2b-filteri .fld { flex: 1 1 132px; min-width: 0; }
.b2b-filteri .fld input, .b2b-filteri .fld select { width: 100%; min-width: 0; }
/* nijedna forma ne sme da razvuce stranicu */
form { max-width: 100%; }
input[type="text"], input[type="password"], select, textarea { max-width: 100%; }
.naslov { font-size: 13.5px !important; padding: 9px 12px !important; flex-wrap: wrap; }
h1 { font-size: 21px; }
}
@media (max-width: 620px) {
ul#nav.dropdown > li > a { padding: 8px 9px !important; font-size: 12.5px; }
/* Prsti umesto miša — veće mete za dodir */
input[type="submit"], input[type="button"], button { padding: 8px 14px; font-size: 13px; }
input[type="text"], input[type="password"], select, textarea { padding: 8px; font-size: 16px; }
td[width="150"] > table { margin-bottom: 12px; }
body > div[align="center"] > table > tbody > tr:last-child > td { font-size: 10px !important; }
}
/* Traka zaglavlja na uskom ekranu: logo i alatke u prvom redu,
pretraga preko cele sirine u drugom. Bez ovoga flex ne prelama i
traka razvuce celu stranicu. */
@media (max-width: 860px) {
.b2b-bar {
flex-wrap: wrap;
gap: 9px;
padding: 9px 11px;
}
.b2b-search {
order: 3;
flex: 1 0 100%;
max-width: none;
}
.b2b-search .kbd { display: none; }
.b2b-actions { margin-left: auto; gap: 6px; }
.b2b-korpa .tekst { display: none; } /* ostaje ikonica sa brojem */
.b2b-korisnik .ko { display: none; } /* ostaju inicijali */
.b2b-logo b em { display: none; }
/* Zatvoren podmeni sa visibility:hidden i dalje zauzima prostor i gura
stranicu u stranu — na uskom ekranu se sklanja potpuno. */
ul#nav.dropdown ul { display: none; opacity: 1; }
ul#nav.dropdown li:hover > ul,
ul#nav.dropdown li.hover > ul { display: block; visibility: visible; }
ul#nav.dropdown ul { left: auto; right: 0; min-width: 190px; max-width: calc(100vw - 24px); }
ul#nav.dropdown ul ul { left: auto; right: 100%; top: 0; }
}
@media (max-width: 520px) {
.b2b-logo b { font-size: 15px; }
.b2b-tool { width: 30px; height: 30px; }
}
/* Ispod 760 px red tabele postaje kartica — u magacinu se radi na telefonu.
Naziv kolone dolazi iz data-kolona atributa koji upisuje b2b.js. */
@media (max-width: 760px) {
table.box-table-a { display: block; border: 0; background: transparent; overflow: visible; }
table.box-table-a thead { display: none; }
table.box-table-a tbody, table.box-table-a tr, table.box-table-a td { display: block; width: auto; }
table.box-table-a tbody tr {
background: var(--surface) !important;
border: 1px solid var(--line);
border-radius: var(--r-m);
margin-bottom: 9px;
padding: 4px 2px;
overflow: hidden;
}
table.box-table-a tbody tr:hover td { background: var(--surface) !important; }
table.box-table-a td {
border-bottom: 1px solid var(--line) !important;
padding: 7px 11px !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: right;
min-height: 34px;
/* dugacki nazivi bez razmaka (L1144/VESTEL/VOX/RM-L1840) inace
razvuku tabelu i stranica pocne da se pomera u stranu */
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
table.box-table-a td a,
table.box-table-a td span { min-width: 0; overflow-wrap: anywhere; }
table.box-table-a tbody tr td:last-child { border-bottom: 0 !important; }
table.box-table-a td[data-kolona]::before {
content: attr(data-kolona);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-3);
text-align: left;
flex: none;
padding-right: 8px;
}
/* prazna ćelija ne zauzima mesto na kartici */
table.box-table-a td:empty { display: none; }
/* prvi red kartice nosi naziv artikla — bez oznake kolone, veći tekst */
table.box-table-a td[data-kolona="Daljinski"],
table.box-table-a td[data-kolona="Tema"],
table.box-table-a td[data-kolona="Marka"] {
font-size: 14.5px;
font-weight: 600;
display: block;
text-align: left;
background: var(--surface-2) !important;
}
table.box-table-a td[data-kolona="Daljinski"]::before,
table.box-table-a td[data-kolona="Tema"]::before,
table.box-table-a td[data-kolona="Marka"]::before { display: none; }
/* prazna poruka „nema rezultata" ostaje preko cele širine */
table.box-table-a td[colspan] { display: block; text-align: center; }
table.box-table-a td[colspan]::before { display: none; }
/* Slika otvara karticu — stoji uz levu ivicu, a ne razvučena preko reda.
Na telefonu ima mesta za veći okvir nego u tabeli. */
table[summary="Lager daljinaca"] tbody td:first-child {
width: auto;
justify-content: flex-start;
padding: 10px 11px !important;
background: var(--surface-2) !important;
border-bottom: 0 !important; /* slika i naziv čine jedno zaglavlje kartice */
}
.b2b-slicica { width: 104px; height: 128px; }
}
/* ============================================================================
15 ŠTAMPA
========================================================================== */
@media print {
body { background: #fff !important; }
ul#nav.dropdown, td[width="150"], .naslov, .b2b-tools, #notifikacije { display: none !important; }
.box-table-a { border: 1px solid #999; }
.box-table-a th { background: #eee !important; color: #000 !important; }
.box-table-a td { color: #000 !important; }
a { color: #000 !important; text-decoration: none; }
/* na papiru se lista prati po nazivu — sličica je tu samo za prepoznavanje */
.b2b-slicica { width: 44px; height: 60px; border-color: #999; }
}
/* ============================================================================
Poštovanje podešavanja za smanjeno kretanje
========================================================================== */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ============================================================================
Istekla sesija — poruka u bočnoj traci
----------------------------------------------------------------------------
Zamena za raniji prikaz, kad bi AJAX odgovor sa stranice za prijavu završio
ubačen u kutiju korpe ili notifikacija.
========================================================================== */
.b2b-sesija-istekla {
background: var(--warn-soft);
border: 1px solid var(--warn-line);
color: var(--warn);
border-radius: var(--r-m);
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.5;
text-align: center;
}
.b2b-sesija-istekla a { color: var(--warn); font-weight: 600; text-decoration: underline; }