/* ==========================================================================
   Konzulat - stil aplikacije
   Po brend vodiču: crna #161616 i bela nose osnovu, zlato #F2A81E samo kao
   akcenat (nikad velike površine). Montserrat za tekst, Oswald za brojeve
   i sitne oznake. Krem podloga kao na svetlim stranama brend vodiča.
   ========================================================================== */

:root {
  --papir: #f7f4ef;
  --povrsina: #ffffff;
  --povrsina-2: #faf8f4;
  --mastilo: #161616;
  --mastilo-2: #57534c;
  --mastilo-3: #8d877d;
  --ivica: #e9e4da;
  --ivica-jaka: #d8d2c6;

  --zlato: #F2A81E;
  --zlato-svetlo: #F8DD8A;
  --zlato-duboko: #EF8C0E;
  --zlato-tekst: #93650a;          /* zlato dovoljno tamno za tekst na svetlom */
  --zlato-fon: #fbf2dd;
  --zlato-ivica: #ecd9ae;
  --zlato-gradijent: linear-gradient(180deg, #F8DD8A, #F2A81E, #EF8C0E);

  --upozorenje: #93650a;
  --upozorenje-svetli: #fbf2dd;
  --opasnost: #a52f2f;
  --opasnost-svetli: #fbeceb;

  --senka: 0 1px 2px rgba(22, 22, 22, .04), 0 10px 28px -14px rgba(22, 22, 22, .14);
  --radijus: 12px;
  --radijus-mali: 8px;

  --tekst: "Montserrat", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --oznake: "Oswald", "Arial Narrow", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* hidden atribut uvek pobedjuje, i kad pravilo postavlja display */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--mastilo);
  font-family: var(--tekst);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* ---------------------------------- Zaglavlje --------------------------- */

.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(22, 22, 22, .97);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 2px solid var(--zlato);
}

.zaglavlje-unutra {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.marka { display: flex; align-items: center; gap: 10px; }

/* mali zlatni kvadrat - motiv iz brend vodiča */
.marka-znak {
  width: 12px; height: 12px;
  background: var(--zlato-gradijent);
  flex: none;
}

.marka-tekst {
  font-family: var(--oznake);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
}

.navigacija { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.navigacija::-webkit-scrollbar { display: none; }

.nav-dugme {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  font-family: var(--tekst); font-size: 13.5px; font-weight: 500;
  color: rgba(255, 255, 255, .68);
  white-space: nowrap; transition: background .15s, color .15s;
}
.nav-dugme:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-dugme.aktivno { background: var(--zlato); color: var(--mastilo); font-weight: 600; }

/* ---------------------------------- Raspored ---------------------------- */

.sadrzaj { max-width: 1320px; margin: 0 auto; padding: 22px 20px 80px; }

.prikaz { display: none; }
.prikaz.aktivan { display: block; animation: pojavi .18s ease-out; }

@keyframes pojavi { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.raspored-uplate {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.stub { min-width: 0; }

.kartica {
  background: var(--povrsina);
  border: 1px solid var(--ivica);
  border-radius: var(--radijus);
  padding: 20px;
  box-shadow: var(--senka);
}

.kartica.uska { max-width: 520px; }
/* Lepljiva forma uz dugačku listu uplata: kad je viša od ekrana, skroluje
   SAMA U SEBI. overscroll-behavior sprečava da se skrol prelije na stranicu
   (inače pokušaj skrolovanja forme pomera listu od hiljadu redova). */
.lepljiva {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lepljiva::-webkit-scrollbar { width: 10px; }
.lepljiva::-webkit-scrollbar-thumb {
  background: var(--ivica-jaka); border-radius: 999px;
  border: 3px solid var(--povrsina);
}
.lepljiva::-webkit-scrollbar-track { background: transparent; }

.naslov-kartice { font-size: 16px; }
.podnaslov {
  font-family: var(--oznake);
  font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  margin: 26px 0 10px; color: var(--mastilo-2);
  padding-left: 14px; position: relative;
}
.podnaslov::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; background: var(--zlato);
}

.zaglavlje-kartice {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}

.akcije-kartice { display: flex; gap: 8px; }

/* ---------------------------------- Polja ------------------------------- */

.polje { margin-bottom: 14px; min-width: 0; }

.polje label, .labela {
  display: block;
  font-family: var(--oznake);
  font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--mastilo-2); margin-bottom: 5px;
}

.obavezno { color: var(--zlato-duboko); }

input[type="text"], input[type="date"], input[type="number"], input[type="search"],
input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--tekst); font-size: 14.5px;
  color: var(--mastilo);
  background: var(--povrsina);
  border: 1px solid var(--ivica-jaka);
  border-radius: var(--radijus-mali);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2357534c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 30px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--zlato);
  box-shadow: 0 0 0 3px rgba(242, 168, 30, .18);
}

input:disabled, select:disabled { background: var(--povrsina-2); color: var(--mastilo-3); cursor: not-allowed; }

.pomoc { font-size: 12px; color: var(--mastilo-3); margin: 5px 0 0; }
.crveno { color: var(--opasnost); }

textarea { resize: vertical; min-height: 80px; font-size: 13px; }
input[type="file"] {
  width: 100%; padding: 7px; font-family: var(--tekst); font-size: 13.5px;
  border: 1px dashed var(--ivica-jaka); border-radius: var(--radijus-mali);
  background: var(--povrsina-2);
}
input[type="month"] {
  padding: 8px 11px; font-family: var(--tekst); font-size: 14px;
  border: 1px solid var(--ivica-jaka); border-radius: var(--radijus-mali);
  background: var(--povrsina);
}

.red-polja { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Prekidac kes / racun */
.prekidac { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.prekidac-opcija { position: relative; }
.prekidac-opcija input { position: absolute; opacity: 0; pointer-events: none; }
.prekidac-opcija span {
  display: block; text-align: center; padding: 9px 8px;
  border: 1px solid var(--ivica-jaka); border-radius: var(--radijus-mali);
  font-size: 14px; cursor: pointer; transition: all .15s; background: var(--povrsina);
}
.prekidac-opcija input:checked + span {
  border-color: var(--zlato); background: var(--zlato-fon);
  color: var(--mastilo); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--zlato);
}
.prekidac-opcija input:focus-visible + span { box-shadow: 0 0 0 3px rgba(242, 168, 30, .18); }

/* ---------------------------------- Dugmad ------------------------------ */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; font-family: var(--tekst); font-size: 13.5px; font-weight: 600;
  border-radius: var(--radijus-mali); border: 1px solid var(--ivica-jaka);
  background: var(--povrsina); color: var(--mastilo);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.dugme:hover { background: var(--povrsina-2); border-color: var(--mastilo-3); }
.dugme.glavno { background: var(--mastilo); border-color: var(--mastilo); color: #fff; }
.dugme.glavno:hover { background: #2c2c2c; border-color: #2c2c2c; }
.dugme.siroko {
  width: 100%; padding: 12px; font-size: 14.5px; margin-top: 4px;
  box-shadow: inset 0 -3px 0 var(--zlato);
}
.dugme.tiho { padding: 6px 10px; font-size: 12.5px; color: var(--mastilo-2); font-weight: 500; }
.dugme.opasno { color: var(--opasnost); border-color: var(--ivica-jaka); }
.dugme.opasno:hover { background: var(--opasnost-svetli); border-color: var(--opasnost); }
.dugme:disabled { opacity: .5; cursor: not-allowed; }

.veza-dugme {
  border: 0; background: none; padding: 0; font-family: var(--tekst); font-size: 13px;
  color: var(--mastilo-2); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.veza-dugme:hover { color: var(--mastilo); }
.veza-dugme.opasno { color: var(--opasnost); }

/* ---------------------------------- Filteri ----------------------------- */

.filteri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
  background: var(--povrsina-2);
  border: 1px solid var(--ivica);
  border-radius: var(--radijus-mali);
  margin-bottom: 14px;
}
.filteri .polje { margin-bottom: 0; }
.siroko-polje { grid-column: span 2; }

/* ---------------------------------- Zbirovi ----------------------------- */

.zbirovi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.zbir {
  padding: 12px 14px;
  border: 1px solid var(--ivica);
  border-radius: var(--radijus-mali);
  background: var(--povrsina-2);
}
.zbir-oznaka {
  font-family: var(--oznake);
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--mastilo-3);
}
.zbir-vrednost {
  font-family: var(--oznake); font-weight: 500;
  font-size: 22px; letter-spacing: .01em; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.zbirovi.veliki .zbir-vrednost { font-size: 28px; }
.zbir.istaknut {
  background: var(--mastilo); border-color: var(--mastilo);
  box-shadow: inset 0 3px 0 var(--zlato);
}
.zbir.istaknut .zbir-oznaka { color: var(--zlato); }
.zbir.istaknut .zbir-vrednost { color: #fff; }

/* ---------------------------------- Tabele ------------------------------ */

.tabela-omot { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabela th {
  text-align: left;
  font-family: var(--oznake);
  font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mastilo-3);
  padding: 8px 10px; border-bottom: 2px solid var(--mastilo); white-space: nowrap;
}

.tabela td { padding: 10px; border-bottom: 1px solid var(--ivica); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--povrsina-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .desno { text-align: right; }
.tabela .novac {
  font-family: var(--oznake); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em;
}
.tabela .prigusen { color: var(--mastilo-3); font-size: 13px; }
.tabela .glavni-tekst { font-weight: 600; }

.prazno { text-align: center; color: var(--mastilo-3); padding: 32px 12px; font-size: 14px; }

/* ---------------------------------- Znacke ------------------------------ */

.znacka {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--povrsina-2); border: 1px solid var(--ivica-jaka); color: var(--mastilo-2);
}
.znacka.zelena  { background: var(--zlato-fon); border-color: var(--zlato-ivica); color: var(--zlato-tekst); }
.znacka.zuta    { background: #f4f1ea; border-color: var(--ivica-jaka); color: var(--mastilo-2); }
.znacka.siva    { background: #f1efe9; border-color: var(--ivica-jaka); color: var(--mastilo-3); }
.znacka.tacka::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.znacka.zelena.tacka::before { background: var(--zlato); }

.statusne-plocice { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------------------------- Pretraga clana ---------------------------- */

.pretraga-clana { position: relative; }

.predlozi {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--povrsina); border: 1px solid var(--ivica-jaka);
  border-radius: var(--radijus-mali); box-shadow: 0 12px 32px -8px rgba(22,22,22,.22);
  max-height: 260px; overflow-y: auto;
}

.predlog { padding: 9px 11px; cursor: pointer; border-bottom: 1px solid var(--ivica); font-size: 14px; }
.predlog:last-child { border-bottom: 0; }
.predlog:hover, .predlog.istaknut { background: var(--zlato-fon); }
.predlog small { display: block; color: var(--mastilo-3); font-size: 12px; }

.izabran-clan {
  margin-top: 8px; padding: 9px 11px;
  background: var(--zlato-fon); border: 1px solid var(--zlato-ivica);
  border-left: 3px solid var(--zlato);
  border-radius: var(--radijus-mali); font-size: 13.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* ---------------------------------- Poruke ------------------------------ */

.poruka {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radijus-mali);
  font-size: 13.5px; border: 1px solid;
}
.poruka.uspeh { background: var(--zlato-fon); border-color: var(--zlato-ivica); color: var(--mastilo); }
.poruka.greska { background: var(--opasnost-svetli); border-color: #f0cfcd; color: var(--opasnost); }
.poruka.upozorenje { background: var(--upozorenje-svetli); border-color: var(--zlato-ivica); color: var(--upozorenje); }
.poruka .dugmad-poruke { display: flex; gap: 8px; margin-top: 10px; }

/* ---------------------------------- Modal ------------------------------- */

.modal-pozadina {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(22, 22, 22, .5);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  animation: pojavi .15s ease-out;
}

.modal {
  background: var(--povrsina); border-radius: var(--radijus);
  width: 100%; max-width: 520px; margin: auto;
  box-shadow: 0 24px 64px -12px rgba(22,22,22,.4);
  border-top: 3px solid var(--zlato);
}
.modal.modal-sirok { max-width: 900px; }

.modal-zaglavlje {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--ivica);
}
.modal-zaglavlje h2 { font-size: 16px; }
.modal-telo { padding: 20px; }

.zatvori {
  border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--mastilo-3); cursor: pointer; padding: 0 4px;
}
.zatvori:hover { color: var(--mastilo); }

.modal-dugmad { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ------------------------------ Obavestenja ----------------------------- */

.obavestenja {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 420px;
}

.obavestenje {
  background: var(--mastilo); color: #fff;
  padding: 11px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 10px 30px -8px rgba(22,22,22,.5), inset 0 -2px 0 var(--zlato);
  animation: uleti .2s ease-out;
}
.obavestenje.greska { background: var(--opasnost); box-shadow: 0 10px 30px -8px rgba(22,22,22,.5); }
@keyframes uleti { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------ Poslovanje ------------------------------ */
.po-red-klik:hover td { background: var(--zlato-fon); }

/* ------------------------------ Kalendar -------------------------------- */

.kalendar-mreza {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.kalendar-dan { min-width: 0; }

.kalendar-dan-naslov {
  font-family: var(--oznake);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--mastilo-3);
  padding: 6px 4px; border-bottom: 2px solid var(--mastilo);
  margin-bottom: 8px; text-align: center;
}
.kalendar-dan-naslov.danas { color: var(--zlato-tekst); border-bottom-color: var(--zlato); }

.termin-kartica {
  border: 1px solid var(--ivica);
  border-left: 3px solid var(--mastilo-3);
  border-radius: var(--radijus-mali);
  background: var(--povrsina);
  padding: 7px 8px; margin-bottom: 6px;
  font-size: 12px; line-height: 1.35;
  cursor: pointer; transition: box-shadow .15s;
  overflow: hidden;
}
.termin-kartica:hover { box-shadow: var(--senka); }
.termin-kartica.grupni { border-left-color: var(--zlato); }
.termin-kartica.personalni { border-left-color: var(--mastilo); }
.termin-kartica.konsultacija { border-left-color: var(--mastilo-3); }
.termin-kartica.odrzan { opacity: .55; }
.termin-vreme { font-family: var(--oznake); font-weight: 500; font-size: 12px; }
.termin-naziv { font-weight: 600; margin: 1px 0; }
.termin-meta { color: var(--mastilo-3); font-size: 11px; }
.termin-praksa { color: var(--mastilo-2); font-size: 11px; font-style: italic; }
.termin-kartica.termin-zamena { border-left: 3px solid var(--zlato); }

/* Nedeljni raspored kao tabela (dani × smene) */
.ra-tabela { min-width: 720px; }
.ra-tabela th, .ra-tabela td { vertical-align: top; padding: 6px 8px; }
.ra-tabela th.danas { color: var(--zlato-tekst); }
.ra-tabela .ra-slot, .ra-tabela .ra-ugao { white-space: nowrap; background: var(--povrsina-2); }
.ra-tabela .ra-grupa td { background: var(--mastilo); color: #fff; font-family: var(--oznake); font-weight: 600; font-size: 12px; letter-spacing: .04em; padding: 4px 8px; }
.ra-tabela .ra-grupa.ra-red-radnica td { background: #4a5a6a; }
.ra-tabela .ra-red-radnica { background: #eef2f6; }
/* Subota je kraća: ćelija nosi svoje vreme, a red koji tog dana ne postoji je
   ukršten da se ne klikne u prazno. */
.ra-sub-vreme {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--zlato-duboko); background: #fdf6e8;
  border-radius: 3px; padding: 1px 4px; margin-bottom: 3px; display: inline-block;
}
.ra-tabela .ra-nije {
  background: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0,0,0,.05) 5px, rgba(0,0,0,.05) 10px);
  cursor: not-allowed;
}
/* Trenerova POTVRĐENA smena: JAKO uokvirena i u drugoj boji od kolega, da na
   prvi pogled zna kada radi. (box-shadow umesto border-a — border-collapse
   tabela bi pomerila ćelije.) */
.ra-tabela td.ra-moja {
  background: var(--zlato-fon);
  box-shadow: inset 0 0 0 3px var(--zlato-duboko);
}
.ra-tabela td.ra-moja strong { color: var(--mastilo); }
.ra-tabela td.ra-moja .ra-oznaka-smene {
  display: inline-block; margin-top: 3px;
  font-family: var(--oznake); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--zlato-tekst); font-weight: 600;
}
/* Kolega u smeni: vidi se ime (ko radi pre i posle), ali prigušeno. */
.ra-tabela td.ra-kolega { color: var(--mastilo-2); }
.ra-tabela .ra-zauzeto {
  font-family: var(--oznake); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mastilo-3); margin-top: 3px;
}
.ra-tabela .ra-prijava { font-size: 11.5px; }
/* Upozorenje članu pred istek članarine:
   7–4 dana žuto, 3 dana i manje (i posle isteka) CRVENO sa uzvičnikom. */
.moj-istek {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--radijus); padding: 12px 14px; margin-bottom: 14px;
  border-left: 4px solid;
}
.moj-istek div div { font-size: 13px; margin-top: 3px; }
.moj-istek-znak {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--opasnost); color: #fff;
  font-family: var(--oznake); font-weight: 700; font-size: 17px; line-height: 1;
}
.moj-istek.uskoro {
  background: var(--upozorenje-svetli); border-color: var(--zlato);
  color: var(--upozorenje);
}
.moj-istek.hitno, .moj-istek.istekla {
  background: var(--opasnost-svetli); border-color: var(--opasnost);
  color: var(--opasnost);
}

/* Dodatna dostupnost (pored smena) — svoja grupa, zelenkasto odvojena. */
.ra-tabela .ra-grupa.ra-red-dostupnost td { background: #4a6a55; }
.ra-tabela td.ra-red-dostupnost { background: #eef5f0; }
.ra-tabela .ra-dost-stavka {
  font-variant-numeric: tabular-nums; font-size: 12.5px; line-height: 1.3;
}

/* RASPORED ČASOVA (trener): satni redovi × dani, sa slobodnim mestima. */
.rc-tabela { min-width: 780px; font-size: 13px; }
.rc-tabela th, .rc-tabela td { text-align: center; padding: 6px 8px; vertical-align: middle; }
.rc-tabela th.danas { color: var(--zlato-tekst); }
.rc-tabela .rc-ugao, .rc-tabela .rc-sat {
  text-align: left; white-space: nowrap; background: var(--povrsina-2);
  font-variant-numeric: tabular-nums;
}
.rc-tabela .rc-sat .prigusen { font-size: 11px; }
.rc-tabela td.rc-slobodno { cursor: pointer; transition: background .12s; }
.rc-tabela td.rc-slobodno:hover { background: var(--zlato-fon); box-shadow: inset 0 0 0 1px var(--zlato); }
.rc-tabela .rc-broj { font-family: var(--oznake); font-weight: 600; font-size: 15px; }
.rc-tabela .rc-plus { color: var(--mastilo-3); font-size: 16px; }
.rc-tabela td.rc-puno {
  background: #f3e4e0; color: #9c4a33; font-family: var(--oznake);
  font-size: 11px; letter-spacing: .06em;
}
.rc-tabela td.rc-proslo { background: var(--povrsina-2); color: var(--mastilo-3); opacity: .5; }
/* Van opsega rasporeda personalnih treninga (npr. posle 18h subotom). */
.rc-tabela td.rc-van {
  background: repeating-linear-gradient(45deg, transparent, transparent 5px,
    rgba(22, 22, 22, .045) 5px, rgba(22, 22, 22, .045) 10px);
  color: var(--mastilo-3);
}
/* Zakaziv, ali van radnog vremena kluba — tu NEMA ograničenja broja. */
.rc-tabela td.rc-van-radnog { background: rgba(242, 168, 30, .05); }
.rc-tabela td.rc-van-radnog:hover { background: var(--zlato-fon); }
.rc-tabela th .rc-radno {
  font-family: var(--oznake); font-size: 10px; letter-spacing: .04em;
  color: var(--zlato-tekst); text-transform: none; margin-top: 2px;
}
.rc-tabela td.rc-moj {
  background: var(--mastilo); color: #fff; cursor: pointer; text-align: left;
}
.rc-tabela td.rc-moj strong { color: var(--zlato); }
.rc-tabela td.rc-moj .prigusen { color: rgba(255, 255, 255, .7); font-size: 11px; }
.ra-tabela td { white-space: normal; }
.ra-tabela .ra-edit {
  cursor: pointer; border-radius: 6px; padding: 3px 6px; min-height: 22px;
  word-break: break-word; line-height: 1.15;
}
.ra-tabela .ra-edit:hover { background: rgba(242, 168, 30, .14); }
.ra-tabela .ra-glavni { font-weight: 600; font-size: 13px; }
.ra-tabela .ra-mali { font-size: 11px; color: var(--mastilo-2); font-style: italic; }
.ra-tabela .ra-inline { width: 100%; padding: 3px 4px; font-size: 12.5px; }
.ra-tabela .ra-akcije { font-size: 11px; margin-top: 2px; }
.ra-tabela .ra-akcije .prigusen { color: var(--zlato-tekst); }
.termin-puno { color: var(--opasnost); font-weight: 600; }

/* Prekidač postojeći/novi član na uplati */
.clan-prekidac { display: flex; gap: 8px; margin-bottom: 8px; }
.clan-prekidac .dugme { border: 1px solid var(--ivica); border-radius: 8px; }
.clan-prekidac .dugme.izabran {
  background: var(--zlato-fon); border-color: var(--zlato-ivica); color: var(--mastilo);
}

/* Grupa čekboksova (npr. izbor više objekata za trenera) */
.cek-grupa { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cek-stavka { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.cek-stavka input { width: auto; }

/* Preseti smena (fiksne smene: jutarnja/popodnevna/večernja) */
.smena-preseti { display: flex; flex-wrap: wrap; gap: 6px; }
.smena-preseti .sm-preset { border: 1px solid var(--ivica); border-radius: 8px; }
.smena-preseti .sm-preset.izabran {
  background: var(--zlato-fon); border-color: var(--zlato-ivica); color: var(--mastilo);
}

@media (max-width: 900px) {
  .kalendar-mreza { grid-template-columns: 1fr; }
  .kalendar-dan-naslov { text-align: left; }
  .kalendar-dan:not(:has(.termin-kartica)) { display: none; }
}

/* ------------------------------ Prijava i nalog ------------------------- */

.prijava-pozadina {
  position: fixed; inset: 0; z-index: 100;
  background: var(--papir);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

.prijava-kartica {
  background: var(--povrsina); border: 1px solid var(--ivica);
  border-radius: var(--radijus); border-top: 3px solid var(--zlato);
  box-shadow: var(--senka); padding: 28px; width: 100%; max-width: 380px;
}

.nalog { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.nalog-ime {
  font-size: 12.5px; color: rgba(255,255,255,.85); white-space: nowrap;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}
.nalog-dugme {
  border: 0; background: none; padding: 0; font-family: var(--tekst);
  font-size: 12px; color: var(--zlato); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.nalog-dugme:hover { color: var(--zlato-svetlo); }

/* ---------------------------------- Telefon ----------------------------- */

@media (max-width: 980px) {
  .raspored-uplate { grid-template-columns: 1fr; }
  /* Na telefonu forma stoji normalno u toku strane - bez svog skrola. */
  .lepljiva { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 640px) {
  .zaglavlje-unutra { padding: 10px 14px; gap: 8px; }
  .navigacija { margin-left: 0; width: 100%; }
  .sadrzaj { padding: 16px 14px 90px; }
  .kartica { padding: 16px 14px; border-radius: 10px; }
  .tabela-omot { margin: 0 -14px; padding: 0 14px; }
  .red-polja { grid-template-columns: 1fr; }
  .siroko-polje { grid-column: span 1; }
  .filteri { grid-template-columns: 1fr 1fr; padding: 12px; }
  .zbirovi { grid-template-columns: 1fr 1fr; }
  input, select { font-size: 16px; } /* sprecava zumiranje na iPhone-u */

  /* --- Filter-trake u zaglavlju kartice ------------------------------------
     Na telefonu se prelamaju umesto da izguraju karticu van ekrana (Izveštaj
     i Analiza su imali bocni preliv). Svaki filter zauzima pola reda, a
     dugme ceo, da prst ima gde da padne. */
  .zaglavlje-kartice { align-items: stretch; }
  .akcije-kartice { flex-wrap: wrap; width: 100%; gap: 8px; }
  .akcije-kartice > .polje { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* !important jer je u HTML-u upisano style="width:auto" - inline stil
     inace pobedjuje, pa filter i dalje izgura karticu van ekrana. */
  .akcije-kartice > .polje select,
  .akcije-kartice > .polje input { width: 100% !important; min-width: 0; }
  /* Dugmad dele red i prelamaju se tek kad moraju (◀ Danas ▶ ne smeju da
     zauzmu tri reda), ali su dovoljno siroka za prst. */
  .akcije-kartice > .dugme,
  .akcije-kartice > a.dugme { flex: 1 1 auto; min-width: 88px; text-align: center; }

  /* --- Tabele kao KARTICE ---------------------------------------------------
     Tabela sa sedam kolona se na telefonu ne cita ni uz bocni skrol. Zato se
     svaki red prikazuje kao kartica "oznaka: vrednost". Oznake dolaze iz
     zaglavlja tabele - upisuje ih oznaciKoloneTabela() u app.js, pa nijedna
     tabela ne mora rucno da se prepravlja.
     Raspored smena (.ra-tabela) i raspored casova (.rc-tabela) su PRAVE mreze
     dan x smena - one ostaju tabele i skroluju bocno. */
  .tabela:not(.ra-tabela):not(.rc-tabela) thead { display: none; }
  .tabela:not(.ra-tabela):not(.rc-tabela),
  .tabela:not(.ra-tabela):not(.rc-tabela) tbody,
  .tabela:not(.ra-tabela):not(.rc-tabela) tr,
  .tabela:not(.ra-tabela):not(.rc-tabela) td { display: block; width: auto; }

  .tabela:not(.ra-tabela):not(.rc-tabela) tr {
    border: 1px solid var(--ivica); border-radius: 10px;
    padding: 6px 12px; margin-bottom: 10px; background: var(--povrsina);
  }
  .tabela:not(.ra-tabela):not(.rc-tabela) tbody tr:hover { background: var(--povrsina); }
  .tabela:not(.ra-tabela):not(.rc-tabela) tbody tr:last-child td { border-bottom: 0; }

  .tabela:not(.ra-tabela):not(.rc-tabela) td {
    display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px dashed var(--ivica); text-align: right;
  }
  .tabela:not(.ra-tabela):not(.rc-tabela) td:last-child { border-bottom: 0; }
  .tabela:not(.ra-tabela):not(.rc-tabela) td::before {
    content: attr(data-oznaka);
    font-family: var(--oznake); font-size: 10.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .1em; color: var(--mastilo-3);
    text-align: left; flex: none; padding-top: 2px;
  }
  /* Prazna oznaka = kolona sa dugmadima; ona ide preko cele sirine. */
  .tabela:not(.ra-tabela):not(.rc-tabela) td:not([data-oznaka])::before,
  .tabela:not(.ra-tabela):not(.rc-tabela) td[data-oznaka=""]::before { content: none; }
  .tabela:not(.ra-tabela):not(.rc-tabela) td:not([data-oznaka]),
  .tabela:not(.ra-tabela):not(.rc-tabela) td[data-oznaka=""] { justify-content: flex-end; gap: 16px; }

  /* Istaknuta je GLAVNA celija (ime clana, naziv), ne prva po redu - inace bi
     datum bio krupniji od imena. Klasu .glavni-tekst aplikacija vec koristi. */
  .tabela:not(.ra-tabela):not(.rc-tabela) td.glavni-tekst { font-size: 15.5px; }

  /* Podnaslov u celiji (tip ponude, trener...) ide u SVOJ red ispod vrednosti,
     inace se zalepi sa strane i lomi se na dve reci. */
  .tabela:not(.ra-tabela):not(.rc-tabela) td { flex-wrap: wrap; }
  .tabela:not(.ra-tabela):not(.rc-tabela) td > div { flex-basis: 100%; text-align: right; }

  /* Poruka "nema podataka" ostaje jedan red preko cele kartice. */
  .tabela:not(.ra-tabela):not(.rc-tabela) td[colspan] { justify-content: center; }
  .tabela:not(.ra-tabela):not(.rc-tabela) td[colspan]::before { content: none; }

  /* Kartice ne traze bocni skrol - vracamo normalan tok. */
  .tabela-omot:has(.tabela:not(.ra-tabela):not(.rc-tabela)) { overflow-x: visible; }

  /* Prst je siri od misa: veze u tabeli dobijaju pravu povrsinu za dodir. */
  .tabela .veza-dugme { padding: 8px 6px; display: inline-block; min-height: 34px; }
  .ra-tabela, .rc-tabela { font-size: 13px; }

  /* --- Modal kao donji list ------------------------------------------------ */
  .modal-pozadina { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none; margin: 0;
    border-radius: 14px 14px 0 0;
    max-height: 92vh; display: flex; flex-direction: column;
  }
  .modal.modal-sirok { max-width: none; }
  .modal-telo { padding: 16px 14px; overflow-y: auto; overscroll-behavior: contain; }
  .modal-dugmad { position: sticky; bottom: 0; background: var(--povrsina); padding-top: 10px; }
  .modal-dugmad .dugme { flex: 1; }

  /* Dugmad u zaglavlju kartice dele jedan red (◀ Danas ▶), ne po ceo red
     svako - inace zauzmu pola ekrana ni za sta. */
  .zaglavlje-kartice { flex-wrap: wrap; }
  .zaglavlje-kartice > .dugme { flex: 1 1 auto; min-width: 88px; }
  .zaglavlje-kartice > .naslov-kartice { flex: 1 1 100%; }

  /* U rasporedu smena i casova prva kolona ostaje na mestu dok se skroluje
     udesno - inace se ne vidi koja je smena, odnosno koji je sat. */
  .ra-tabela th:first-child, .ra-tabela td:first-child:not([colspan]),
  .rc-tabela th:first-child, .rc-tabela td:first-child:not([colspan]) {
    position: sticky; left: 0; z-index: 2;
    box-shadow: 1px 0 0 var(--ivica-jaka);
  }
  /* Naslovni redovi grupa ("Treneri i praksa", "Radnice") idu preko svih
     kolona - ne smeju da se lepe, tekst bi im ostao zaglavljen sa strane. */
  .ra-tabela td[colspan], .rc-tabela td[colspan] { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Stavka nedeljnog rasporeda grupnog programa. */
.gr-stavka {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--povrsina-2); border: 1px solid var(--ivica);
  border-radius: 999px; padding: 3px 10px; margin: 2px 4px 2px 0;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}

/* Uplata sa povraćajem: prvobitni iznos je precrtan, ispod stoji neto. */
.uplata-precrtano { text-decoration: line-through; color: var(--prigusen, #8a8a8a); font-size: 12px; }