/* NoLimit Knjigovodstvo - dizajn sistem v0.1
   Paleta: "glavna knjiga" - hladan papir, tamni petrolej, knjigovodstveno zelena */
:root {
  --papir: #f3f6f5;
  --list: #ffffff;
  --tinta: #17262a;
  --tinta-blaga: #51646a;
  --linija: #dde5e3;
  --petrolej: #0e5c50;
  --petrolej-tamni: #0a463d;
  --zelena-blaga: #e3efec;
  --crvena: #b3372f;
  --crvena-blaga: #f9e9e8;
  --zuta-blaga: #fdf4dc;
  --radius: 6px;
  --sjena: 0 1px 2px rgba(23, 38, 42, .06), 0 4px 16px rgba(23, 38, 42, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papir);
  color: var(--tinta);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.mono, .broj {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }

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

/* ---- Prijava ---- */
.prijava-okvir {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.prijava-kartica {
  width: 100%;
  max-width: 400px;
  background: var(--list);
  border: 1px solid var(--linija);
  border-left: 3px solid var(--petrolej);
  border-radius: var(--radius);
  box-shadow: var(--sjena);
  padding: 2rem;
}
.brend {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.brend .znak {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  color: var(--petrolej);
  font-size: 1.1rem;
}
.brend .naziv { font-weight: 600; }
.brend .pod { color: var(--tinta-blaga); font-size: .8rem; }

/* ---- Forme ---- */
label { display: block; font-size: .82rem; color: var(--tinta-blaga); margin-bottom: .25rem; }
input, select, textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
  color: var(--tinta);
  margin-bottom: .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Dropdown u stilu sistema: bez sistemske strelice, petrolej ševron */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230e5c50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
select:hover { border-color: var(--petrolej); }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--petrolej);
  outline-offset: 1px;
  border-color: var(--petrolej);
}

button {
  font: inherit;
  border: none;
  border-radius: var(--radius);
  padding: .55rem 1rem;
  cursor: pointer;
  background: var(--petrolej);
  color: #fff;
  font-weight: 500;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
button:hover { background: var(--petrolej-tamni); box-shadow: 0 2px 8px rgba(14,92,80,.22); }
button:active { transform: scale(.97); }
button.sekundarno {
  background: transparent;
  color: var(--petrolej);
  border: 1px solid var(--linija);
}
button.sekundarno:hover { background: var(--zelena-blaga); }
button.opasno { background: transparent; color: var(--crvena); border: 1px solid var(--linija); }
button.opasno:hover { background: var(--crvena-blaga); }
button.malo { padding: .3rem .6rem; font-size: .82rem; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Poruke ---- */
.poruka { padding: .6rem .8rem; border-radius: var(--radius); font-size: .88rem; margin-bottom: .9rem; }
.poruka.greska { background: var(--crvena-blaga); color: var(--crvena); }
.poruka.uspjeh { background: var(--zelena-blaga); color: var(--petrolej-tamni); }
.poruka.paznja { background: var(--zuta-blaga); color: #7a5d10; }

/* ---- App raspored ---- */
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
.bocna {
  background: var(--tinta);
  color: #cfdad6;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.bocna .brend { margin-bottom: 1.25rem; }
.bocna .brend .znak { color: #6fd0b8; }
.bocna .brend .naziv { color: #fff; }
.bocna nav { display: flex; flex-direction: column; gap: .15rem; }
.bocna nav button {
  background: transparent;
  color: #cfdad6;
  text-align: left;
  padding: .5rem .65rem;
  border-radius: var(--radius);
  font-weight: 400;
}
.bocna nav button:hover { background: rgba(255,255,255,.07); }
.bocna nav button.aktivno { background: rgba(111,208,184,.14); color: #6fd0b8; font-weight: 500; }
.bocna .dno { margin-top: auto; font-size: .8rem; color: #8fa3a0; }
.bocna .dno .ko { color: #fff; font-size: .88rem; }

.glavno { padding: 1.75rem 2rem; max-width: 1080px; }
.zaglavlje-trake { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }

/* ---- Tabele - stil glavne knjige ---- */
.kartica {
  background: var(--list);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--sjena);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.kartica .tijelo { padding: 1.25rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-blaga);
  font-weight: 600;
  padding: .6rem .9rem;
  border-bottom: 2px solid var(--linija);
  background: #fafcfb;
}
td { padding: .55rem .9rem; border-bottom: 1px solid var(--linija); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f7faf9; }

.znacka {
  display: inline-block;
  font-size: .74rem;
  padding: .1rem .5rem;
  border-radius: 99px;
  font-weight: 500;
}
.znacka.aktivan { background: var(--zelena-blaga); color: var(--petrolej-tamni); }
.znacka.neaktivan { background: var(--crvena-blaga); color: var(--crvena); }
.znacka.uloga { background: #eef1f0; color: var(--tinta-blaga); font-family: "IBM Plex Mono", monospace; }

/* ---- Modal ---- */
.modal-pozadina {
  position: fixed; inset: 0;
  background: rgba(23,38,42,.45);
  display: grid; place-items: center;
  padding: 1rem;
  z-index: 50;
  animation: pozadina-ulaz .18s ease both;
}
.modal {
  background: var(--list);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(23,38,42,.25);
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.5rem;
  animation: modal-ulaz .22s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes pozadina-ulaz { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-ulaz {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mirno pojavljivanje redova tabele - jedan po jedan, kao listanje knjige */
@keyframes red-ulaz {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
tbody tr { animation: red-ulaz .3s ease both; }
tbody tr:nth-child(1)  { animation-delay: .02s; }
tbody tr:nth-child(2)  { animation-delay: .05s; }
tbody tr:nth-child(3)  { animation-delay: .08s; }
tbody tr:nth-child(4)  { animation-delay: .11s; }
tbody tr:nth-child(5)  { animation-delay: .14s; }
tbody tr:nth-child(6)  { animation-delay: .17s; }
tbody tr:nth-child(7)  { animation-delay: .20s; }
tbody tr:nth-child(8)  { animation-delay: .23s; }
tbody tr:nth-child(9)  { animation-delay: .26s; }
tbody tr:nth-child(10) { animation-delay: .29s; }
tbody tr:nth-child(n+11) { animation-delay: .32s; }

/* Blagi prelaz na hover redova i kartica */
td { transition: background .15s ease; }
.kartica { animation: red-ulaz .35s ease both; }
.modal .akcije { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
/* Prosireni modal za editor faktura */
.modal:has(.modal-siroki-oznaka) { max-width: 880px; }

.privremena {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.15rem;
  background: var(--zuta-blaga);
  border: 1px dashed #d9c37a;
  border-radius: var(--radius);
  padding: .7rem 1rem;
  text-align: center;
  letter-spacing: .05em;
  user-select: all;
}

.prazno { color: var(--tinta-blaga); text-align: center; padding: 2rem 1rem; font-size: .9rem; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .bocna { flex-direction: row; align-items: center; overflow-x: auto; }
  .bocna nav { flex-direction: row; }
  .bocna .dno { margin: 0 0 0 auto; }
  .glavno { padding: 1.25rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}