/* Scalebiz — zajednicki vizuelni jezik aplikacije.
 *
 * Vrednosti nisu birane nego IZMERENE iz izvoza Claude Design-a: prebrojane su
 * sve boje, radijusi i velicine teksta na pet ekrana, pa su najcesce uzete kao
 * merodavne. Zato ovde nema "priblizno kao u dizajnu" — ima tacno ono sto je u
 * dizajnu najcesce upotrebljeno.
 *
 * Menja se SAMO ovde. Nijedna strana ne sme da drzi sopstvenu paletu.
 */

/* ---------------------------------------------------------------- fontovi
 *
 * Fontovi se posluzuju sa scalebiz.app, ne sa Google-ovih servera. Ranije je
 * svaki posetilac slao svoju IP adresu Google-u pre nego sto bi bilo sta
 * kliknuo — nemacki sud je 2022. presudio da je to krsenje GDPR-a.
 *
 * Iseceni su na latinicu sa dijakriticima (ukljucujuci c, c, z, s, dj),
 * interpunkciju, valute i strelice. Sa 6 MB na 124 KB.
 *
 * font-display:swap znaci da se tekst vidi odmah sistemskim fontom, pa se
 * zameni kad font stigne. Bez toga bi strana na trenutak bila prazna.
 */

@font-face{
  font-family:'Instrument Sans';
  src:url('/assets/fonts/instrument-sans.woff2') format('woff2-variations'),
      url('/assets/fonts/instrument-sans.woff2') format('woff2');
  font-weight:400 700;          /* variable: jedan fajl pokriva sve tezine */
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/plex-mono-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/plex-mono-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- boje teksta ---------------------------------------------------- */
  --ink:        #0E1420;   /* naslovi i glavni tekst */
  --muted:      #5A6474;   /* najcesca boja teksta u dizajnu, 461 pojava */
  --muted-2:    #6B7385;   /* verzalni natpisi */
  --tih:        #8A92A0;   /* najtiši tekst, napomene */
  --ink-soft:   #3C4657;   /* tekst na svetlim panelima */

  /* ---- brend i stanja -------------------------------------------------- */
  --accent:     #2B54C9;
  --accent-tam: #1B3EA0;
  --accent-bg:  #EEF2FE;
  --zelena:     #1F7A5C;
  --zelena-bg:  #E8F5EF;
  --zuta:       #8A5A11;
  --zuta-bg:    #FDF6EC;
  --crvena:     #9B2C2C;
  --crvena-bg:  #FDF0F0;

  /* ---- povrsine -------------------------------------------------------- */
  --bg:         #F4F6F9;   /* pozadina aplikacije */
  --povrs:      #FFFFFF;   /* kartice */
  --polje:      #F1F3F6;   /* uneseni blokovi, oznake */
  --polje-2:    #FBFCFD;
  --plavi-blok: #F7F9FF;

  /* ---- linije ---------------------------------------------------------- */
  --linija:     #E3E6EC;   /* okvir kartice */
  --linija-2:   #E0E4EA;
  --linija-red: #EDEFF3;   /* razdelnik reda u tabeli */
  --linija-pol: #D9DDE5;   /* okvir polja za unos */

  /* ---- zaobljenja ------------------------------------------------------ */
  --r-kart:     12px;      /* kartica */
  --r-dugme:    8px;       /* dugme i polje */
  --r-oznaka:   5px;       /* mala oznaka */
  --r-pilula:   99px;
  --r-sitno:    6px;

  /* ---- tipografija ----------------------------------------------------- */
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-osnovni:  14px;
  --t-sitni:    13px;
  --t-oznaka:   11.5px;
  --t-natpis:   10.5px;    /* verzalni natpisi, uvek mono */
  --t-naslov:   16px;      /* naslov sekcije */
  --t-strana:   24px;      /* naslov strane */
}

/* ---------------------------------------------------------------- osnova */

*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-osnovni);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

button,select,input,textarea{ font:inherit }
a{ color:var(--accent) }
[hidden]{ display:none !important }

/* Dizajn koristi samo tri tezine. Cetvrta bi odmah odala da nesto nije odatle. */
h1,h2,h3,b,strong{ font-weight:600 }

h1{ font-size:var(--t-strana); letter-spacing:-.02em; margin:0; font-weight:600 }
h2{ font-size:var(--t-naslov); letter-spacing:-.02em; margin:0; font-weight:600 }

/* ---------------------------------------------------------------- ljuska
 *
 * Dizajn NEMA vodoravnu traku na vrhu. Ima levu traku od 244px i sadrzaj
 * desno u mrezi "auto 1fr" — zaglavlje pa radna povrsina. Dok sam gradio
 * strane sa trakom na vrhu, aplikacija je izgledala kao drugi proizvod,
 * ma koliko se boje poklapale.
 *
 * Vrednosti su iz izvoza: traka 244px, pozadina #FBFBFC, granica #EDEFF3,
 * stavka navigacije padding 9px 10px / radius 8px, aktivna #EEF2FE/#2B54C9.
 */

/* Ljuska je OKVIR, ne vrh dugackog dokumenta.
 *
 * Ranije je bila min-height:100vh, pa je rasla sa sadrzajem: na Settings strani
 * od 4.266px traka je bila 4.266px visoka, a njen sadrzaj je stajao samo u
 * prvih 600px. Ostatak je bila prazna siva traka od 244px niz celu stranu, a
 * navigacija i zaglavlje su odlazili van ekrana — na dnu Settings-a nije bilo
 * cime promeniti stranu bez vracanja na vrh.
 *
 * Sada je visina tacno jedan ekran, a skroluje se samo radna povrsina. Traka i
 * zaglavlje uvek stoje. */
.ljuska{
  display:grid;
  grid-template-columns:244px minmax(0,1fr);
  height:100vh;
  overflow:hidden;
}

/* ---- leva traka ---- */
.bok{
  border-right:1px solid var(--linija-red);
  background:#FBFBFC;
  display:grid;
  /* Kolona MORA da bude minmax(0,1fr). Sa podrazumevanim `auto` njena najmanja
   * sirina je min-content, pa je jedan dugacak naslov razgovora razvukao
   * unutrasnjost trake na 385px: oznaka plana je izletela izvan trake, a
   * naslovi su se prelivali preko ivice. Traka je i dalje bila 244px — samo
   * je sadrzaj virio iz nje. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  min-height:0;
  overflow:hidden;
  padding:16px 14px;
}
.bok .znak{
  display:flex; align-items:center; gap:9px;
  font-size:16px; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none;
}
.bok .znak i{
  width:24px; height:24px; border-radius:var(--r-sitno);
  background:var(--ink); display:grid; place-items:center; flex:none;
}
.bok .znak i::after{
  content:''; width:8px; height:8px; border-radius:2px; background:#fff; display:block;
}
/* Korisnik treba odmah da zna da je u radnoj povrsini, a ne na javnom sajtu.
 * "Workspace" stoji uz znak, sitnije i tise, da znak ostane znak. */
.bok .znak em{
  font-style:normal; font-weight:500;
  font-size:13px; color:var(--muted);
  letter-spacing:0;
}

/* Oznaka plana se preselila iz reda sa znakom u karticu korisnika: u 244px
 * nije bilo mesta za "Scalebiz Workspace" i oznaku u istom redu. Ovde joj je i
 * mesto — plan je stvar naloga, ne proizvoda. */
.korisnik .plan{
  margin-left:auto; flex:none;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted); background:none;
  border:1px solid var(--linija-2); border-radius:var(--r-oznaka);
  padding:2px 5px;
}

.korisnik{
  margin-top:14px;
  border:1px solid var(--linija-2); border-radius:9px;
  background:var(--povrs); padding:9px 10px;
  display:flex; align-items:center; gap:9px;
  text-decoration:none; color:inherit;
  transition:border-color 160ms ease;
}
.korisnik:hover{ border-color:var(--accent) }
.korisnik .slova{
  width:28px; height:28px; border-radius:var(--r-sitno); flex:none;
  background:var(--accent-bg); color:var(--accent);
  display:grid; place-items:center;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.korisnik .ko{ min-width:0 }
.korisnik b{ display:block; font-size:13px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.korisnik span{ display:block; font-size:11.5px; color:var(--tih) }

.bok nav{ margin-top:20px; overflow-y:auto }
.bok .natpis{ padding:0 10px 7px }
.bok nav a{
  display:flex; align-items:center; gap:10px;
  font-size:14px; padding:9px 10px; border-radius:var(--r-dugme);
  color:#4B5462; text-decoration:none;
  transition:background 140ms ease;
  margin-bottom:1px;
}
.bok nav a:hover{ background:var(--polje) }
.bok nav a.tek{ background:var(--accent-bg); color:var(--accent); font-weight:500 }
.bok nav a .broj{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--tih) }

.bok .dno{ font-size:12px; color:var(--tih); line-height:1.5; padding:12px 10px 0 }
.bok .dno a{ color:var(--tih); text-decoration:none }
.bok .dno a:hover{ color:var(--ink) }

/* ---- slobodan pojas u traci ----
 *
 * Assistant strana ima spisak razgovora. Da nije ovog pojasa, ta strana bi
 * morala svoju traku pored ljuskine — dve trake jedna do druge, 500px
 * potroseno na navigaciju. Ovako spisak stoji tamo gde ga korisnik i ocekuje,
 * ispod navigacije, a traka ostaje jedna na svim stranama.
 */
.bok .dopuna{ min-height:0; display:flex; flex-direction:column; margin-top:18px }
.bok .dopuna:empty{ display:none }
.bok .dopuna .natpis{ padding:0 10px 7px }

.bok .novi{
  width:100%; text-align:left; cursor:pointer;
  background:var(--povrs); border:1px solid var(--linija-2);
  border-radius:var(--r-dugme); padding:9px 11px;
  font-size:13.5px; font-weight:500; color:var(--ink);
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px;
}
.bok .novi:hover{ border-color:var(--accent); color:var(--accent) }

.bok .razgovori{ flex:1; overflow-y:auto; margin:0 -4px; padding:0 4px; min-height:0 }
.bok .r{
  display:flex; align-items:center; gap:6px;
  border-radius:var(--r-dugme); padding:8px 10px; cursor:pointer;
  font-size:13.5px; color:var(--muted); white-space:nowrap;
}
/* min-width:0 je obavezan: bez njega je najmanja sirina flex-deteta jednaka
 * celom tekstu, pa ellipsis nikad ne bi proradio. */
.bok .r span{ overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0 }
.bok .r:hover{ background:var(--polje); color:var(--ink) }
.bok .r.tek{ background:var(--accent-bg); color:var(--accent); font-weight:500 }
.bok .r .vise{ opacity:0; border:0; background:none; color:var(--tih);
  cursor:pointer; padding:0 2px; border-radius:4px; font-size:15px; line-height:1 }
.bok .r:hover .vise{ opacity:1 }

/* ---- desna strana ---- */
/* minmax(0,1fr) a ne 1fr: bez toga red ne moze da bude nizi od svog sadrzaja,
 * pa .sadrzaj nikad ne dobije ogranicenu visinu i overflow-y:auto ne proradi. */
.radni{ display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; min-height:0; background:var(--bg) }
.zaglavlje{
  padding:18px 16px; border-bottom:1px solid var(--linija-red);
  background:var(--povrs);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.zaglavlje h1{ font-size:19px; letter-spacing:-.02em }
.zaglavlje .pod{ font-size:13px; color:var(--tih) }
.zaglavlje .desno{ margin-left:auto; display:flex; align-items:center; gap:12px }
.sadrzaj{ min-width:0; padding:22px 24px 70px; overflow-y:auto }

/* Razgovor sa asistentom sam nosi svoje razmake i mora da drzi punu visinu —
 * polje za unos stoji na dnu ekrana, a ne na dnu dugackog dokumenta. */
.sadrzaj.puna{ padding:0; overflow:hidden; display:grid; grid-template-rows:minmax(0,1fr) }

.meni-dugme{ display:none; border:1px solid var(--linija-pol); background:var(--povrs);
  border-radius:var(--r-dugme); padding:7px 10px; cursor:pointer; line-height:1 }

/* ------------------------------------------------------------- podnozje
 *
 * Isto podnozje kao na javnom sajtu. Radna povrsina nije zaseban proizvod nego
 * deo iste platforme — korisnik odavde stize na cenovnik, o nama i kontakt bez
 * odjave. Stoji ISPOD sadrzaja strane, unutar povrsine koja se skroluje, pa se
 * vidi tek kad se dodje do dna i ne smeta u radu.
 */
/* Vrednosti su prepisane iz izvoza javnog sajta, ne priblizno nego tacno:
 * padding 56/24/40, unutrasnja sirina 1200, kolone auto-fit minmax(170px,1fr)
 * sa razmakom 32, naslov kolone 13px mono .04em #9AA1AD, veze 14px #4B5462 sa
 * razmakom 10. Ranije je podnozje u aplikaciji imalo svoje, sitnije vrednosti
 * pa je pored istog sajta izgledalo kao tudje. */
.podnozje{
  margin:56px -24px -70px;
  padding:56px 24px 40px;
  border-top:1px solid #E7E9EE;
  background:var(--povrs);
}
.podnozje .kolone{
  max-width:1200px; margin:0 auto;
  display:grid; gap:32px;
  /* Celija je sest: znak plus pet stubova. auto-fit je racunao koliko ih staje,
   * pa je u radnoj povrsini — gde traka od 244px uzima prostor — ispadalo pet
   * kolona i sesta je padala sama u novi red. Zato se broj kolona zadaje
   * izricito, i uvek je delilac sestice: 6, 3, 2 ili 1. Nikad siroce. */
  grid-template-columns:repeat(6, minmax(0,1fr));
}
@media (max-width:1340px){ .podnozje .kolone{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (max-width:780px){  .podnozje .kolone{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:500px){  .podnozje .kolone{ grid-template-columns:minmax(0,1fr) } }

.podnozje .oznaka .ime{ display:flex; align-items:center; gap:10px }
.podnozje .oznaka i{
  width:24px; height:24px; border-radius:var(--r-sitno); background:var(--ink);
  display:grid; place-items:center; flex:none;
}
.podnozje .oznaka i::after{
  content:''; width:8px; height:8px; border-radius:2px; background:#fff; display:block;
}
.podnozje .oznaka b{ font-size:17px; font-weight:600; letter-spacing:-.02em }
.podnozje .oznaka p{
  margin:12px 0 0; font-size:14px; line-height:1.55; color:#7C8492; max-width:22em;
}

.podnozje .stub-naslov{
  font-family:var(--mono);
  font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#9AA1AD;
}
.podnozje .veze{ margin-top:14px; display:grid; gap:10px; font-size:14px }
.podnozje .veze a{ color:#4B5462; text-decoration:none }
.podnozje .veze a:hover{ color:var(--accent) }
.podnozje .vesti{ color:#7C8492; line-height:1.55 }

.podnozje .rub{
  max-width:1200px; margin:32px auto 0; padding-top:20px;
  border-top:1px solid #E7E9EE;
  font-size:13px; color:#9AA1AD; line-height:1.6;
}

@media(max-width:900px){
  .podnozje{ margin-left:-16px; margin-right:-16px; padding:40px 16px 32px }
}

@media(max-width:980px){
  .ljuska{ grid-template-columns:1fr }
  .bok{ position:fixed; left:0; top:0; bottom:0; width:262px; z-index:9;
        transform:translateX(-100%); transition:transform .18s ease }
  .bok.otvorena{ transform:none }
  .meni-dugme{ display:block }
  .sadrzaj{ padding:18px 16px 60px }
}

/* -------------------------------------------------------------- kartica */

.karta{
  background:var(--povrs);
  border:1px solid var(--linija);
  border-radius:var(--r-kart);
  padding:22px 24px;
  margin-bottom:16px;
}
.karta h2{ margin:0 0 4px }
.karta .pod{ font-size:var(--t-sitni); color:var(--tih); margin:0 0 18px }

/* Verzalni natpis je u dizajnu UVEK mono. To je potpis koji se odmah vidi. */
.natpis, .karta > b, .sz b, .pl b, .izvori > b{
  font-family:var(--mono);
  font-size:var(--t-natpis);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted-2);
  font-weight:400;
}

/* --------------------------------------------------------------- oznake */

.ozn{
  font-family:var(--mono);
  font-size:var(--t-oznaka);
  letter-spacing:.02em;
  color:var(--muted);
  background:var(--polje);
  border-radius:var(--r-oznaka);
  padding:3px 7px;
  font-weight:400;
  text-transform:none;
}
.ozn.tip{ background:var(--accent-bg); color:var(--accent) }
.ozn.ok{ background:var(--zelena-bg); color:var(--zelena) }
.ozn.hitno{ background:var(--zuta-bg); color:var(--zuta) }

.plan{
  font-family:var(--mono);
  font-size:var(--t-natpis);
  letter-spacing:.09em;
  text-transform:uppercase;
  background:var(--accent-bg);
  color:var(--accent);
  border-radius:var(--r-pilula);
  padding:3px 9px;
}

/* --------------------------------------------------------------- dugmad */

.glavno{
  background:var(--accent); color:#fff; border:0;
  border-radius:var(--r-dugme);
  padding:9px 14px;
  font-size:var(--t-sitni); font-weight:500;
  cursor:pointer;
  transition:background 160ms ease;
}
.glavno:hover{ background:var(--accent-tam) }
.glavno[disabled]{ background:var(--linija-2); color:var(--tih); opacity:1; cursor:default }

/* Preostali dani probe. Stoji ispod kartice korisnika, tacno tamo gde je do
 * 28.08 stajala znacka plana. Razlika je sto ovo korisniku nesto znaci --
 * ime paketa mu nije govorilo nista, broj preostalih dana govori. */
.proba{
  margin:8px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted); background:var(--polje);
  border:1px solid var(--linija-2); border-radius:var(--r-oznaka);
  padding:5px 8px; text-align:center;
}

/* Ekran po isteku probe. Zamenjuje radnu povrsinu svuda osim na /settings/. */
.zatvoreno{ max-width:520px; margin:56px auto; text-align:center }
.zatvoreno h2{ margin:0 0 10px; font-size:20px; color:var(--ink) }
.zatvoreno p{ margin:0 0 18px; color:var(--muted); line-height:1.6 }
.zatvoreno .dugmad{ display:flex; gap:10px; justify-content:center }
.zatvoreno .dugmad a{ display:inline-block; text-decoration:none }

/* Zakljucane stavke ostaju VIDLJIVE, ne nestaju: korisnik treba da vidi sta
 * ga ceka kad se pretplati. Klik vodi na istu poruku, jer se stanje proverava
 * na svakoj strani, pa nema potrebe hvatati klik. */
.bok nav a.zakljucano{ opacity:.45 }

.sporedno{
  background:var(--povrs); color:var(--ink);
  border:1px solid var(--linija-pol);
  border-radius:var(--r-dugme);
  padding:9px 14px;
  font-size:var(--t-sitni); font-weight:500;
  cursor:pointer;
  transition:background 160ms ease;
}
.sporedno:hover{ background:var(--polje) }

/* ---------------------------------------------------------------- polja */

/* Sirina se NE postavlja ovde. Filter u zaglavlju i polje u formularu imaju
 * razlicite potrebe; kad sam prvi put stavio width:100%, filter na Pipeline
 * strani se razvukao preko cele sirine. Sirinu odredjuje strana. */
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=search],select,textarea{
  padding:9px 14px;
  border:1px solid var(--linija-pol);
  border-radius:var(--r-dugme);
  background:var(--povrs);
  color:var(--ink);
  font-size:var(--t-sitni);
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent) }
input:disabled{ background:var(--polje); color:var(--tih) }

label{ display:block; font-size:12.5px; color:var(--muted); margin:14px 0 5px }

/* --------------------------------------------------------------- tabele */

table{ width:100%; border-collapse:collapse; font-size:var(--t-sitni) }
th,td{ text-align:left; vertical-align:top; padding:11px 13px;
       border-bottom:1px solid var(--linija-red) }
th{
  font-family:var(--mono);
  font-size:var(--t-natpis);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted-2);
  font-weight:400;
  background:var(--polje-2);
}
tr:last-child td{ border-bottom:0 }

/* ------------------------------------------------------------- sitnice */

.tiho, .tih{ font-size:12.5px; color:var(--tih); line-height:1.55 }
.greska{
  background:var(--crvena-bg); color:var(--crvena);
  border:1px solid #F3D8D8; border-radius:var(--r-kart);
  padding:14px 16px; font-size:var(--t-sitni);
}
.mera{ height:6px; border-radius:var(--r-pilula); background:var(--linija-red);
       overflow:hidden; margin:6px 0 4px }
.mera i{ display:block; height:100%; background:var(--accent); border-radius:var(--r-pilula) }
.mera.pun i{ background:var(--zuta) }