/*
  Jedan fajl, bez okvira i bez preprocesora (s3-web-002). Alat za računar u kancelariji: gusto, čitko, bez
  animacija. Tekst se selektuje i Ctrl+F ga nalazi — tabela je tabela, ne mreža od div-ova.
*/
:root {
  --tekst: #16202c;
  --tiho: #5b6b7c;
  --linija: #dde3ea;
  --pozadina: #f5f7fa;
  --papir: #ffffff;
  --naglasak: #1f5f8b;
  --greska: #9b2226;
  --dobro: #2d6a4f;
  --razmak: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  color: var(--tekst);
  background: var(--pozadina);
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

body.ulaz { display: block; }

/* --- bočni meni --- */
.bocni {
  background: var(--papir);
  border-right: 1px solid var(--linija);
  padding: var(--razmak);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grb { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-bottom: 4px; }
.grb .oznaka {
  background: var(--naglasak); color: #fff; font-weight: 700; border-radius: 6px;
  padding: 6px 8px; letter-spacing: .5px;
}
.grb .ime { font-weight: 600; }
.sezona { margin: 0 0 8px; color: var(--tiho); font-size: 13px; }

.bocni nav { display: flex; flex-direction: column; gap: 2px; }
.bocni nav a {
  padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--tekst);
}
.bocni nav a:hover { background: var(--pozadina); }
.bocni nav a.tekuca { background: var(--pozadina); font-weight: 600; }

.odjava { margin-top: auto; border-top: 1px solid var(--linija); padding-top: 12px; }
.odjava .ko { margin: 0 0 8px; color: var(--tiho); font-size: 13px; }

/* --- glavni deo --- */
main { padding: 24px 28px; max-width: 1100px; }
main > header { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--linija);
  padding-bottom: 12px; margin-bottom: 20px; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 10px; }
.datum { color: var(--tiho); margin: 0; }
section { background: var(--papir); border: 1px solid var(--linija); border-radius: 8px;
  padding: 16px; margin-bottom: 16px; }
section.uizradi { background: transparent; border-style: dashed; color: var(--tiho); }

/* --- ulazne strane --- */
.kartica {
  max-width: 420px; margin: 8vh auto; background: var(--papir); border: 1px solid var(--linija);
  border-radius: 10px; padding: 28px;
}
.kartica h1 { margin-bottom: 18px; }
.rezerva { border-top: 1px solid var(--linija); margin-top: 18px; padding-top: 14px; display: grid; gap: 10px; }

/* --- obrasci --- */
label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--tiho); }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; padding: 9px 10px; border: 1px solid var(--linija); border-radius: 6px; font-size: 15px;
  background: #fff; color: inherit;
}
input:focus { outline: 2px solid var(--naglasak); outline-offset: 1px; }
button, .dugme {
  display: inline-block; margin-top: 14px; padding: 9px 14px; border: 0; border-radius: 6px;
  background: var(--naglasak); color: #fff; font-size: 15px; cursor: pointer; text-decoration: none;
}
button:hover, .dugme:hover { filter: brightness(1.08); }
button.tiho { background: transparent; color: var(--naglasak); padding: 4px 0; margin: 0; }

/* --- poruke --- */
.poruka { padding: 10px 12px; border-radius: 6px; margin: 0 0 14px; }
.poruka.greska { background: #fdecec; color: var(--greska); border: 1px solid #f3c6c6; }
.poruka.info { background: #eef6f1; color: var(--dobro); border: 1px solid #cbe4d6; }
.sitno { color: var(--tiho); font-size: 13px; }

/* --- tabele --- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linija); vertical-align: top; }
th { font-size: 13px; color: var(--tiho); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; }
dt { color: var(--tiho); font-size: 13px; }
dd { margin: 0; }
.znak { background: var(--pozadina); border: 1px solid var(--linija); border-radius: 4px;
  padding: 1px 6px; font-size: 12px; color: var(--tiho); margin-left: 6px; }

/* --- štampa: papir nosi sadržaj, ne navigaciju (W7.1) --- */
@media print {
  body { display: block; background: #fff; }
  .bocni, .odjava, button, .dugme, .uizradi { display: none !important; }
  main { max-width: none; padding: 0; }
  section { border: 0; padding: 0; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}

/* Tablet radi, telefon nije cilj: za telefon postoji aplikacija (§W21). */
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .bocni { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0;
    border-bottom: 1px solid var(--linija); }
  .bocni nav { flex-direction: row; flex-wrap: wrap; }
  .odjava { margin-top: 0; border-top: 0; padding-top: 0; }
  .odjava .ko { display: none; }
}