/* 365activation — BRAND BOOK u kodu (docs/BRAND-BOOK.md). Izvor je naslovna strana (sajt.css + okvir-sajta.css, odobreno „V1 tanki akcenti“): svetlo, Geist + Geist Mono,
   zelena samo kao akcenat, pill dugmad, tanke linije, mirna tipografija (400 / 600). Sve strane (sajt, nalog, admin, panel na uređaju) koriste OVE tokene i komponente.
   Pravilo: nova boja, veličina ili komponenta se prvo upiše u brand book, pa ovde. Nema „skoro iste“ varijante.
   Font: strana mora da učita Geist i Geist Mono (@font-face u okvir-sajta.css / klijent.css / admin.css). */
:root {
  /* boje */
  --b-ink: #0D1511; --b-siva: #4E5B54; --b-siva2: #6E7A74; --b-linija: #E3E8E5; --b-linija2: #CED6D1; --b-povrs: #F4F6F5; --b-bela: #FFFFFF;
  --b-zel: #12A86A; --b-zel-t: #0E8F5A; --b-mint: #EAF7F0; --b-mint2: #DFF3E8;
  --b-upoz: #FFF3D6; --b-upoz-t: #8A6A12; --b-greska: #C2352B; --b-greska-bg: #FDECEA;
  /* tipografija */
  --b-font: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; --b-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --b-t-strana: 32px; --b-t-sekcija: 20px; --b-t-tekst: 16px; --b-t-sitno: 14px; --b-t-oznaka: 12px;
  /* oblik */
  --b-r-s: 8px; --b-r-m: 12px; --b-r-l: 18px; --b-r-pilula: 999px;
  --b-senka: 0 10px 26px rgba(20, 40, 30, .08); --b-senka-visoka: 0 20px 60px rgba(20, 40, 30, .22);
  --b-razmak: 8px; --b-prelaz: .15s ease;
}

/* osnova (primenjuje se unutar .b ili na celoj strani) */
.b, .b * { box-sizing: border-box; }
.b { font-family: var(--b-font); font-size: var(--b-t-tekst); line-height: 1.5; font-weight: 400; color: var(--b-ink); -webkit-font-smoothing: antialiased; text-align: left; }
.b h1, .b h2, .b h3, .b h4 { margin: 0; font-family: var(--b-font); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--b-ink); }
.b h1 { font-size: var(--b-t-strana); letter-spacing: -.025em; } .b h2 { font-size: var(--b-t-sekcija); } .b h3 { font-size: 20px; letter-spacing: -.01em; }
.b p { margin: 0; color: var(--b-siva); }
.b :focus-visible { outline: 3px solid var(--b-zel); outline-offset: 3px; border-radius: 6px; }

/* oznaka (eyebrow): Geist Mono, velika slova, razmak — kao „AKTIVACIJE ZA DOGAĐAJE I BRENDOVE“ na naslovnoj */
.b-oznaka { font-family: var(--b-mono); font-weight: 500; font-size: var(--b-t-oznaka); letter-spacing: .12em; text-transform: uppercase; color: var(--b-siva); }
.b-broj { font-family: var(--b-mono); font-variant-numeric: tabular-nums; }
.b-tiho { color: var(--b-siva); } .b-sitno { font-size: var(--b-t-sitno); color: var(--b-siva); }

/* dugmad: pill; glavna zelena (jedna po prizoru), druga sa ink obrubom, treća tekst */
.b-dug { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--b-r-pilula); border: 1.5px solid var(--b-ink); background: var(--b-bela); color: var(--b-ink);
  font: 600 16px/1 var(--b-font); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--b-prelaz), color var(--b-prelaz), border-color var(--b-prelaz); }
.b-dug:hover:not(:disabled) { background: var(--b-ink); color: var(--b-bela); }
.b-dug.z { background: var(--b-zel); border-color: var(--b-zel); color: #fff; } .b-dug.z:hover:not(:disabled) { background: var(--b-zel-t); border-color: var(--b-zel-t); }
.b-dug.t { border-color: transparent; background: transparent; color: var(--b-ink); padding: 0 12px; } .b-dug.t:hover:not(:disabled) { background: var(--b-povrs); color: var(--b-ink); }
.b-dug.m { min-height: 36px; padding: 0 16px; font-size: 14px; } .b-dug.v { min-height: 52px; padding: 0 28px; font-size: 16px; }
.b-dug:disabled { opacity: .4; cursor: not-allowed; }
@media (pointer: coarse), (max-width: 700px) { .b-dug.m { min-height: 44px; } }   /* dodir: najmanje 44 px */
.b-dug.opasno { border-color: var(--b-greska); color: var(--b-greska); } .b-dug.opasno:hover:not(:disabled) { background: var(--b-greska); color: #fff; }

/* polja */
.b-polje { display: grid; gap: 6px; } .b-polje > label, .b-polje > .b-lbl { font: 500 14px/1.3 var(--b-font); color: var(--b-ink); }
input.b-unos, textarea.b-unos, select.b-izbor, .b-unos, .b-izbor { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--b-linija2); border-radius: var(--b-r-m); background: var(--b-bela); color: var(--b-ink); font: 400 16px var(--b-font); transition: border-color var(--b-prelaz); }
.b-unos::placeholder { color: var(--b-siva2); } input.b-unos:hover, select.b-izbor:hover { border-color: var(--b-siva2); } input.b-unos:focus, select.b-izbor:focus, textarea.b-unos:focus { outline: 3px solid var(--b-zel); outline-offset: 0; border-color: var(--b-zel); }
.b-klizac { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; --p: 50%; }
.b-klizac::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--b-zel) var(--p), var(--b-linija) var(--p)); }
.b-klizac::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--b-bela); border: 2px solid var(--b-zel); box-shadow: 0 1px 3px rgba(20, 40, 30, .2); }
.b-klizac::-moz-range-track { height: 4px; border-radius: 4px; background: var(--b-linija); } .b-klizac::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--b-zel); }
.b-klizac::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--b-bela); border: 2px solid var(--b-zel); }
.b-kvaca { width: 20px; height: 20px; margin: 0; accent-color: var(--b-zel); cursor: pointer; }

/* segmentirano biranje (pill) i tabovi */
.b-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--b-r-pilula); background: var(--b-povrs); border: 1px solid var(--b-linija); width: 100%; }
.b-seg button { appearance: none; flex: 1; min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--b-r-pilula); background: transparent; color: var(--b-siva); font: 500 14px var(--b-font); cursor: pointer; transition: background var(--b-prelaz), color var(--b-prelaz); }
.b-seg button.a { background: var(--b-bela); color: var(--b-ink); box-shadow: 0 0 0 1px var(--b-linija2); font-weight: 600; }
.b-tabovi { display: flex; gap: 28px; border-bottom: 1px solid var(--b-linija); overflow-x: auto; }
.b-tabovi button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 0 12px; min-height: 44px; font: 500 16px var(--b-font); color: var(--b-siva); cursor: pointer; white-space: nowrap; }
.b-tabovi button:hover { color: var(--b-ink); } .b-tabovi button[aria-selected=true] { color: var(--b-ink); border-bottom-color: var(--b-zel); font-weight: 600; }

/* kartica, tabela, oznake stanja */
.b-kartica { background: var(--b-bela); border: 1px solid var(--b-linija); border-radius: var(--b-r-l); padding: 20px; }
.b-tabela { width: 100%; border-collapse: collapse; font-size: 16px; }
.b-tabela th { text-align: left; padding: 10px 12px; font: 500 12px var(--b-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--b-siva2); border-bottom: 1px solid var(--b-linija); }
.b-tabela td { padding: 14px 12px; border-bottom: 1px solid var(--b-linija); } .b-tabela tbody tr:last-child td { border-bottom: 0; }
.b-pilula { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--b-r-pilula); background: var(--b-povrs); color: var(--b-siva); font: 500 12px/1.4 var(--b-font); white-space: nowrap; }
.b-pilula.ok { background: var(--b-mint); color: var(--b-zel-t); } .b-pilula.upoz { background: var(--b-upoz); color: var(--b-upoz-t); } .b-pilula.greska { background: var(--b-greska-bg); color: var(--b-greska); }
.b-tacka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--b-siva2); } .b-tacka.on { background: var(--b-zel); }
.b-prazno { text-align: center; padding: 40px 16px; } .b-prazno b { display: block; font-weight: 600; font-size: 20px; color: var(--b-ink); margin-bottom: 4px; }

/* prozor */
.b-zavesa { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(13, 21, 17, .45); }
.b-prozor { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--b-bela); border-radius: var(--b-r-l); padding: 28px; display: grid; gap: 16px; box-shadow: var(--b-senka-visoka); }
.b-ok { color: var(--b-zel-t); font-weight: 500; } .b-gr { color: var(--b-greska); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .b *, .b-dug { transition: none !important; } }


/* ---------------------------------------------------------------- STANDARD: brojke (KPI), grafikoni, klizači — isto u nalogu, adminu i panelu na uređaju */
:root { --b-graf-1: var(--b-zel); --b-graf-2: #5CC995; --b-graf-3: var(--b-mint2); --b-graf-staza: var(--b-linija); --b-graf-osa: var(--b-siva2); --b-graf-upoz: #E0A526; }
/* KPI pločica: oznaka 14 siva, broj 32 / 600 (Geist, tabularne cifre), podtekst 14; levo poravnato; bez senke */
.b-kpi { background: var(--b-bela); border: 1px solid var(--b-linija); border-radius: var(--b-r-l); padding: 20px; display: grid; gap: 4px; align-content: start; text-align: left; }
.b-kpi .b-lbl { font: 400 14px/1.3 var(--b-font); color: var(--b-siva); } .b-kpi b, .b-kpi .b-vr { font: 600 32px/1.15 var(--b-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--b-ink); } .b-kpi .b-pod { font: 400 14px var(--b-font); color: var(--b-siva); }
/* stubići: staza mint, istaknut stubić zelen; krivulja: 2 px zelena, ispuna zelena 14 % → 0; prsten: debljina 10, bez sjaja; traka: staza linija, ispuna zelena (upozorenje žuto) */
.b-stubici i, .b-stubici rect { fill: var(--b-graf-3); background: var(--b-graf-3); border-radius: 4px 4px 0 0; } .b-stubici i.max, .b-stubici rect.max { fill: var(--b-graf-1); background: var(--b-graf-1); box-shadow: none; }
.b-traka { height: 8px; border-radius: 999px; background: var(--b-graf-staza); overflow: hidden; } .b-traka > i { display: block; height: 100%; border-radius: 999px; background: var(--b-graf-1); } .b-traka.upoz > i { background: var(--b-graf-upoz); }
/* klizač: isti izgled svuda (i bez klase); punjenje preko --p koje postavlja brend.js */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 32px; margin: 0; --p: 50%; accent-color: var(--b-zel); }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--b-zel) var(--p), var(--b-linija) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--b-bela); border: 2px solid var(--b-zel); box-shadow: 0 1px 3px rgba(20, 40, 30, .2); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--b-linija); } input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--b-zel); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--b-bela); border: 2px solid var(--b-zel); }