/* Zajednički izgled kalkulatora: obrazac, odabir mjesta, kartica s rezultatom, obračun i izvori */

/* Boje dijelova u traci "na što odlazi novac" */
:root {
  --c-neto: var(--pen);
  --c-porez: var(--red);
  --c-mo: #7d8aa8;
  --c-zo: #d1a33a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-mo: #8794b4; --c-zo: #e0b54e; }
}
:root[data-theme="dark"] { --c-mo: #8794b4; --c-zo: #e0b54e; }

.hint { display: block; color: var(--ink-soft); font-size: 0.9rem; font-weight: 400; line-height: 1.4; }
.hint:empty { display: none; }
.field > label { font-weight: 600; font-size: 0.95rem; }
.field-error { color: var(--red); font-weight: 600; font-size: 0.95rem; }
.field-error:empty { display: none; }

.calc { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) {
  .calc { grid-template-columns: minmax(300px, 24rem) minmax(0, 1fr); gap: 2rem; }
}

/* ---------- Unos ---------- */
.calc-form {
  display: grid; gap: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 1.25rem;
}

.segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  margin: 0; padding: 3px; border: 0;
  background: var(--surface-2); border-radius: 10px;
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: block; text-align: center; padding: 0.55rem 0.25rem; border-radius: 8px;
  font-weight: 600; font-size: 0.95rem; color: var(--ink-soft);
}
.segmented label:hover span { color: var(--ink); }
.segmented input:checked + span {
  background: var(--surface); color: var(--pen);
  box-shadow: 0 1px 2px rgba(20, 32, 70, 0.12);
}
.segmented input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pen) 60%, transparent); outline-offset: 1px; }

/* Skupina polja koja se zajedno skriva ili prikazuje */
.polja { display: grid; gap: 1.15rem; }

/* Dva polja u istom retku */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.9rem; }
.pair input { min-width: 0; }
.pair-full { grid-column: 1 / -1; }
/* Polja za datum su preširoka za dva u retku na mobitelu */
@media (max-width: 480px) { .pair.dates { grid-template-columns: minmax(0, 1fr); } }

.money { position: relative; }
.money input, .combo-box input, .field select, .field > input {
  width: 100%; min-height: 2.9rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.money input {
  padding-right: 2.2rem;
  font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.money-unit {
  position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-weight: 600; pointer-events: none;
}
.money input[aria-invalid="true"] { border-color: var(--red); }

/* Odabir mjesta */
.combo-box { position: relative; }
.combo-box input { padding-right: 2.4rem; }
.combo-clear {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border: 0; border-radius: 6px; cursor: pointer;
  background: none; color: var(--ink-soft); font-size: 1.3rem; line-height: 1;
}
.combo-clear:hover { color: var(--ink); background: var(--surface-2); }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: 4px;
  max-height: 17rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--sheet-shadow);
}
.combo-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.65rem; border-radius: 7px; cursor: pointer;
}
.combo-list li[aria-selected="true"] { background: color-mix(in srgb, var(--pen) 12%, var(--surface)); }
.combo-list .rates { color: var(--ink-soft); font-size: 0.88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.combo-list .empty { color: var(--ink-soft); cursor: default; }

/* Više mogućnosti */
.more { border-top: 1px solid var(--line); padding-top: 0.35rem; }
.more summary {
  list-style: none; cursor: pointer; padding: 0.45rem 0;
  font-weight: 650; color: var(--pen);
  display: flex; align-items: center; gap: 0.5rem;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin-top: -0.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s;
}
.more[open] summary::after { transform: rotate(-135deg); margin-top: 0.15rem; }
.more-body { display: grid; gap: 1.1rem; padding: 0.6rem 0 0.25rem; }
@media (prefers-reduced-motion: reduce) { .more summary::after { transition: none; } }

.choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.choice legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.4rem; width: 100%; }
.choice.stacked { flex-direction: column; gap: 0.45rem; }
.choice label, .check { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.choice input, .check input { accent-color: var(--pen); width: 1.05rem; height: 1.05rem; flex: none; }
.check { align-items: flex-start; }
.check input { margin-top: 0.25rem; }

/* ---------- Rezultat ---------- */
.result {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
}
.result-head { padding: 1.4rem 1.4rem 1.3rem; border-bottom: 1px solid var(--line); }
.result-label { font-size: 1rem; font-weight: 650; color: var(--ink-soft); }
.result-value {
  margin-top: 0.2rem;
  font-size: clamp(2.6rem, 8vw, 4.25rem); font-weight: 800; font-stretch: 80%;
  letter-spacing: -0.02em; line-height: 1; color: var(--pen);
  font-variant-numeric: tabular-nums;
}
.result-value.is-empty { color: var(--line-strong); }
.result-sub { margin-top: 0.6rem; color: var(--ink-soft); }
.result-sub strong { color: var(--ink); font-weight: 650; }

.result-body { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: 1.25rem; }

/* Na što odlazi ukupni trošak isplatitelja */
.split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.split span { display: block; min-width: 0; transition: flex-grow 0.25s; }
.split-neto { background: var(--c-neto); }
.split-porez { background: var(--c-porez); }
.split-mo { background: var(--c-mo); }
.split-zo { background: var(--c-zo); }
@media (prefers-reduced-motion: reduce) { .split span { transition: none; } }

.split-legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem 1rem;
  font-size: 0.95rem;
}
.split-legend li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; align-items: baseline; }
.split-legend .dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; align-self: center; }
.split-legend .amount { grid-column: 2; font-weight: 650; font-variant-numeric: tabular-nums; }
.split-legend .amount small { color: var(--ink-soft); font-weight: 400; font-size: 0.88rem; }

.obracun { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.obracun th, .obracun td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.obracun th { text-align: left; font-weight: 400; padding-right: 1rem; }
.obracun td { text-align: right; white-space: nowrap; }
.obracun th small { display: block; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.35; }
.obracun .minus td { color: var(--ink-soft); }
.obracun .sub th, .obracun .sub td { font-weight: 650; }
.obracun .total th, .obracun .total td { font-weight: 800; font-size: 1.15rem; color: var(--pen); border-bottom: 2px solid var(--pen); }
.obracun .group th {
  padding-top: 1.3rem; border-bottom: 0;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.obracun .employer th, .obracun .employer td { font-weight: 700; border-bottom: 0; }

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.notes:empty { display: none; }
.notes li {
  padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 0.95rem;
  background: var(--surface-2); border-left: 3px solid var(--pen);
}
.notes li.warn { border-left-color: var(--red); }

/* Napomena da je izračun informativan; uvijek vidljiva na dnu kartice */
.disclaimer {
  margin: 0; padding: 0.9rem 1.4rem 1.1rem;
  border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft);
}
.disclaimer strong { color: var(--ink); font-weight: 650; }

/* Traka s rezultatom na mobitelu */
.result-dock { display: none; }
@media (max-width: 899px) {
  body.has-dock { padding-bottom: 4.5rem; }
  .result-dock:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(20, 32, 70, 0.08);
  }
  .result-dock p { color: var(--ink-soft); }
  .result-dock strong { color: var(--pen); font-size: 1.3rem; font-weight: 800; margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
}

/* ---------- Izvori ---------- */
.sources { max-width: 46rem; padding-top: 4rem; }
.sources > h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 800; font-stretch: 85%; letter-spacing: -0.02em; margin-bottom: 1rem; }
.sources ul { padding-left: 1.2rem; margin: 0.9rem 0; }
.sources li + li { margin-top: 0.55rem; }
.sources p + p { margin-top: 0.9rem; }
.sources .updated { color: var(--ink-soft); font-size: 0.95rem; }
.faq { padding-top: 3rem; }