/*!
 * AK Spin Master — zajednički izgled aplikacije (Faza 1)
 * Sve boje, fontovi i razmaci su promenljive ispod. Menjaš ovde, menja se svuda.
 */
@import url('./fonts/fonts.css');

:root{
  /* Boje — izvedene iz logoa */
  --pozadina:#0A1526;        /* tamna teget, dvorana */
  --povrsina:#10203A;        /* kartice, header */
  --povrsina-2:#172B4B;      /* polja, hover, zaglavlja tabela */
  --povrsina-3:#1F3760;
  --linija:#233B60;
  --linija-jaka:#34527F;
  --polje-pozadina:#0C1A30;

  --tekst:#E8EEF7;
  --tekst-2:#A3B5CF;
  --tekst-3:#6F86A8;

  --plava:#2F8BFF;           /* glavna boja, reket */
  --plava-hover:#4E9DFF;
  --plava-tamna:#1C5FC0;
  --plava-meka:rgba(47,139,255,.14);
  --cijan:#46C6F2;

  --narandzasta:#FF7A1A;     /* akcent, loptica: pobednik, najvažnija akcija */
  --narandzasta-hover:#FF924A;
  --narandzasta-meka:rgba(255,122,26,.14);

  --zelena:#22C08F;  --zelena-meka:rgba(34,192,143,.14);
  --crvena:#F04B5C;  --crvena-meka:rgba(240,75,92,.14);
  --zuta:#F2B84B;    --zuta-meka:rgba(242,184,75,.14);

  /* Tipografija */
  --font-naslov:'Fira Sans Condensed','Arial Narrow','Segoe UI',sans-serif;
  --font-tekst:'Fira Sans','Segoe UI',Roboto,'Microsoft YaHei',sans-serif;
  --vel-xs:.8125rem; --vel-s:.875rem; --vel-m:1rem; --vel-l:1.1875rem;
  --vel-xl:1.5rem; --vel-2xl:2rem; --vel-3xl:2.75rem; --vel-4xl:3.75rem;

  /* Razmaci i oblici */
  --r-1:4px; --r-2:5px; --r-3:8px; --r-4:12px; --r-5:16px; --r-6:24px; --r-7:32px; --r-8:48px;
  --radijus-malo:6px; --radijus:10px; --radijus-veliko:16px;
  --senka:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -12px rgba(0,0,0,.55);
  --senka-modal:0 24px 64px -16px rgba(0,0,0,.75);
  --fokus:0 0 0 3px rgba(70,198,242,.55);
  --prelaz:160ms cubic-bezier(.2,.7,.3,1);
  --sirina-sadrzaja:1120px;
}

/* ---------- Osnova ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; font-family:var(--font-tekst); font-size:var(--vel-m); line-height:1.5;
  color:var(--tekst); background:var(--pozadina);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(47,139,255,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,122,26,.07), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* Potpis aplikacije: linije stola za stoni tenis, gledano odozgo */
body.sa-stolom::before{
  content:""; position:fixed; inset:clamp(12px,3vw,32px); pointer-events:none; z-index:0;
  border:1px solid rgba(232,238,247,.045); border-radius:4px;
  background:linear-gradient(to right, transparent calc(50% - .5px), rgba(232,238,247,.045) calc(50% - .5px), rgba(232,238,247,.045) calc(50% + .5px), transparent calc(50% + .5px));
}
:where(body.sa-stolom) > :where(:not(.zaglavlje):not(.toast-kutija):not(.modal-pozadina)){position:relative; z-index:1}

h1,h2,h3,h4{font-family:var(--font-naslov); font-weight:700; line-height:1.1; margin:0; letter-spacing:.005em}
h1,.h1{font-size:clamp(2.25rem,4vw,var(--vel-4xl))}
h2,.h2{font-size:var(--vel-2xl)}
h3,.h3{font-size:var(--vel-xl)}
h4,.h4{font-size:var(--vel-l)}
p{margin:0}
a{color:var(--plava-hover)}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:rgba(47,139,255,.35)}
:focus-visible{outline:none; box-shadow:var(--fokus)}

.tekst-2{color:var(--tekst-2)} .tekst-3{color:var(--tekst-3)}
.mali{font-size:var(--vel-s)} .sitni{font-size:var(--vel-xs)}
.brojevi{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.naslovni-font{font-family:var(--font-naslov)}
.skriveno{display:none!important}
.za-citac{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kontejner{width:100%; max-width:var(--sirina-sadrzaja); margin:0 auto; padding:0 clamp(16px,4vw,40px)}

.ikona{width:1.25em; height:1.25em; flex:none}

/* Vodeni žig: logo u pozadini, providan, ne zauzima prostor */
body.zig::after{content:""; position:fixed; right:-4vw; bottom:-6vh; width:min(620px,52vw); height:min(620px,52vw);
  background:url('logo/logo-600.webp') no-repeat center/contain; opacity:.07; pointer-events:none; z-index:0; filter:saturate(1.15)}
body.zig{background-image:
  radial-gradient(1100px 620px at 88% -8%, rgba(47,139,255,.2), transparent 62%),
  radial-gradient(820px 520px at -8% 108%, rgba(255,122,26,.1), transparent 60%)}
body.zig > main,body.zig > footer,body.zig > .traka,body.zig > .radni,body.zig > .tabovi,body.zig > .demo-traka{position:relative; z-index:1}
body.zig > header{position:sticky; z-index:60}
@media print{ body.zig::after{display:none} }

/* ---------- Dugmad ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:42px; padding:0 18px; border-radius:var(--radijus-malo); border:1px solid transparent;
  font-weight:600; font-size:var(--vel-m); line-height:1; text-decoration:none; white-space:nowrap;
  cursor:pointer; user-select:none; transition:background var(--prelaz), border-color var(--prelaz), color var(--prelaz), transform var(--prelaz);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none}
.btn .ikona{width:18px; height:18px}
.btn-primarno{background:var(--plava); color:#fff}
.btn-primarno:hover{background:var(--plava-hover)}
.btn-akcent{background:var(--narandzasta); color:#1A0D02}
.btn-akcent:hover{background:var(--narandzasta-hover)}
.btn-sekundarno{background:var(--povrsina-2); border-color:var(--linija-jaka); color:var(--tekst)}
.btn-sekundarno:hover{background:var(--povrsina-3)}
.btn-tiho{background:transparent; color:var(--tekst-2)}
.btn-tiho:hover{background:var(--povrsina-2); color:var(--tekst)}
.btn-opasno{background:var(--crvena-meka); border-color:rgba(240,75,92,.4); color:#FF8C98}
.btn-opasno:hover{background:var(--crvena); color:#fff}
.btn-uspeh{background:var(--zelena); color:#03251A}
.btn-malo{min-height:34px; padding:0 12px; font-size:var(--vel-s)}
.btn-veliko{min-height:52px; padding:0 26px; font-size:var(--vel-l)}
.btn-ikona{width:42px; padding:0}
.btn-ikona.btn-malo{width:34px}
.btn-blok{width:100%}

/* ---------- Forme ---------- */
.oznaka{display:block; font-size:var(--vel-s); font-weight:500; color:var(--tekst-2); margin-bottom:6px}
.polje{
  width:100%; min-height:44px; padding:10px 12px; border-radius:var(--radijus-malo);
  background:var(--polje-pozadina); border:1px solid var(--linija-jaka); color:var(--tekst);
  transition:border-color var(--prelaz), box-shadow var(--prelaz);
}
.polje::placeholder{color:var(--tekst-3)}
.polje:hover{border-color:var(--linija-jaka); filter:brightness(1.06)}
.polje:focus{outline:none; border-color:var(--cijan); box-shadow:var(--fokus)}
select.polje{appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A3B5CF' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center}
.polje-grupa{margin-bottom:var(--r-5)}
.pomoc{font-size:var(--vel-xs); color:var(--tekst-3); margin-top:6px}
.polje.greska{border-color:var(--crvena)}
.pomoc.greska{color:#FF8C98}

/* ---------- Kartice ---------- */
.kartica{background:var(--povrsina); border:1px solid var(--linija); border-radius:var(--radijus-veliko); padding:var(--r-6); box-shadow:var(--senka)}
.kartica-zbijena{padding:var(--r-5); border-radius:var(--radijus)}

/* ---------- Bedževi ---------- */
.bedz{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:var(--vel-xs); font-weight:600; line-height:1.4; background:var(--povrsina-2); color:var(--tekst-2); border:1px solid var(--linija)}
.bedz .ikona{width:14px;height:14px}
.bedz-plava{background:var(--plava-meka); color:#8CC2FF; border-color:rgba(47,139,255,.35)}
.bedz-akcent{background:var(--narandzasta-meka); color:#FFB27A; border-color:rgba(255,122,26,.35)}
.bedz-uspeh{background:var(--zelena-meka); color:#6FE0BA; border-color:rgba(34,192,143,.35)}
.bedz-opasno{background:var(--crvena-meka); color:#FF97A2; border-color:rgba(240,75,92,.35)}
.bedz-upozorenje{background:var(--zuta-meka); color:#F7CF82; border-color:rgba(242,184,75,.35)}

/* ---------- Tabele ---------- */
.tabela-omotac{overflow-x:auto; border:1px solid var(--linija); border-radius:var(--radijus)}
.tabela{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.tabela th{background:var(--povrsina-2); color:var(--tekst-2); font-weight:500; font-size:var(--vel-s); text-align:left; padding:10px 14px; border-bottom:1px solid var(--linija-jaka); white-space:nowrap}
.tabela td{padding:11px 14px; border-bottom:1px solid var(--linija)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:rgba(47,139,255,.05)}
.tabela .broj{text-align:right}
.tabela .centar{text-align:center}
.tabela tr.prolazi td:first-child{box-shadow:inset 3px 0 0 var(--zelena)}
.tabela tr.pobednik td{color:#FFB27A; font-weight:600}

/* ---------- Zaglavlje aplikacije ---------- */
.zaglavlje{position:sticky; top:0; z-index:50; background:rgba(10,21,38,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--linija)}
.zaglavlje-red{display:flex; align-items:center; gap:12px; min-height:64px}
.brend{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tekst); margin-right:auto}
.brend-znak{width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brend-ime{font-family:var(--font-naslov); font-weight:700; font-size:1.25rem; letter-spacing:.01em; white-space:nowrap}
.brend-ime span{color:var(--cijan)}
@media (max-width: 620px){ .brend-ime{display:none} .zaglavlje-red{gap:8px} }
.podnozje{padding:var(--r-6) 0; color:var(--tekst-3); font-size:var(--vel-xs)}

/* ---------- Padajući meni ---------- */
.padajuci{position:relative}
.padajuci-lista{position:absolute; right:0; top:calc(100% + 8px); min-width:240px; padding:6px; background:var(--povrsina); border:1px solid var(--linija-jaka); border-radius:var(--radijus); box-shadow:var(--senka-modal); display:none; z-index:60}
.padajuci.otvoren .padajuci-lista{display:block}
.padajuci-stavka{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:var(--radijus-malo); background:none; color:var(--tekst); text-decoration:none; text-align:left; font-size:var(--vel-s); cursor:pointer}
.padajuci-stavka:hover,.padajuci-stavka:focus-visible{background:var(--povrsina-2)}
.padajuci-stavka .ikona{width:18px; height:18px; color:var(--tekst-2)}
.padajuci-razdelnik{height:1px; background:var(--linija); margin:6px 4px}

/* ---------- Modal ---------- */
.modal-pozadina{position:fixed; inset:0; z-index:1000; background:rgba(4,10,20,.72); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; animation:ak-fade 140ms ease-out}
.modal{width:100%; max-width:460px; background:var(--povrsina); border:1px solid var(--linija-jaka); border-radius:var(--radijus-veliko); box-shadow:var(--senka-modal); animation:ak-iskoci 180ms cubic-bezier(.2,.8,.3,1)}
.modal-siroki{max-width:640px}
.modal-glava{display:flex; align-items:center; gap:12px; padding:20px 24px 0}
.modal-glava h2{font-size:var(--vel-xl); flex:1}
.modal-telo{padding:14px 24px 4px; color:var(--tekst-2); white-space:pre-line}
.modal-telo .polje{margin-top:12px}
.modal-noge{display:flex; justify-content:flex-end; gap:10px; padding:20px 24px 22px; flex-wrap:wrap}
.modal-ikona{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none}
.modal-ikona .ikona{width:22px;height:22px}
.modal-ikona.info{background:var(--plava-meka); color:var(--plava-hover)}
.modal-ikona.opasno{background:var(--crvena-meka); color:#FF8C98}
.modal-ikona.upozorenje{background:var(--zuta-meka); color:var(--zuta)}
.modal-ikona.uspeh{background:var(--zelena-meka); color:var(--zelena)}

.jezici.valute{grid-template-columns:repeat(2,1fr); max-height:52vh; overflow-y:auto}
.jezici{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:16px 24px 24px}
.jezik-opcija{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-radius:var(--radijus-malo); border:1px solid var(--linija); background:var(--povrsina-2); color:var(--tekst); cursor:pointer; text-align:left}
.jezik-opcija:hover{border-color:var(--linija-jaka); background:var(--povrsina-3)}
.jezik-opcija small{color:var(--tekst-3); font-weight:600; letter-spacing:.04em}
.jezik-opcija[aria-pressed="true"]{border-color:var(--plava); background:var(--plava-meka)}
.jezik-opcija[aria-pressed="true"] small{color:var(--plava-hover)}
.jezik-kod{font-weight:600; font-size:var(--vel-s); letter-spacing:.04em}

/* Spiner u dugmetu */
.btn .spiner{width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:ak-vrti .7s linear infinite}
@keyframes ak-vrti{to{transform:rotate(360deg)}}

/* ---------- Toast obaveštenja ---------- */
.toast-kutija{position:fixed; right:16px; bottom:16px; z-index:1100; display:flex; flex-direction:column; gap:10px; width:min(380px,calc(100vw - 32px))}
.toast{display:flex; align-items:flex-start; gap:12px; padding:14px 14px 14px 16px; background:var(--povrsina-2); border:1px solid var(--linija-jaka); border-left:3px solid var(--plava); border-radius:var(--radijus); box-shadow:var(--senka-modal); font-size:var(--vel-s); animation:ak-uleti 200ms cubic-bezier(.2,.8,.3,1)}
.toast .ikona{width:20px;height:20px;margin-top:1px}
.toast-tekst{flex:1; white-space:pre-line}
.toast-x{background:none;border:0;color:var(--tekst-3);cursor:pointer;padding:2px;border-radius:4px}
.toast-x:hover{color:var(--tekst)}
.toast.uspeh{border-left-color:var(--zelena)} .toast.uspeh>.ikona{color:var(--zelena)}
.toast.greska{border-left-color:var(--crvena)} .toast.greska>.ikona{color:#FF8C98}
.toast.upozorenje{border-left-color:var(--zuta)} .toast.upozorenje>.ikona{color:var(--zuta)}
.toast.info>.ikona{color:var(--plava-hover)}
.toast.odlazi{opacity:0; transform:translateX(12px); transition:opacity 180ms, transform 180ms}

@keyframes ak-fade{from{opacity:0}}
@keyframes ak-iskoci{from{opacity:0; transform:translateY(8px) scale(.98)}}
@keyframes ak-uleti{from{opacity:0; transform:translateY(10px)}}

/* ---------- Pomoćno ---------- */
.red{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.kolona{display:flex; flex-direction:column; gap:12px}
.razdvojeno{justify-content:space-between}

/* Skrol traka */
*{scrollbar-width:thin; scrollbar-color:var(--linija-jaka) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linija-jaka); border-radius:10px; border:2px solid var(--pozadina)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important}
}
@media print{
  body{background:#fff; color:#000}
  body.sa-stolom::before,.zaglavlje,.toast-kutija{display:none}
}

/* ============================================================
   SVETLA TEMA — html[data-tema="svetla"]
   ============================================================ */
html[data-tema="svetla"]{
  --pozadina:#F3F6FB;
  --povrsina:#FFFFFF;
  --povrsina-2:#EEF3FA;
  --povrsina-3:#E2EAF5;
  --linija:#D3DEEC;
  --linija-jaka:#B3C4DB;
  --polje-pozadina:#FFFFFF;

  --tekst:#132135;
  --tekst-2:#4A5C78;
  --tekst-3:#74879F;

  --plava:#1C6FE0;
  --plava-hover:#175FC4;
  --plava-tamna:#0E4796;
  --plava-meka:rgba(28,111,224,.10);
  --cijan:#0E82AE;

  --narandzasta:#E06400;
  --narandzasta-hover:#C55700;
  --narandzasta-meka:rgba(224,100,0,.12);

  --zelena:#118A63;  --zelena-meka:rgba(17,138,99,.12);
  --crvena:#D22437;  --crvena-meka:rgba(210,36,55,.12);
  --zuta:#A9741A;    --zuta-meka:rgba(169,116,26,.14);

  --senka:0 10px 30px rgba(20,40,70,.12);
  --senka-jaka:0 18px 44px rgba(20,40,70,.18);
}
html[data-tema="svetla"]{color-scheme:light}
html[data-tema="svetla"] body{background:var(--pozadina); color:var(--tekst)}
html:not([data-tema="svetla"]){color-scheme:dark}
html[data-tema="svetla"] body.zig::after{opacity:.05; filter:grayscale(.2)}
html[data-tema="svetla"] .zaglavlje{background:rgba(255,255,255,.92); border-bottom-color:var(--linija)}
html[data-tema="svetla"] .btn-tiho{color:var(--tekst-2)}
html[data-tema="svetla"] .btn-primarno{color:#fff}
html[data-tema="svetla"] .btn-akcent{color:#fff}
html[data-tema="svetla"] .modal-pozadina{background:rgba(25,45,75,.35)}
html[data-tema="svetla"] .pregled-pozadina{background:rgba(25,45,75,.5)}
html[data-tema="svetla"] .traka-demo{color:#5a3a00}
/* kartice sa tamnim prelivom postaju čiste bele u svetloj temi */
html[data-tema="svetla"] .modul,
html[data-tema="svetla"] .kat-kartica,
html[data-tema="svetla"] .liga-kartica,
html[data-tema="svetla"] .kartica{background:var(--povrsina) !important}
html[data-tema="svetla"] .modul:hover{background:var(--povrsina-2) !important}
html[data-tema="svetla"] .senka-unutra{box-shadow:none}

/* ============================================================
   BOJA NAGLASKA — html[data-akcent]
   ============================================================ */
html[data-akcent="plava"]{ --narandzasta:#2F8BFF; --narandzasta-hover:#4E9DFF; --narandzasta-meka:rgba(47,139,255,.16) }
html[data-akcent="zelena"]{ --narandzasta:#22C08F; --narandzasta-hover:#3ED3A6; --narandzasta-meka:rgba(34,192,143,.16) }
html[data-akcent="crvena"]{ --narandzasta:#F04B5C; --narandzasta-hover:#FF6274; --narandzasta-meka:rgba(240,75,92,.16) }
html[data-akcent="ljubicasta"]{ --narandzasta:#9A6CFF; --narandzasta-hover:#AE87FF; --narandzasta-meka:rgba(154,108,255,.16) }
html[data-tema="svetla"][data-akcent="plava"]{ --narandzasta:#1C6FE0; --narandzasta-hover:#175FC4 }
html[data-tema="svetla"][data-akcent="zelena"]{ --narandzasta:#118A63; --narandzasta-hover:#0D7253 }
html[data-tema="svetla"][data-akcent="crvena"]{ --narandzasta:#D22437; --narandzasta-hover:#B31D2E }
html[data-tema="svetla"][data-akcent="ljubicasta"]{ --narandzasta:#6C3BD1; --narandzasta-hover:#5A2FB5 }

/* ============================================================
   VELIČINA SLOVA I GUSTINA PRIKAZA
   ============================================================ */
html[data-font="veliko"]{ font-size:112.5% }
html[data-font="vrlo-veliko"]{ font-size:125% }
html[data-gustina="zbijeno"] .kartica{padding:14px 16px}
html[data-gustina="zbijeno"] table.podaci th, html[data-gustina="zbijeno"] table.podaci td{padding:6px 8px}
html[data-gustina="zbijeno"] .polje{min-height:36px}
html[data-gustina="zbijeno"] .btn{min-height:36px; padding:0 12px}
html[data-gustina="zbijeno"] .traka, html[data-gustina="zbijeno"] .radni{padding-top:10px; padding-bottom:10px}

html[data-tema="svetla"] .brend-znak{background:#0A1526; border-radius:12px; padding:3px; filter:none}