/* Kafe kuhinja — AD Magistrala.
   Pravac: vlasnikov izbor šablona „Cinnabar" (scrolltide) — skoro crna podloga,
   cinober crvena na rečima koje nose značenje, dim i tragovi svetla.
   Spojeno sa svetom firme (održavanje puteva): asfalt, isprekidana linija sa
   kolovoza i žuta privremena oznaka. Potpisni element = traka kolovoza koja
   preseca sekcije i prsten traga šolje kao znak. */

@font-face { font-family:'Inter'; src:url('/fonts/inter-400-latin-ext.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-400-latin.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-600-latin-ext.woff2') format('woff2'); font-weight:600; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-600-latin.woff2') format('woff2'); font-weight:600; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Bricolage'; src:url('/fonts/bricolage-700-latin-ext.woff2') format('woff2'); font-weight:700; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Bricolage'; src:url('/fonts/bricolage-700-latin.woff2') format('woff2'); font-weight:700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'SpaceMono'; src:url('/fonts/spacemono-400-latin-ext.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'SpaceMono'; src:url('/fonts/spacemono-400-latin.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --crna: #07080A;          /* podloga, kao u šablonu */
  --asfalt: #0E1013;        /* kartice */
  --asfalt-2: #15181C;      /* polja i zaglavlja tabela */
  --ivica: #23272D;
  --bela: #F3F5F8;
  --siva: #9AA2AD;
  --siva-2: #5B636E;
  --cinober: #E0391F;       /* akcenat šablona */
  --cinober-tamni: #B52A14;
  --zuta: #E8B40B;          /* privremena kolovozna oznaka */
  --zeleno: #35B47C;
  --r4:4px; --r8:8px; --r16:16px; --r24:24px; --r40:40px; --r64:64px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--crna); }

body {
  font-family:'Inter', system-ui, sans-serif;
  color: var(--bela);
  font-size:16px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}

h1, h2, h3 { font-family:'Bricolage','Inter',system-ui,sans-serif; font-weight:700; letter-spacing:-.02em; }
a { color: var(--cinober); }
.crveno { color: var(--cinober); }

/* oznaka sekcije, kao mono natpisi u šablonu */
.oznaka-sekcije {
  font-family:'SpaceMono', ui-monospace, monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--siva-2);
  display:block; margin-bottom:10px;
}

/* potpisni element: traka kolovoza */
.kolovoz {
  height:10px; width:100%;
  background:
    repeating-linear-gradient(90deg, var(--bela) 0 46px, transparent 46px 92px);
  opacity:.16;
}
.kolovoz.zuta { background:repeating-linear-gradient(90deg, var(--zuta) 0 30px, transparent 30px 70px); opacity:.5; }

.traka { background:var(--crna); border-bottom:1px solid var(--ivica); position:sticky; top:0; z-index:20; }
.traka-unutra { display:flex; align-items:center; gap:var(--r16); padding:12px clamp(12px,3vw,32px); flex-wrap:wrap; }
.znak { display:flex; align-items:center; gap:10px; font-family:'Bricolage',sans-serif; font-weight:700; }
.znak .prsten { width:20px; height:20px; border-radius:50%; border:3px solid var(--cinober); display:block; }
.traka nav { display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; }
.traka nav a { color:var(--siva); text-decoration:none; padding:8px 14px; border-radius:999px; font-size:15px; white-space:nowrap; }
.traka nav a:hover { background:rgba(224,57,31,.10); color:var(--bela); }
.traka nav a[aria-current="page"] { background:var(--cinober); color:#fff; }
.traka form { margin:0; }
.traka button.odjava { background:none; border:1px solid var(--ivica); color:var(--siva); padding:7px 14px; border-radius:999px; cursor:pointer; font:inherit; font-size:15px; }
.traka button.odjava:hover { color:var(--bela); border-color:var(--cinober); }

main { padding:clamp(16px,3vw,32px); }

h1 { font-size:clamp(26px,4vw,38px); margin:0 0 6px; }
h2 { font-size:21px; margin:var(--r40) 0 var(--r16); }
.podnaslov { color:var(--siva); margin:0 0 var(--r24); }

.kartice { display:grid; gap:var(--r16); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.kartica { background:var(--asfalt); border:1px solid var(--ivica); border-radius:var(--r16); padding:var(--r16) var(--r24); }
.kartica .broj { font-size:32px; font-weight:600; font-variant-numeric:tabular-nums; }
.kartica .oznaka { color:var(--siva); font-size:14px; }

table { width:100%; border-collapse:collapse; background:var(--asfalt); }
.okvir-tabele { overflow-x:auto; border:1px solid var(--ivica); border-radius:var(--r16); }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--ivica); }
th { background:var(--asfalt-2); font-size:13px; font-weight:600; white-space:nowrap; color:var(--siva); letter-spacing:.02em; }
td.broj, th.broj { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr:last-child td { border-bottom:0; }

.plus { color:var(--zeleno); font-weight:600; }
.minus { color:var(--cinober); font-weight:600; }

.izbor-clana { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--r24); }
.izbor-clana a { text-decoration:none; color:var(--siva); background:var(--asfalt); border:1px solid var(--ivica); border-radius:999px; padding:10px 16px; font-size:15px; }
.izbor-clana a:hover { color:var(--bela); border-color:var(--cinober); }
.izbor-clana a.aktivan { background:var(--cinober); color:#fff; border-color:var(--cinober); }

.dugmad { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.dugmad form { margin:0; display:flex; }
.dugme-artikal { width:100%; }
.dugme-artikal {
  background:var(--asfalt); border:1px solid var(--ivica); border-radius:var(--r16);
  padding:16px; display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  cursor:pointer; font:inherit; color:var(--bela); text-align:left; min-height:92px; position:relative;
  transition:border-color .15s, box-shadow .15s;
}
.dugme-artikal:hover { border-color:var(--cinober); box-shadow:0 0 0 3px rgba(224,57,31,.10); }
.dugme-artikal:active { transform:translateY(1px); }
.dugme-artikal .ime { font-weight:600; padding-right:34px; }
.dugme-artikal .cena { color:var(--siva); font-size:14px; font-family:'SpaceMono',monospace; }
.dugme-artikal .danas {
  position:absolute; top:10px; right:10px; min-width:28px; height:28px; border-radius:50%;
  border:2px solid var(--cinober); color:var(--cinober); display:grid; place-items:center; font-size:14px; font-weight:600;
}

form.red { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 var(--r16); }
label { display:block; font-size:13px; color:var(--siva); margin-bottom:4px; }
input, select {
  font:inherit; padding:10px 12px; border:1px solid var(--ivica); border-radius:var(--r8);
  background:var(--asfalt-2); color:var(--bela); min-width:120px;
}
input:focus, select:focus { outline:2px solid var(--cinober); outline-offset:1px; }
input[type="checkbox"] { min-width:auto; width:18px; height:18px; accent-color:var(--cinober); }
button.glavno { font:inherit; font-weight:600; background:var(--cinober); color:#fff; border:0; padding:11px 20px; border-radius:var(--r8); cursor:pointer; }
button.glavno:hover { background:var(--cinober-tamni); }
button.sporedno { font:inherit; background:var(--asfalt-2); color:var(--bela); border:1px solid var(--ivica); padding:10px 16px; border-radius:var(--r8); cursor:pointer; }
button.sporedno:hover { border-color:var(--cinober); }

.poruka { background:rgba(53,180,124,.08); border:1px solid rgba(53,180,124,.4); border-left:4px solid var(--zeleno); padding:12px 16px; border-radius:var(--r8); margin-bottom:var(--r16); }
.upozorenje { background:rgba(224,57,31,.08); border:1px solid rgba(224,57,31,.45); border-left:4px solid var(--cinober); padding:12px 16px; border-radius:var(--r8); margin-bottom:var(--r16); }

/* Naslovna */
.hero {
  position:relative; overflow:hidden; padding:clamp(48px,10vw,120px) clamp(16px,4vw,72px) clamp(40px,7vw,80px);
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(224,57,31,.30), transparent 70%),
    radial-gradient(45% 40% at 20% 85%, rgba(224,57,31,.12), transparent 70%),
    var(--crna);
}
.hero .dim {
  position:absolute; inset:auto -10% -30% -10%; height:60%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(224,57,31,.22), transparent 70%);
  filter:blur(40px); pointer-events:none;
}
.hero h1 { font-size:clamp(32px,6.4vw,64px); max-width:19ch; line-height:1.04; margin:14px 0 18px; }
.hero p { max-width:56ch; font-size:clamp(16px,1.6vw,19px); color:var(--siva); }
.cta { display:inline-block; margin-top:var(--r24); background:var(--cinober); color:#fff; text-decoration:none; font-weight:600; padding:14px 26px; border-radius:var(--r8); }
.cta:hover { background:var(--cinober-tamni); }
.hero .pilule { display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--r24); }
.hero .pilule span {
  font-family:'SpaceMono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ivica); border-radius:999px; padding:6px 12px; color:var(--siva);
}

.sta-radi { display:grid; gap:var(--r16); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
@media (min-width:1080px) { .sta-radi { grid-template-columns:repeat(3,1fr); } }
.sta-radi .stavka { background:var(--asfalt); border:1px solid var(--ivica); border-radius:var(--r16); padding:var(--r24); position:relative; }
.sta-radi .stavka::after { content:""; position:absolute; left:var(--r24); right:var(--r24); top:0; height:2px; background:var(--cinober); opacity:.55; }
.sta-radi h3 { margin:0 0 6px; font-size:18px; }
.sta-radi p { margin:0; color:var(--siva); }

.pwa {
  margin:var(--r64) 0 0; background:linear-gradient(180deg, rgba(224,57,31,.10), transparent), var(--asfalt);
  border:1px solid var(--ivica); border-radius:var(--r24); padding:clamp(24px,4vw,44px);
  display:flex; gap:var(--r24); flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.pwa h2 { margin:0 0 6px; }
.pwa ol { margin:10px 0 0; padding-left:20px; color:var(--siva); }
.pwa .stanje { font-size:14px; color:var(--siva-2); margin-top:10px; font-family:'SpaceMono',monospace; }

footer { padding:var(--r40) clamp(16px,3vw,32px) var(--r64); color:var(--siva-2); font-size:14px; border-top:1px solid var(--ivica); }
footer .firma { color:var(--bela); font-family:'Bricolage',sans-serif; font-weight:700; font-size:18px; display:block; margin-bottom:4px; }
footer a { color:var(--siva); }

@media (max-width:560px) {
  .traka nav a { padding:8px 10px; font-size:14px; }
  th, td { padding:9px 8px; }
  main { padding-bottom:40px; }
}

/* Zbirni prikaz — tabela kao na papiru */
.zbirna th.ime-kolona, .zbirna td.ime-kolona {
  position:sticky; left:0; background:var(--asfalt-2); z-index:1; min-width:150px;
}
.zbirna tbody td.ime-kolona { background:var(--asfalt); }
.zbirna th.cena-red { font-family:'SpaceMono',monospace; color:var(--cinober); font-weight:400; }
.zbirna td, .zbirna th { text-align:center; }
.zbirna td.ime-kolona, .zbirna th.ime-kolona { text-align:left; }
.zbirna td.broj, .zbirna th.broj { text-align:center; }

@media print {
  @page { size:A4 landscape; margin:10mm; }
  html, body { background:#fff; color:#000; }
  .traka, .no-print, footer, form.red { display:none !important; }
  main { padding:0; }
  h1, .oznaka-sekcije { color:#000; }
  .okvir-tabele { border:1px solid #000; border-radius:0; overflow:visible; }
  table { background:#fff; }
  th, td { border:1px solid #666; color:#000; font-size:11px; padding:4px 6px; }
  th { background:#eee !important; }
  .zbirna th.ime-kolona, .zbirna td.ime-kolona { background:#fff !important; position:static; }
  .zbirna th.cena-red { color:#000; }
  .minus, .plus { color:#000 !important; }
}

.red-naslova { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--r16); flex-wrap:wrap; }
.datum-stampe { color:var(--siva); font-family:'SpaceMono',monospace; font-size:13px; margin:0 0 var(--r16); }
@media print { .datum-stampe { color:#000; } }

/* Uputstvo */
.uputstvo { max-width:none; }
.uputstvo h2 { color:var(--bela); border-top:1px solid var(--ivica); padding-top:var(--r16); max-width:70ch; }
.uputstvo p, .uputstvo li { color:var(--siva); max-width:70ch; }
.uputstvo strong { color:var(--bela); }
.uputstvo em { color:var(--siva); }
.uputstvo ul, .uputstvo ol { padding-left:20px; }
.uputstvo li { margin-bottom:6px; }
.uputstvo .uvod {
  background:var(--asfalt); border:1px solid var(--ivica); border-left:3px solid var(--cinober);
  border-radius:var(--r8); padding:14px 18px; max-width:70ch;
}

.skener-poruka { color:var(--siva); font-size:14px; margin:10px 0; min-height:1.4em; }
.skener-poruka a { color:var(--cinober); }