:root {
  --pozadina: #f5f6f8;
  --ploha: #ffffff;
  --tekst: #1c2330;
  --tiho: #667085;
  --rub: #e2e5ea;
  --naglasak: #1f4e79;
  --naglasak-svijetli: #eaf1f8;
  --ok: #1a7f4b;
  --ok-poz: #e6f4ec;
  --upoz: #a86400;
  --upoz-poz: #fdf3e0;
  --greska: #b3261e;
  --greska-poz: #fdeceb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--pozadina);
  color: var(--tekst);
}

a { color: var(--naglasak); }

.omot { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------- zaglavlje */
.vrh { background: var(--naglasak); color: #fff; }
.vrh a { color: #fff; text-decoration: none; }
/* Sve u jednom retku: logo | izbornik (kliže ako ne stane) | korisnik.
   Bez ovoga izbornik s puno stavki gurne korisnički kut u drugi red. */
.vrh-red { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding: 12px 16px; }
.logo { font-weight: 700; font-size: 17px; letter-spacing: .2px; white-space: nowrap; }
.izbornik {
  display: flex; gap: 16px; flex-wrap: nowrap; margin-right: auto; font-size: 14px;
  flex: 0 1 auto; min-width: 0; align-items: center;
  /* bez overflow:auto — padajući popisi moraju smjeti izaći iz zaglavlja */
}

/* Skupine s padajućim popisom */
.skupina { position: relative; }
.skupina-gumb {
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  padding: 6px 2px; border-bottom: 2px solid transparent; opacity: .9; white-space: nowrap;
}
.skupina-gumb:hover { border-color: #ffffff88; opacity: 1; }
.skupina.aktivan > .skupina-gumb { border-color: #fff; opacity: 1; }
.padajuci {
  /* +12px je donji razmak zaglavlja; bez toga vrh popisa ulazi u tamnu traku */
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 30; display: none;
  min-width: 190px; padding: 6px; background: var(--ploha);
  border: 1px solid var(--rub); border-radius: 10px; box-shadow: 0 8px 24px #00000026;
}
.skupina.otvoren > .padajuci, .skupina:focus-within > .padajuci { display: block; }
.vrh .padajuci a {
  display: block; padding: 8px 10px; border-radius: 7px; color: var(--tekst);
  white-space: nowrap; border-bottom: 0;
}
.vrh .padajuci a:hover { background: var(--naglasak-svijetli); }
.izbornik > a.aktivan { border-color: #fff; opacity: 1; }
.izbornik a { padding: 6px 2px; border-bottom: 2px solid transparent; opacity: .9; white-space: nowrap; }
.izbornik a:hover { border-color: #ffffff88; opacity: 1; }
.korisnik-kut { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; }
.vrh .tiho { color: #ffffffb0; font-size: 12px; }

main { padding-top: 22px; padding-bottom: 30px; min-height: 60vh; }

/* ------------------------------------------------------------- tipografija */
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
.tiho { color: var(--tiho); font-size: 13px; }
.naslov-red { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.naslov-red .desno { margin-left: auto; display: flex; align-items: center;
                     gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------- kartice */
.kartica {
  background: var(--ploha);
  border: 1px solid var(--rub);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.kartice { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kartica > h2 { display: flex; align-items: center; gap: 8px; }
.brojka { font-size: 26px; font-weight: 700; }

/* ------------------------------------------------------------- tablice */
.tablica-omot { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rub); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--tiho); }
tbody tr:hover { background: #fafbfc; }
tbody tr.vazan { background: #fffdf3; }
tbody tr.vazan td:first-child { box-shadow: inset 3px 0 0 #d9a600; }
tbody tr.skriven { opacity: .55; }
td.zbito { white-space: nowrap; }

/* ------------------------------------------------------------- oznake */
.oznaka {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.oznaka.ok { background: var(--ok-poz); color: var(--ok); }
.oznaka.upozorenje { background: var(--upoz-poz); color: var(--upoz); }
.oznaka.greska { background: var(--greska-poz); color: var(--greska); }
.oznaka.neutralno { background: #eef0f3; color: var(--tiho); }

/* Boje kategorija — dodjeljuju se redom kojim su kategorije navedene u domain.py */
.kat-1 { background: #e3f5e6; color: #1a7f4b; }   /* U11      zelena     */
.kat-2 { background: #fdf0dc; color: #a86400; }   /* U14      narančasta */
.kat-3 { background: #fdf6cf; color: #856404; }   /* Kadeti   žuta       */
.kat-4 { background: #e6eefb; color: #1f4e79; }   /* Juniori  plava      */
.kat-5 { background: #efe6fb; color: #5b2f9e; }   /* U23      ljubičasta */
.kat-6 { background: #fbe4e4; color: #b3261e; }   /* Seniori  crvena     */
.kat-7 { background: #dff1f4; color: #146c78; }   /* Veterani tirkizna   */
.kat-8 { background: #f2e8de; color: #7a5230; }   /* rezerva  smeđa      */
.kat-ostalo { background: #eef0f3; color: #667085; }

/* ------------------------------------------------------------- gumbi */
.gumb {
  display: inline-block; padding: 8px 14px; border-radius: 8px;
  background: var(--naglasak); color: #fff; border: 1px solid var(--naglasak);
  text-decoration: none; font-size: 14px; cursor: pointer;
  /* line-height izjednačuje <button> i <a> s istom klasom; bez toga su gumbi
     nekoliko piksela niži od poveznica pa se u istom retku ne poklapaju */
  line-height: 1.5; font-family: inherit;
}
.gumb:hover { filter: brightness(1.1); }
.gumb.tanki { background: transparent; color: inherit; border-color: #ffffff55; padding: 5px 10px; }
.gumb.sporedni { background: var(--ploha); color: var(--naglasak); border-color: var(--rub); }
.gumb.opasni { background: var(--ploha); color: var(--greska); border-color: #f0c8c5; }
.gumb.mali { padding: 4px 9px; font-size: 13px; }

/* ------------------------------------------------------------- forme */
form.mreza { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
form.mreza .siroko { grid-column: 1 / -1; }
label { display: block; font-size: 13px; color: var(--tiho); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], input[type=tel], input:not([type]),
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--rub);
  border-radius: 7px; font: inherit; background: #fff; color: var(--tekst);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--naglasak-svijetli); border-color: var(--naglasak); }
.kvacice { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kvacica { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tekst); }
.akcije { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.uredno { display: inline; }

/* ------------------------------------------------------------- poruke */
.poruka { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.poruka.ok { background: var(--ok-poz); color: var(--ok); }
.poruka.greska { background: var(--greska-poz); color: var(--greska); }

.prazno { color: var(--tiho); padding: 14px 0; font-size: 14px; }

/* ------------------------------------------------------------- kalendar */
.kalendar { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--ploha); }
.kalendar th { text-align: center; padding: 8px 4px; }
.kalendar td {
  vertical-align: top; height: 92px; border: 1px solid var(--rub);
  padding: 4px; font-size: 12px;
}
.kalendar td.izvan { background: #fafbfc; color: #b6bcc6; }
.kalendar td.danas { box-shadow: inset 0 0 0 2px var(--naglasak); }
.dan-broj { font-weight: 600; color: var(--tiho); }
.kal-turnir {
  display: block; margin-top: 3px; padding: 2px 5px; border-radius: 5px;
  font-size: 11px; line-height: 1.3; text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- razno */
.podnozje { color: var(--tiho); font-size: 13px; padding-bottom: 28px; }
.linija-provjere { font-size: 12px; margin-top: 2px; }
.linija-provjere.greska { color: var(--greska); }
.linija-provjere.upozorenje { color: var(--upoz); }
.linija-provjere.ok { color: var(--ok); }
.filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filtri select, .filtri input { width: auto; min-width: 150px; }
.izvoz-gumbi { display: inline-flex; gap: 6px; }
/* Ne stavljati ovu klasu na <td>: display:flex ćeliji oduzme ponašanje
   tablične ćelije pa sadržaj iskoči iz tablice. Uvijek unutar <div>. */
.prijava-mala { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
td.prijava-mala, th.prijava-mala { display: table-cell; }
/* Gumbi radnji u tablici: uvijek u jednom retku, stupac se raširi po potrebi. */
.akcije-red { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
/* Polja u redu s gumbom ne smiju nasljediti width:100% iz općeg pravila za forme —
   inače izbornik nabuja preko cijele širine i gurne gumb u sljedeći redak. */
.prijava-mala select, .prijava-mala input { width: auto; }
.kod {
  font-family: Consolas, monospace; font-size: 13px; background: #eef0f3;
  padding: 8px 10px; border-radius: 6px; word-break: break-all; display: block;
}

@media (max-width: 1150px) {
  /* uloga korisnika je najmanje važna informacija, prva ide van */
  .korisnik-kut .tiho { display: none; }
}

@media (max-width: 640px) {
  .kalendar td { height: auto; min-height: 60px; }
  .vrh-red { gap: 10px; flex-wrap: wrap; }
  .logo { margin-right: auto; }
  .izbornik { order: 3; width: 100%; flex-basis: 100%; gap: 16px; font-size: 14px; }
  .padajuci { top: calc(100% + 6px); }
  th, td { padding: 7px 6px; }
}

/* Traka s brojem mačevalaca po kategorijama (popis mačevalaca).
   Svaka stavka je ujedno filtar, pa se raspodjela i pregledava i koristi. */
.traka-kategorija { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.traka-kategorija .stavka {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--rub); border-radius: 8px;
  background: #fff; text-decoration: none; color: inherit; font-size: 13px;
}
.traka-kategorija .stavka:hover { border-color: var(--naglasak); }
.traka-kategorija .stavka.odabrana { border-color: var(--naglasak); background: var(--naglasak-svijetli); }
.traka-kategorija .stavka b { font-size: 15px; }

/* Logo kluba u zaglavlju. Visina je fiksna, širina se prilagodi — logotipi
   znaju biti i kvadratni i izduženi, a red zaglavlja ne smije rasti. */
.vrh .logo { display: inline-flex; align-items: center; gap: 8px; }
.vrh .logo img { height: 30px; width: auto; max-width: 130px; display: block; }

/* Naziv dokumenta uz turnir. `overflow-wrap: break-word` lomi samo kad naziv
   stvarno ne stane — za razliku od `word-break: break-word`, koji dopušta
   prijelom bilo gdje, pa stupac može spasti na širinu jednog slova. */
.naziv-dokumenta { overflow-wrap: break-word; min-width: 11rem; }

/* Obavijesti na pregledu. Tekst se piše slobodno, pa se prijelomi redaka
   zadržavaju; istekle su blijede, da se u arhivi odmah razlikuju. */
.obavijesti .obavijest { padding: 10px 0; border-bottom: 1px solid var(--rub); }
.obavijesti .obavijest:last-of-type { border-bottom: 0; }
/* Tekst obavijesti je ono zbog čega se kartica čita, pa mora nadglasati redak
   s autorom i datumom — inače sve izgleda jednako važno i oko preskoči poruku. */
.obavijesti .tekst {
  white-space: pre-line; margin-bottom: 2px;
  font-size: 15px; font-weight: 600; color: var(--tekst);
}
/* Potpis je podatak koji se traži tek kad zatreba, pa je svjetliji od ostalog
   sitnog teksta i odmaknut, da se ne čita u istom dahu s porukom. */
.obavijesti .obavijest .tiho { font-size: 11.5px; color: #98a2b3; margin-top: 7px; }
/* Redni broj: koja je na redu i koliko ih je, bez brojanja pogledom. */
.obavijesti .broj {
  display: inline-block; margin-right: 8px; font-size: 11.5px; font-weight: 700;
  color: var(--tiho); background: #eef0f3; border-radius: 999px; padding: 1px 7px;
  vertical-align: 2px;
}
.obavijesti .obavijest.istekla { opacity: 0.55; }
.obavijesti textarea { width: 100%; }