/* ═══════════════════════════════════════════════════════════════
   KoFol UI — LJUSKA APLIKACIJE (kofol-ljuska.js)
   Telefon (do 767 px): donja traka + „Sve" preko cijelog ekrana.
   Računar (768 px+): lijeva šina + „Sve" kao panel pored šine — samo ako
   aplikacija to traži (html.kl-sina). Sve boje dolaze iz kofol-ui.css.
   ═══════════════════════════════════════════════════════════════ */
:root { --kl-sirina: 88px; --kl-vrh: 56px; }
/* Android (Xiaomi, Samsung) ne smije sam povećavati font u blokovima — to lomi raspored */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#kl-traka, #kl-sve, #kl-zastor, .kl-hdr { display: none; }
/* Ikone ljuske (ako aplikacija nema .ico iz kofol-ui.css, ovo je dovoljno) */
#kl-traka .ico, #kl-sve .ico, .kl-hdr .ico { display: inline-block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; flex: 0 0 auto; }

/* ── Zajedničko: traka/šina ── */
#kl-traka { position: fixed; z-index: 9000; background: #000; color: #a1a1aa; }
#kl-traka button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: 700 10.5px var(--k-mono); text-transform: uppercase; letter-spacing: .02em; background: none; border: 0; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; padding: 0 2px; min-width: 0; min-height: 0; }
#kl-traka button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kl-traka .ico { width: 24px; height: 24px; }
#kl-traka button { transition: color .15s ease; }
#kl-traka button.on { color: #fff; }
#kl-traka button.on::before { content: ""; position: absolute; background: #22c55e; }
#kl-traka button:hover { color: #fff; }
#kl-traka button:active { background: #18181b; }
#kl-traka button:focus-visible { outline: 2px solid #22c55e; outline-offset: -4px; }
.kl-bdg { position: absolute; top: 7px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff;
  font: 800 10px/18px var(--k-font); letter-spacing: 0; text-align: center; border: 2px solid #000; box-sizing: content-box; }
.kl-bdg.tacka { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 10px; left: calc(50% + 9px); }
.kl-bdg[hidden] { display: none !important; }

/* ── Zaglavlje: naslov ekrana + pretraga ── */
.kl-naslov { flex: 1; min-width: 0; align-items: center; gap: 10px; font: 900 15px/1 var(--k-font); text-transform: uppercase; letter-spacing: -.01em; color: var(--k-traka-tekst, #fafafa); }
.kl-naslov::before { content: ""; width: 2px; height: 20px; background: #3f3f46; flex: 0 0 2px; }
.kl-naslov span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kl-trazi { align-items: center; justify-content: center; }

/* ── „Sve" ── */
#kl-sve { flex-direction: column; position: fixed; z-index: 9500; background: var(--k-bg); color: var(--k-tekst); visibility: hidden; opacity: 0; pointer-events: none;
  will-change: opacity, transform; backface-visibility: hidden; contain: layout paint; }
#kl-sve.otv { visibility: visible; opacity: 1; pointer-events: auto; }
/* Pojava sadržaja pri promjeni ekrana: samo providnost, kratko — bez pomjeranja (pomjeranje je trzalo zalijepljene kartice) */
@keyframes kl-pojava { from { opacity: 0; } to { opacity: 1; } }
.kl-sve-v { flex: 0 0 auto; background: #000; color: #fafafa; padding: 14px 16px 16px; border-bottom: 2px solid #27272a; }
.kl-sve-red { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kl-sve-red b { font: 900 26px/1 var(--k-font); text-transform: uppercase; letter-spacing: -.02em; margin-right: auto; }
.kl-sve-red button { height: 42px; min-height: 42px; padding: 0 14px; background: transparent; color: #fafafa; border: 2px solid #52525b; font: 700 10px var(--k-mono); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.kl-sve-red button.on { background: #22c55e; border-color: #22c55e; color: #000; }
.kl-sve-red .kl-x { width: 42px; padding: 0; display: grid; place-items: center; }
.kl-sve-red .kl-x .ico { width: 18px; height: 18px; }
.kl-trazi { display: flex; align-items: center; gap: 8px; background: #18181b; border: 2px solid #3f3f46; padding: 0 12px; }
.kl-trazi:focus-within { border-color: #22c55e; }
.kl-trazi .ico { width: 18px; height: 18px; color: #71717a; flex: 0 0 auto; }
.kl-trazi input { flex: 1; min-width: 0; height: 48px; min-height: 48px; background: transparent; border: 0; outline: 0; color: #fafafa; font: 400 16px var(--k-mono); padding: 0; }
.kl-trazi input::placeholder { color: #71717a; }
.kl-sve-s { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 16px calc(36px + env(safe-area-inset-bottom)); }
.kl-uputa { margin: 18px 0 0; padding: 14px 16px; border: 2px dashed #22c55e; font: 400 13px/1.55 var(--k-mono); }
.kl-uputa b { font-weight: 800; }
.kl-kat { font: 700 11px var(--k-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--k-tekst-3); margin: 30px 2px 12px; display: flex; align-items: center; gap: 8px; }
.kl-kat::after { content: ""; flex: 1; height: 1px; background: var(--k-linija-3); }
.kl-mreza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.kl-ploc { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 108px; padding: 16px 14px 14px; text-align: left;
  background: var(--k-povrsina); color: var(--k-tekst); border: 2px solid var(--k-linija); box-shadow: var(--k-sjena-mala); cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.kl-ploc:hover { background: var(--k-povrsina-2); }
.kl-ploc:active { transform: translate(2px, 2px); box-shadow: none; }
.kl-ploc { transition: background-color .15s ease, border-color .15s ease; }
.kl-ploc > .ico { width: 22px; height: 22px; }
.kl-ploc b { font: 900 15px/1.1 var(--k-font); text-transform: uppercase; letter-spacing: -.01em; }
.kl-ploc small { font: 400 11.5px/1.4 var(--k-mono); color: var(--k-tekst-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kl-ploc.on { border-color: #16a34a; box-shadow: 3px 3px 0 0 #16a34a; }
.kl-ploc .kl-bdg { top: 10px; left: auto; right: 10px; border-color: var(--k-povrsina); }
.kl-pin { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border: 2px solid var(--k-linija); display: none; place-items: center; font: 900 13px var(--k-font); background: var(--k-povrsina); }
#kl-sve.uredi .kl-pin { display: grid; }
#kl-sve.uredi .kl-ploc .kl-bdg { display: none; }
#kl-sve.uredi .kl-ploc.pin .kl-pin { background: #22c55e; border-color: #16a34a; color: #000; }
#kl-sve.uredi .kl-ploc.prva { opacity: .45; }
.kl-rez { margin-top: 12px; border: 2px solid var(--k-linija); background: var(--k-povrsina); }
.kl-rez button { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-height: 0; padding: 15px 16px; text-align: left; background: transparent; color: inherit; border: 0; border-bottom: 1px solid var(--k-linija-3); cursor: pointer; }
.kl-rez button:last-child { border-bottom: 0; }
.kl-rez button:hover, .kl-rez button:focus-visible { background: var(--k-povrsina-2); }
.kl-rez button .ico { width: 18px; height: 18px; flex: 0 0 auto; }
.kl-rez b { font: 800 15px/1.3 var(--k-font); display: block; }
.kl-rez small { font: 400 12px/1.4 var(--k-mono); color: var(--k-tekst-3); }
.kl-rez p { padding: 16px 14px; font: 400 12px var(--k-mono); color: var(--k-tekst-3); }
.kl-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.kl-post button, .kl-post a { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 0 14px; background: var(--k-povrsina); color: var(--k-tekst); border: 2px solid var(--k-linija-2);
  font: 700 11.5px var(--k-mono); text-transform: uppercase; letter-spacing: .03em; text-align: left; cursor: pointer; text-decoration: none; }
.kl-post button:hover, .kl-post a:hover { border-color: var(--k-linija); }
.kl-post .ico { width: 17px; height: 17px; flex: 0 0 auto; }
.kl-post .crveno { color: #ef4444 !important; border-color: #ef4444 !important; }
.kl-ver { margin-top: 22px; text-align: center; font: 400 11px var(--k-mono); color: var(--k-tekst-3); }

/* Dok se kuca, traka se skloni (telefon) */
html.kl-pise #kl-traka { display: none !important; }

/* ═══ TELEFON ═══ */
@media (max-width: 767px) {
  html.kl-aktivna .kl-hdr { display: flex; }
  html.kl-aktivna #kl-traka { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; left: 0; right: 0; bottom: 0; border-top: 2px solid #27272a;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #kl-traka button { height: 64px; }
  #kl-traka button.on::before { top: -2px; left: 24%; right: 24%; height: 3px; }
  html.kl-aktivna #kl-sve { display: flex; left: 0; right: 0; top: 0; bottom: 0; transform: translate3d(0, 28px, 0);
    transition: opacity .16s ease-in, transform .16s ease-in, visibility 0s linear .16s; }
  html.kl-aktivna #kl-sve.otv { transform: translate3d(0, 0, 0); transition: opacity .2s ease-out, transform .24s cubic-bezier(.16,1,.3,1); }
  .kl-sve-v { padding-top: calc(10px + env(safe-area-inset-top)); }
  /* aplikacija ostavi mjesta za traku */
  html.kl-aktivna body { --kl-dno: calc(80px + env(safe-area-inset-bottom)); }
  html.kl-pise body { --kl-dno: 16px; }
}

/* ═══ RAČUNAR (samo kad aplikacija traži šinu) ═══ */
@media (min-width: 768px) {
  html.kl-aktivna.kl-sina .kl-hdr { display: flex; }
  html.kl-aktivna.kl-sina #kl-traka { display: flex; flex-direction: column; left: 0; top: var(--kl-vrh); bottom: 0; width: var(--kl-sirina); padding: 8px 0 12px;
    border-right: 2px solid #27272a; overflow-y: auto; scrollbar-width: none; }
  html.kl-sina #kl-traka button { height: 76px; flex: 0 0 76px; gap: 7px; }
  html.kl-sina #kl-traka button[data-a="sve"] { margin-top: auto; }
  html.kl-sina #kl-traka button.on::before { left: 0; top: 16%; bottom: 16%; width: 3px; }
  html.kl-sina .kl-bdg { top: 9px; left: calc(50% + 6px); }
  html.kl-aktivna.kl-sina .kl-pomak { padding-left: var(--kl-sirina) !important; }
  html.kl-aktivna.kl-sina #kl-sve { display: flex; left: var(--kl-sirina); top: var(--kl-vrh); bottom: 0; width: min(960px, calc(100vw - var(--kl-sirina)));
    border-right: 2px solid var(--k-linija); transform: translate3d(-20px, 0, 0); transition: opacity .14s ease-in, transform .14s ease-in, visibility 0s linear .14s; }
  html.kl-aktivna.kl-sina #kl-sve.otv { transform: translate3d(0, 0, 0); transition: opacity .18s ease-out, transform .22s cubic-bezier(.16,1,.3,1); }
  html.kl-aktivna.kl-sina #kl-zastor { display: block; position: fixed; inset: var(--kl-vrh) 0 0 var(--kl-sirina); z-index: 9400; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
  html.kl-aktivna.kl-sina #kl-zastor.otv { opacity: 1; visibility: visible; transition: opacity .18s ease; }
  .kl-sve-s { padding: 8px 32px 36px; }
  .kl-sve-v { padding: 18px 32px; }
  .kl-mreza { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .kl-post { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.kl-sina body { --kl-dno: 0px; }
}
@media (min-width: 1100px) { .kl-mreza { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { #kl-sve, #kl-zastor, #kl-traka button, .kl-ploc { transition: none !important; } }
@media print { #kl-traka, #kl-sve, #kl-zastor, .kl-hdr { display: none !important; } }

/* ═══ AI prozori (kofol-ai.js) — isti u svim KoFol aplikacijama ═══ */
.kai-dlg { position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; animation: kl-pojava .14s ease-out; }
.kai-k { width: min(600px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--k-povrsina); color: var(--k-tekst); border: 3px solid var(--k-linija); box-shadow: 6px 6px 0 #000; padding: 20px; }
.kai-v { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kai-v b { font: 900 18px/1.2 var(--k-font); text-transform: uppercase; letter-spacing: -.01em; }
.kai-v button { width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; border: 2px solid var(--k-linija-2); background: transparent; color: inherit; cursor: pointer; flex: 0 0 auto; }
.kai-v .ico { width: 18px; height: 18px; }
.kai-s { font: 400 12.5px/1.5 var(--k-mono); color: var(--k-tekst-3); margin: 0 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.kai-l { display: block; font: 700 11px var(--k-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--k-tekst-2); margin: 0 0 12px; }
.kai-l select, .kai-l textarea { display: block; width: 100%; margin-top: 6px; }
.kai-k textarea, .kai-k select { width: 100%; padding: 12px 14px; border: 2px solid var(--k-linija); background: var(--k-povrsina-2); color: var(--k-tekst); font: 400 15px/1.55 var(--k-font); outline: 0; resize: vertical; }
.kai-k select { height: 46px; padding: 0 12px; font-family: var(--k-mono); }
.kai-k textarea:focus, .kai-k select:focus { border-color: #22c55e; }
.kai-d { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kai-d button { flex: 1 1 auto; min-height: 46px; padding: 0 16px; border: 2px solid var(--k-linija); background: var(--k-tekst); color: var(--k-bg); font: 800 12px var(--k-mono); text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.kai-d button:disabled { opacity: .45; cursor: default; }
.kai-d button.wa { background: #16a34a; border-color: #16a34a; color: #fff; }
.kai-d button.sek { background: transparent; color: var(--k-tekst); }
.kai-d .ico { width: 16px; height: 16px; }
.kai-vrste { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.kai-vrste button { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--k-linija-2); border-radius: 18px; background: transparent; color: var(--k-tekst-2); font: 400 12px var(--k-mono); cursor: pointer; white-space: nowrap; }
.kai-vrste button.on { background: var(--k-tekst); color: var(--k-bg); border-color: var(--k-tekst); }
.kai-tackice { display: inline-flex; gap: 4px; margin-right: 4px; }
.kai-tackice span { width: 6px; height: 6px; background: #22c55e; display: inline-block; animation: kai-tacka 1s ease-in-out infinite; }
.kai-tackice span:nth-child(2) { animation-delay: .15s; } .kai-tackice span:nth-child(3) { animation-delay: .3s; }
@keyframes kai-tacka { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.kai-odg { font: 400 14.5px/1.6 var(--k-font); }
.kai-odg p { margin: 0 0 8px; } .kai-odg ul { margin: 4px 0 10px 18px; padding: 0; list-style: square; } .kai-odg li { margin: 4px 0; }
.kai-kadrovi { display: grid; gap: 6px; margin: 4px 0 4px; max-height: 46vh; overflow: auto; border: 2px solid var(--k-linija-3); padding: 6px; }
.kai-kadrovi label { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--k-linija-3); background: var(--k-povrsina-2); cursor: pointer; }
.kai-kadrovi input { width: 20px; height: 20px; margin-top: 2px; accent-color: #16a34a; }
.kai-kadrovi b { display: block; font: 800 13px var(--k-mono); margin-bottom: 3px; }
.kai-kadrovi span { font: 400 14px/1.45 var(--k-font); }
.kai-kadrovi small { display: block; margin-top: 4px; font: 400 11.5px var(--k-mono); color: var(--k-tekst-3); }
.kai-red { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.kai-dugme { border-color: #16a34a !important; }
@media (max-width: 767px) { .kai-dlg { place-items: start center; padding: calc(10px + env(safe-area-inset-top)) 10px 10px; } .kai-k textarea { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .kai-tackice span { animation: none; opacity: .7; } }