* { box-sizing: border-box; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  color: #222;
  margin: 0;
  padding: 0 20px 40px 20px;
  background: #f4f5f7;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #24344a;
  color: #fff;
  padding: 8px 16px;
  margin: 0 -20px 18px -20px;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
.baza-info { font-size: 11px; color: #cbd5e1; margin-left: 10px; }

.tabbtn {
  background: transparent;
  border: 1px solid #566a86;
  color: #dfe6ef;
  padding: 7px 16px;
  cursor: pointer;
  border-radius: 4px;
}
.tabbtn.active { background: #3d6fb4; color: #fff; border-color: #3d6fb4; font-weight: bold; }

button {
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #b7bec9;
  background: #eef1f5;
  padding: 6px 12px;
  font-size: 12px;
}
button.primary { background: #2f6fb0; color: #fff; border-color: #2f6fb0; font-weight: bold; }
button.secondary { background: #fff; }
button.danger { background: #c0392b; color: #fff; border-color: #c0392b; }
button:hover { filter: brightness(0.95); }

.offer-title h1 { font-size: 18px; margin: 6px 0; font-weight: 600; }
.offer-title p { margin: 0 0 10px 0; color: #555; }
.inline-input { border: none; border-bottom: 1px solid #888; background: transparent; font-size: 18px; font-family: inherit; width: 60px; }
#datumPonude.inline-input { width: 140px; }
/* Broj ponude je od uvođenja formata DDMMYY-NN (npr. 220926-01) duži nego pre - 60px je bilo
   pretesno pa je linija ispod broja izgledala prekratko/nezgrapno u odnosu na tekst. */
#brojPonude.inline-input { width: 115px; }

/* Prikaz datuma u srpskom formatu (dd.mm.gggg.) preko native input[type=date] polja - njegov
   ugrađeni prikaz (sa kosim crtama, npr. 21/09/2026) zavisi od lokalnih podešavanja pregledača/
   OS-a i ne može se direktno promeniti, pa se izvorni tekst sakriva (providan), a preko njega
   se ispisuje sopstveni format; klik i dalje otvara ugrađeni kalendar jer je input i dalje ispod
   (samo mu je tekst providan). Pouzdano radi u Chrome/Edge/Brave (isti Blink motor); u nekim
   drugim pregledačima može da se vidi i izvorni tekst ispod prikaza, bez uticaja na funkciju.
*/
.datum-inline-wrap { position: relative; display: inline-block; }
.datum-inline-wrap input[type="date"] { color: transparent; }
.datum-inline-wrap input[type="date"]::-webkit-datetime-edit,
.datum-inline-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.datum-inline-wrap input[type="date"]::-webkit-datetime-edit-text,
.datum-inline-wrap input[type="date"]::-webkit-datetime-edit-day-field,
.datum-inline-wrap input[type="date"]::-webkit-datetime-edit-month-field,
.datum-inline-wrap input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent;
}
.datum-prikaz {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  font: inherit;
  white-space: nowrap;
}

.panel {
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.panel h2 { font-size: 13px; margin: 0 0 8px 0; color: #33475b; text-transform: uppercase; letter-spacing: .03em; }

.row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.row label { font-size: 12px; color: #333; }
.row input[type=text], .row input[type=number], .row select { padding: 5px 7px; border: 1px solid #c3c9d1; border-radius: 4px; font-size: 12px; }
#sifraInput { width: 320px; }
#kategorijaSelect { width: 380px; }
.checkbox-inline { display: flex; align-items: center; gap: 4px; }

.sifra-preview { font-size: 12px; color: #2f6fb0; margin-left: 6px; }

.section-heading { font-size: 15px; margin: 18px 0 6px 0; color: #24344a; border-bottom: 2px solid #24344a; padding-bottom: 3px; }

table.offer-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin-bottom: 6px;
}
table.offer-table th, table.offer-table td {
  border: 1px solid #d3d7dd;
  padding: 4px 6px;
  font-size: 12px;
  text-align: center;
}
table.offer-table th { background: #eef1f5; }
table.offer-table td.naziv-cell { text-align: left; }
table.offer-table td.br-cell { text-align: left; font-weight: bold; background: #f7f9fb; }
.latin-col { text-align: left !important; }
table.offer-table input[type=number], table.offer-table input[type=text] { width: 60px; text-align: center; padding: 2px; }
table.offer-table img.thumb { max-width: 110px; max-height: 110px; display: block; margin: auto; border: 1px solid #d3d7dd; border-radius: 4px; }
table.offer-table td.slika-cell { width: 120px; }
a.proizvod-link { color: #2f6fb0; text-decoration: none; }
a.proizvod-link:hover { text-decoration: underline; }
.sifra-preview a { color: #2f6fb0; }
table.offer-table .ukloni-btn { background: #e8e8e8; border: 1px solid #ccc; font-size: 11px; padding: 2px 6px; }
tr.grupa-header td { background: #dde6f0; font-weight: bold; text-align: left; }
tr.na-stanju-ne { background: #fdeaea; }

/* -webkit-print-color-adjust/print-color-adjust: bez ovoga browser pri štampi po difoltu
   izbacuje background boje (štedi mastilo) pa tačkice ispadnu bezbojne/bledе. */
.stanje-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.stanje-dot.da { background: #2ecc71; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.stanje-dot.ne { background: #e74c3c; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
td.stanje-cell { text-align: center; }

.cenovnik-grupa { border: 1px solid #d3d7dd; border-radius: 4px; padding: 4px 10px; margin-bottom: 6px; background: #fafbfc; }
.cenovnik-grupa summary { cursor: pointer; font-weight: bold; padding: 3px 0; }
.cenovnik-grupa-kat { margin: 4px 0 4px 22px; display: flex; flex-direction: column; gap: 2px; }

.napomena { font-style: italic; color: #555; font-size: 12px; margin: 4px 0 16px 0; }

.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #d3d7dd; border-radius: 12px; padding: 3px 4px 3px 10px; margin: 0 6px 6px 0; background: #fafbfc; font-size: 13px; }
.chip button { border: none; background: none; cursor: pointer; color: #888; font-size: 14px; line-height: 1; padding: 0 4px; }
.chip button:hover { color: #e74c3c; }

.oznake-wrap { display: inline-block; white-space: nowrap; margin-right: 5px; vertical-align: middle; }
img.oznaka-icon { width: 17px; height: 17px; vertical-align: middle; margin-right: 2px; }

.recap {
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 6px;
  padding: 12px 16px;
  max-width: 480px;
  margin-left: auto;
  margin-bottom: 20px;
}
.recap .rline { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.recap .rline.total { border-top: 2px solid #24344a; margin-top: 6px; padding-top: 8px; font-weight: bold; font-size: 15px; }
.recap .rline.sub { color: #555; font-size: 12px; }
.recap .napomena-recap { font-style: italic; font-size: 11px; color: #777; display: block; padding-bottom: 6px; }
.recap h2.section-heading { font-size: 13px; margin: 14px 0 4px 0; border-bottom: 1px solid #c3c9d1; }
.recap h2.section-heading:first-child { margin-top: 0; }

.no-print-controls input { }

#cenovnikContainer table { width: 100%; border-collapse: collapse; margin-top: 10px; }
#cenovnikContainer th, #cenovnikContainer td { border: 1px solid #d3d7dd; padding: 4px 6px; font-size: 11.5px; }
#cenovnikContainer th { background: #eef1f5; }
#cenovnikContainer tr.cat-row td { background: #24344a; color: #fff; font-weight: bold; }
#cenovnikContainer td.naziv-cell { text-align: left; }
#cenovnikContainer img.thumb { max-width: 90px; max-height: 90px; display: block; margin: auto; border: 1px solid #d3d7dd; border-radius: 4px; }
#cenovnikContainer td.slika-cell { width: 100px; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; padding: 0; }
  .panel { display: none !important; }
  .topbar { display: none !important; }
  .recap { margin: 0; max-width: none; border: none; padding: 0; }
  table.offer-table th:nth-last-child(1) { display: none; }
  table.offer-table td:nth-last-child(1) { display: none; }
  table.offer-table img.thumb, #cenovnikContainer img.thumb { max-width: 55px; max-height: 55px; }
  img.oznaka-icon { width: 13px; height: 13px; }
}