/* ===================================================================
   Портал чланова Коморе — стилови
   Једна датотека, без спољних зависности.
   =================================================================== */

:root {
  --pozadina:      #f4f6f9;
  --povrsina:      #ffffff;
  --tekst:         #17202a;
  --tekst-tiho:    #667085;
  --ivica:         #e2e6ec;
  --naglasak:      #1e5aa8;
  --naglasak-tamn: #164680;
  --uspeh:         #0f7b4f;
  --greska:        #b42318;
  --upozorenje:    #b25e09;
  --radijus:       12px;
  --senka:         0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadina:   #0f141b;
    --povrsina:   #161d27;
    --tekst:      #e6ebf2;
    --tekst-tiho: #93a0b4;
    --ivica:      #26303d;
    --naglasak:   #6ea8f0;
    --naglasak-tamn: #8dbcf5;
    --uspeh:      #4ac48a;
    --greska:     #f18b80;
    --upozorenje: #e0a458;
    --senka:      0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tekst);
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.omot { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.uski { max-width: 460px; margin: 40px auto; }

h1 { font-size: 1.7rem; margin: 28px 0 6px; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 34px 0 12px; }
h3 { font-size: 1rem; margin: 6px 0 0; font-weight: 600; }
a  { color: var(--naglasak); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------- заглавље */
.traka {
  background: var(--povrsina);
  border-bottom: 1px solid var(--ivica);
  position: sticky; top: 0; z-index: 10;
}
.traka-sadrzaj { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tekst); }
.logo:hover { text-decoration: none; }
.logo-znak {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--naglasak); color: #fff; font-weight: 700;
}
.meni { display: flex; align-items: center; gap: 14px; font-size: .92rem; flex-wrap: wrap; }
.korisnik { color: var(--tekst-tiho); }

/* --------------------------------------------------------- елементи */
.kartica {
  background: var(--povrsina);
  border: 1px solid var(--ivica);
  border-radius: var(--radijus);
  box-shadow: var(--senka);
  padding: 18px;
}
.tiho { color: var(--tekst-tiho); font-size: .9rem; }
.nowrap { white-space: nowrap; }
.desno { text-align: right; }
.prazno { color: var(--tekst-tiho); text-align: center; padding: 26px; }
.putanja { font-size: .88rem; color: var(--tekst-tiho); margin: 20px 0 0; }

.dugme {
  display: inline-block; padding: 9px 15px; border-radius: 9px;
  border: 1px solid var(--ivica); background: var(--povrsina); color: var(--tekst);
  font: inherit; font-size: .92rem; cursor: pointer; text-decoration: none;
}
.dugme:hover { border-color: var(--naglasak); text-decoration: none; }
.dugme-glavno { background: var(--naglasak); border-color: var(--naglasak); color: #fff; font-weight: 600; }
.dugme-glavno:hover { background: var(--naglasak-tamn); }
.dugme-tiho { color: var(--tekst-tiho); }

.poruka { padding: 12px 16px; border-radius: 10px; margin: 18px 0; border: 1px solid; font-size: .93rem; }
.poruka-greska { color: var(--greska); border-color: var(--greska); background: color-mix(in srgb, var(--greska) 8%, transparent); }
.poruka-uspeh  { color: var(--uspeh);  border-color: var(--uspeh);  background: color-mix(in srgb, var(--uspeh) 8%, transparent); }
.poruka-info   { color: var(--tekst-tiho); border-color: var(--ivica); background: var(--povrsina); }

/* ---------------------------------------------------------- форме */
.forma { display: grid; gap: 14px; margin: 18px 0; }
.forma label, .filteri label { display: grid; gap: 5px; font-size: .88rem; color: var(--tekst-tiho); }
input, select {
  font: inherit; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--ivica); background: var(--pozadina); color: var(--tekst);
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--naglasak); outline-offset: 1px; border-color: transparent; }

.filteri {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin: 18px 0;
}
.filteri label { flex: 1 1 180px; }
.filteri .dugme { height: 41px; }

/* ------------------------------------------------------- статистика */
.pregled { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0 6px; }
.statistika { display: grid; gap: 4px; }
.oznaka { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-tiho); }
.statistika strong { font-size: 1.35rem; }
.statistika .veliko { font-size: 1.9rem; color: var(--naglasak); }

/* ---------------------------------------------------------- лиценце */
.licence { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.licenca header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.znacka {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .76rem; font-weight: 700;
  background: color-mix(in srgb, var(--naglasak) 14%, transparent); color: var(--naglasak);
}
.status { font-size: .78rem; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--ivica); color: var(--tekst-tiho); white-space: nowrap; }
.status-aktivna { color: var(--uspeh); border-color: var(--uspeh); }
.status-istekla { color: var(--greska); border-color: var(--greska); }

.podaci { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 16px 0; }
.podaci dt { font-size: .78rem; color: var(--tekst-tiho); }
.podaci dd { margin: 0; font-size: .95rem; }
.upozorenje { color: var(--upozorenje); font-style: normal; font-size: .8rem; }

.napredak { height: 8px; background: var(--pozadina); border-radius: 20px; overflow: hidden; border: 1px solid var(--ivica); }
.napredak-popuna { height: 100%; background: var(--naglasak); }

/* ---------------------------------------------------------- табеле */
.tabela { width: 100%; border-collapse: collapse; background: var(--povrsina);
  border: 1px solid var(--ivica); border-radius: var(--radijus); overflow: hidden; font-size: .93rem; }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--ivica); vertical-align: top; }
.tabela th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-tiho); background: var(--pozadina); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: color-mix(in srgb, var(--naglasak) 5%, transparent); }

.pilula { font-size: .78rem; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--ivica); color: var(--tekst-tiho); white-space: nowrap; }
.pilula-aktivno { color: var(--uspeh); border-color: var(--uspeh); }

.rezime { margin: 16px 0 10px; color: var(--tekst-tiho); font-size: .93rem; }
.stranicenje { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 20px 0; color: var(--tekst-tiho); font-size: .9rem; }

.podnozje { margin-top: 50px; padding: 22px 0 30px; border-top: 1px solid var(--ivica); color: var(--tekst-tiho); font-size: .84rem; }

/* ------------------------------------------------- чаробњак (install.php) */
.uski-srednji { max-width: 720px; }
.koraci { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 24px; }
.koraci li { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--tekst-tiho);
  padding: 6px 12px; border: 1px solid var(--ivica); border-radius: 20px; background: var(--povrsina); }
.koraci li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ivica); color: var(--tekst-tiho); font-size: .75rem; font-weight: 700; }
.koraci li.tekuci { border-color: var(--naglasak); color: var(--naglasak); font-weight: 600; }
.koraci li.tekuci span { background: var(--naglasak); color: #fff; }
.koraci li.gotov { color: var(--uspeh); border-color: var(--uspeh); }
.koraci li.gotov span { background: var(--uspeh); color: #fff; }
.dvokolone { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ok { color: var(--uspeh); }
.ne { color: var(--greska); }
code { background: var(--pozadina); border: 1px solid var(--ivica); border-radius: 5px;
  padding: 1px 5px; font-size: .88em; }
hr { border: 0; border-top: 1px solid var(--ivica); margin: 6px 0; }

@media (max-width: 640px) {
  .dvokolone { grid-template-columns: 1fr; }
  .traka-sadrzaj { height: auto; padding: 10px 0; flex-direction: column; align-items: start; }
  .podaci { grid-template-columns: 1fr; }
  .tabela { display: block; overflow-x: auto; }
}