/* Anketa CRM — stil */
:root {
  --tinta: #1d2733;
  --papir: #f3f5f7;
  --bijela: #ffffff;
  --plava: #14557b;
  --plava-t: #0e3f5c;
  --zelena: #1e7d4f;
  --crvena: #b03434;
  --zuta: #9a6b0a;
  --siva: #6b7683;
  --linija: #dde3e9;
  --radius: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papir); color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: 1.5rem; margin: .2em 0 .6em; }
h2 { font-size: 1.1rem; margin: 0 0 .6em; }
a { color: var(--plava); }
.muted { color: var(--siva); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }

/* topbar */
.topbar { background: var(--tinta); color: #fff; }
.topbar-in { max-width: 1080px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { font-weight: 700; padding: 12px 0; letter-spacing: .01em; }
.topbar nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.topbar nav a { color: #cfd8e0; text-decoration: none; padding: 12px 10px; }
.topbar nav a:hover { color: #fff; }
.topbar .who { color: #8fa3b3; padding: 0 8px; border-left: 1px solid #3a4a5a; margin-left: 6px; }
.topbar .odjava { color: #e0a5a5; }

.wrap { max-width: 1080px; margin: 22px auto; padding: 0 16px; }
.flash { background: #e5f3ea; border: 1px solid #bcdcc8; color: #1c5c38; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.err { background: #f8e7e7; border: 1px solid #e3bcbc; color: #8f2323; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; }

/* dugmad */
.btn {
  display: inline-block; border: 1px solid var(--linija); background: var(--bijela);
  color: var(--tinta); padding: 9px 16px; border-radius: var(--radius);
  font: inherit; cursor: pointer; text-decoration: none; text-align: left;
}
.btn:hover { border-color: var(--plava); }
.btn-p { background: var(--plava); border-color: var(--plava); color: #fff; }
.btn-p:hover { background: var(--plava-t); }
.btn-da { background: var(--zelena); border-color: var(--zelena); color: #fff; font-weight: 600; padding: 12px 30px; }
.btn-ne { background: var(--crvena); border-color: var(--crvena); color: #fff; font-weight: 600; padding: 12px 30px; }
.btn-sm { padding: 5px 10px; font-size: .88rem; }
.btn-vel { padding: 13px 26px; font-weight: 600; }
.btn-full { width: 100%; text-align: center; }
.nazad { background: none; border: none; color: var(--siva); cursor: pointer; font: inherit; padding: 8px 0; }
.nazad:hover { color: var(--tinta); }

/* login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--bijela); border: 1px solid var(--linija); border-radius: 12px; padding: 34px; width: 360px; max-width: 92vw; }
.login-box h1 { font-size: 1.25rem; margin: 0 0 4px; }
.login-box label { display: block; margin: 14px 0 4px; font-size: .92rem; }
.login-box input { width: 100%; padding: 10px; border: 1px solid var(--linija); border-radius: var(--radius); font: inherit; }
.login-box button { margin-top: 18px; }

/* filteri i tabovi */
.filteri { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filteri input[type=text], .filteri input[type=number], .filteri select {
  padding: 9px 12px; border: 1px solid var(--linija); border-radius: var(--radius); font: inherit; background: #fff;
}
.filteri input[type=text] { min-width: 260px; }
.tabovi { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { text-decoration: none; color: var(--tinta); background: var(--bijela); border: 1px solid var(--linija); border-radius: 20px; padding: 6px 14px; font-size: .92rem; }
.tab.aktivan { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.tab .broj { opacity: .65; margin-left: 4px; }

/* tabele */
.lista { width: 100%; border-collapse: collapse; background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--radius); overflow: hidden; }
.lista th, .lista td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linija); vertical-align: middle; }
.lista thead th { background: #eef1f4; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--siva); }
.lista tr:last-child td { border-bottom: none; }
.mala-tabela th, .mala-tabela td { padding: 6px 10px; font-size: .92rem; }
.skrol { max-height: 420px; overflow-y: auto; }
.detalji th { text-align: left; color: var(--siva); font-weight: 500; padding: 5px 16px 5px 0; white-space: nowrap; vertical-align: top; }
.detalji td { padding: 5px 0; }

/* statusi */
.status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: .82rem; font-weight: 600; }
.s-nepozvan { background: #eceff2; color: var(--siva); }
.s-anketiran { background: #e0f0e7; color: var(--zelena); }
.s-pozvati_kasnije { background: #f4ecd7; color: var(--zuta); }
.s-odbio { background: #f6e3e3; color: var(--crvena); }
.s-netacan_broj { background: #e8e8e8; color: #555; }

.prazno { background: var(--bijela); border: 1px dashed var(--linija); border-radius: var(--radius); padding: 34px; text-align: center; color: var(--siva); }

/* dashboard */
.statovi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; }
.stat-broj { font-size: 1.7rem; font-weight: 700; }
.stat span:last-child { color: var(--siva); font-size: .88rem; }
.panel { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.dvokolone { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.traka { display: inline-block; width: 90px; height: 8px; background: #e8ecef; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.traka-fill { height: 100%; background: var(--zelena); border-radius: 4px; }

/* kartica člana */
.clan-kartica { background: var(--bijela); border: 1px solid var(--linija); border-left: 4px solid var(--plava); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 18px; }
.clan-kartica h1 { margin: 0 0 8px; }
.sifra { color: var(--siva); font-weight: 400; font-size: .8em; }
.clan-podaci { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: .95rem; }
.clan-podaci .napomena { flex-basis: 100%; color: var(--zuta); }
.tel { font-weight: 700; font-size: 1.1em; }

/* anketa — sekcije */
.sekcija { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; }
.skrivena { display: none; }
.s-broj { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--siva); margin-bottom: 10px; }
.skripta {
  margin: 0 0 16px; padding: 14px 18px; background: #f0f5f9;
  border-left: 4px solid var(--plava); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.06rem;
}
.skripta.mala { font-size: .95rem; padding: 10px 14px; }
.uputa { color: var(--crvena); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; }
.izbor { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.izbor.stub { flex-direction: column; align-items: stretch; }
.izbor.stub .btn { padding: 12px 16px; }
.izbor.stub .btn em { color: var(--siva); font-size: .9em; }
.polja label, .polja fieldset { display: block; margin-bottom: 12px; }
.polja input[type=text], .polja input[type=email], .polja select,
.sekcija input[type=text], .sekcija select {
  width: 100%; max-width: 480px; padding: 9px 12px; border: 1px solid var(--linija);
  border-radius: var(--radius); font: inherit; display: block; margin-top: 3px;
}
.hint { color: var(--siva); font-size: .85em; font-weight: 400; }
fieldset { border: 1px solid var(--linija); border-radius: var(--radius); padding: 10px 14px; }
legend { font-size: .92rem; color: var(--siva); padding: 0 6px; }
.radio, .check { display: block; padding: 7px 4px; cursor: pointer; }
.radio input, .check input { margin-right: 8px; }
.radio.kutija { border: 1px solid var(--linija); border-radius: var(--radius); padding: 10px 16px; background: #fff; }
.radio.kutija:has(input:checked) { border-color: var(--plava); background: #f0f5f9; }

/* ===== MOBILNI UREĐAJI ===== */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { margin: 14px auto; padding: 0 10px; }
  h1 { font-size: 1.25rem; }

  /* topbar: horizontalno skrolanje navigacije */
  .topbar-in { padding: 0 10px; gap: 8px; flex-wrap: nowrap; }
  .brand { font-size: .95rem; white-space: nowrap; padding: 10px 0; }
  .topbar nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 10px 8px; white-space: nowrap; font-size: .92rem; }
  .topbar .who { display: none; }

  /* tabovi: jedan red sa skrolanjem */
  .tabovi { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
  .tabovi::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex-shrink: 0; }

  .dvokolone { grid-template-columns: 1fr; }
  .statovi { grid-template-columns: repeat(2, 1fr); }
  .filteri input[type=text] { min-width: 0; flex: 1 1 100%; }
  .filteri select, .filteri input[type=number] { flex: 1; }
  .filteri button { flex: 1; }

  /* liste članova → kartice umjesto tabele */
  .lista.kartice, .lista.kartice tbody, .lista.kartice tr, .lista.kartice td { display: block; width: 100%; }
  .lista.kartice thead { display: none; }
  .lista.kartice { border: none; background: none; }
  .lista.kartice tr { background: var(--bijela); border: 1px solid var(--linija); border-radius: var(--radius); margin-bottom: 10px; padding: 12px 14px; }
  .lista.kartice td { border: none; padding: 3px 0; }
  .lista.kartice td:empty { display: none; }
  .lista.kartice .btn { display: block; text-align: center; margin-top: 8px; }
  .lista.kartice a[href^=tel] { font-size: 1.15rem; font-weight: 700; }

  /* ostale (admin) tabele: horizontalno skrolanje */
  .lista:not(.kartice) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* anketa: veliki dodiri za palac */
  .sekcija { padding: 14px; }
  .skripta { font-size: 1rem; padding: 12px 14px; }
  .izbor { flex-direction: column; align-items: stretch; }
  .izbor .btn { text-align: center; padding: 14px 16px; font-size: 1.05rem; }
  .izbor .nazad { text-align: center; }
  .btn-da, .btn-ne { font-size: 1.15rem; padding: 16px; }
  .radio, .check { padding: 11px 4px; }
  .radio.kutija { padding: 13px 16px; }
  .sekcija input[type=text], .sekcija input[type=email], .sekcija select,
  .polja input[type=text], .polja input[type=email], .polja select { max-width: none; font-size: 16px; padding: 11px 12px; }
  input[type=radio], input[type=checkbox] { width: 20px; height: 20px; vertical-align: -4px; }

  /* kartica člana */
  .clan-kartica { padding: 12px 14px; }
  .clan-kartica h1 { font-size: 1.15rem; }
  .clan-podaci { flex-direction: column; gap: 4px; }
  .tel { font-size: 1.25em; }
}