/* Calmea · HACCP — sign-in page and the client's dashboard (/prijava, /racun). Built on upitnik.css: same tokens, cards,
   buttons, sidebar and drawer; only what those pages add is here. Figtree only. */

/* the e-mail field looks like the questionnaire's text fields */
input[type=email] { display: block; width: 100%; background-color: #fff; color: var(--ink); border: 1.5px solid var(--line-2);
  border-radius: 12px; padding: 13px 16px; font-size: 1.05rem; line-height: 1.45; box-shadow: inset 0 1px 2px rgba(23, 35, 29, .04);
  transition: border-color .15s, box-shadow .2s; }
input[type=email]:hover { border-color: var(--line-3); }
input[type=email]:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px rgba(39, 92, 68, .13); }

/* ---------- sign-in */
.sso { display: grid; gap: 10px; margin: 4px 0 6px; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; border-radius: 14px; border: 1.5px solid var(--line-2);
  background: #fff; color: var(--ink); font-weight: 650; font-size: 1.02rem; text-decoration: none; box-shadow: var(--sh-1);
  transition: border-color .15s, box-shadow .2s, transform .08s; }
.sso-btn:hover { color: var(--ink); border-color: var(--ink-2); box-shadow: var(--sh-2); }
.sso-btn:active { transform: translateY(1px); }
.sso-i { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; }
.sso-i svg { width: 100%; height: 100%; }
.ili { display: flex; align-items: center; gap: 14px; margin: 20px 0 4px; color: var(--faint); font-size: .84rem; font-weight: 600; }
.ili::before, .ili::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.prijava-f .q { padding: 12px 0 18px; border: 0; }
.prijava-f input[type=email], .prijava-f input[type=text] { width: 100%; }
#kod { font-size: 1.4rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 260px; }
.prijava-f .notice { margin: 4px 0 6px; }
.testkod { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--butter-soft); border: 1px dashed var(--butter-2);
  color: var(--butter-ink); font-size: .9rem; font-weight: 600; }
.prijava-note { margin: 26px 0 0; }
.foot.plain .linkbtn { font-size: .92rem; }

/* ---------- dashboard shell (sidebar + main from upitnik.css) */
.r-user { background: var(--well); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.avatar { width: 42px; height: 42px; border-radius: 13px; background: var(--acc); color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  font: 700 1rem/1 var(--sans); letter-spacing: .02em; }
.r-user b { display: block; font-weight: 650; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.r-user small { display: block; color: var(--mute); font-size: .8rem; overflow-wrap: anywhere; }
.r-nav { display: grid; gap: 3px; }
.r-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.r-nav a .ic { width: 19px; height: 19px; color: var(--faint); }
.r-nav a:hover { background: var(--well); color: var(--ink); }
.r-nav a.cur { background: var(--acc-soft); color: var(--acc-2); }
.r-nav a.cur .ic { color: var(--acc); }
.r-nav .cnt { margin-left: auto; font-size: .78rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.side-foot form { margin: 0; }
.side-foot .btn.quiet { padding: 8px 10px; font-size: .88rem; }
.r-main { padding-bottom: 72px; }
.r-top { display: flex; align-items: center; gap: 14px; padding: 26px 0 8px; }
.r-top .crumb { font-size: .9rem; color: var(--mute); }
.r-top .grow { flex: 1; }
.r-sec { scroll-margin-top: 20px; margin-top: 22px; }
.r-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; margin-bottom: 16px; }
.r-head h2 { margin: 0; }
.r-head .lead { margin: 4px 0 0; }
.card.r { padding: 28px clamp(20px, 3vw, 34px) 26px; }

/* greeting + numbers */
.hello h1 { margin-bottom: 6px; }
.hello .lead { margin-bottom: 20px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--well); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 14px; min-width: 0; }
.kpi b { display: block; font: 700 1.8rem/1.1 var(--sans); letter-spacing: -.035em; font-variant-numeric: lining-nums tabular-nums; }
.kpi b small { font-size: .5em; color: var(--mute); margin-left: 2px; }
.kpi span { display: block; font-size: .86rem; color: var(--mute); margin-top: 2px; }
.kpi.acc b { color: var(--acc); }

/* questionnaires */
.dlist { display: grid; gap: 14px; }
.drow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 22px; align-items: center; padding: 18px 20px;
  border-radius: 18px; background: var(--well); border: 1px solid var(--line); }
.drow.sel { background: var(--paper); border-color: var(--acc-3); box-shadow: 0 0 0 1px var(--acc-3) inset, var(--sh-1); }
.drow h3 { margin: 0 0 4px; font-size: 1.14rem; letter-spacing: -.016em; overflow-wrap: anywhere; }
.drow .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .86rem; color: var(--mute); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 650 .74rem/1 var(--sans); letter-spacing: .02em; padding: 5px 9px; border-radius: 99px;
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line-2); white-space: nowrap; }
.chip.acc { background: var(--acc-soft); color: var(--acc-2); border-color: var(--acc-soft-2); }
.chip.butter { background: var(--butter-soft); color: var(--butter-ink); border-color: var(--butter-line); }
.chip.ok { background: var(--acc); color: #fff; border-color: var(--acc); }
.drow .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.drow .acts .btn { padding: 10px 16px; font-size: .94rem; }
.bar { position: relative; height: 7px; border-radius: 99px; background: var(--bg-2); overflow: hidden; margin-top: 12px; max-width: 420px; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--acc); transition: width .7s var(--ease); }
.phases { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 12px; padding: 0; list-style: none; font-size: .8rem; color: var(--faint); }
.phases li { display: inline-flex; align-items: center; gap: 6px; }
.phases li:not(:last-child)::after { content: ""; width: 18px; height: 1.5px; background: var(--line-2); margin-left: 2px; }
.phases li .pd { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-3); }
.phases li.done { color: var(--acc-2); } .phases li.done .pd { background: var(--acc); border-color: var(--acc); }
.phases li.now { color: var(--ink); font-weight: 650; } .phases li.now .pd { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft-2); }
.empty { text-align: center; padding: 34px 16px 30px; }
.empty .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--acc-soft); color: var(--acc); padding: 13px; margin-bottom: 14px; }
.empty p { color: var(--mute); max-width: 44ch; margin: 6px auto 18px; }
/* which dairy the view shows (an account with several): room between the choices and before what follows (Hrvoje, 9 Nov) */
.pick { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 6px 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pick .pill { padding: 10px 18px 10px 14px; font-size: .94rem; }
@media (max-width: 520px) { .pick { flex-direction: column; align-items: stretch; } }

/* answers (read-only) */
.ans-sec { border-top: 1px solid var(--line); }
.ans-sec:first-child { border-top: 0; }
.ans-h { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 14px 4px; text-align: left; cursor: pointer;
  color: var(--ink); font-weight: 650; font-size: 1rem; border-radius: 10px; }
.ans-h:hover { background: var(--well); }
.ans-h .n { margin-left: auto; font-size: .8rem; color: var(--mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.ans-h .chev { color: var(--faint); }
.ans-sec.open .ans-h .chev { transform: rotate(180deg); }
.ans-sec .fold > div { padding: 0 4px; }
.ans-sec.open .fold > div { padding-bottom: 14px; }
dl.ans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; }
dl.ans > div { display: contents; }
dl.ans dt, dl.ans dd { padding: 9px 0; border-top: 1px dashed var(--line); margin: 0; font-size: .93rem; line-height: 1.45; }
dl.ans dt { color: var(--mute); padding-right: 16px; }
dl.ans dd { color: var(--ink); font-weight: 550; overflow-wrap: anywhere; white-space: pre-line; }
dl.ans dd.none { color: var(--line-3); font-weight: 400; }
.sub-h { margin: 14px 0 4px; font-weight: 650; font-size: .95rem; }

/* automation */
.auto-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 30px; align-items: center; }
.gauge { position: relative; width: 168px; height: 168px; }
.gauge svg { display: block; transform: rotate(-90deg); }
.gauge .trk { stroke: var(--bg-2); }
.gauge .pot { stroke: var(--butter-line); stroke-linecap: round; }
.gauge .val { stroke: var(--acc); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
/* hand work: red at 100 %, amber after the documentation (80 %), then yellow and green towards 0 % (Hrvoje, 9 Nov) */
.gauge.r-hi .val { stroke: var(--bad); } .gauge.r-hi .lbl b { color: var(--bad); }
.gauge.r-mid .val { stroke: #d9822b; } .gauge.r-mid .lbl b { color: #b7651a; }
.gauge.r-lo .val { stroke: #c9a227; } .gauge.r-lo .lbl b { color: #8a6d0e; }
.gauge.r-ok .val { stroke: var(--acc); } .gauge.r-ok .lbl b { color: var(--acc-2); }
.gauge .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gauge .lbl b { font: 700 2.5rem/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.gauge .lbl b small { font-size: .45em; color: var(--mute); }
.gauge .lbl span { font-size: .78rem; color: var(--mute); margin-top: 4px; }
.auto-sum h3 { margin: 0 0 6px; font-size: 1.24rem; }
.auto-sum p { margin: 0 0 10px; color: var(--mute); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .l-now { background: var(--acc); } .legend .l-pot { background: var(--butter-line); } .legend .l-man { background: var(--bg-2); border: 1px solid var(--line-2); }
.cats { display: grid; gap: 10px; margin: 24px 0 6px; }
.cat { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 72px; align-items: center; gap: 14px; font-size: .9rem; }
.cat .cbar { position: relative; height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.cat .cbar .p { position: absolute; inset: 0 auto 0 0; background: var(--butter-line); border-radius: 99px; }
.cat .cbar .a { position: absolute; inset: 0 auto 0 0; background: var(--acc); border-radius: 99px; }
.cat .cv { text-align: right; color: var(--mute); font-variant-numeric: tabular-nums; font-size: .84rem; }
.tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 8px; }
.tip { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--butter-soft); border: 1px solid var(--butter-line); }
.tip .tn { font: 700 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--butter-ink); }
.tip b { font-weight: 650; line-height: 1.3; }
.tip span { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.tip em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: .84rem; font-weight: 700; color: var(--acc-2); }
.recs { display: grid; gap: 10px; margin-top: 18px; }
.rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.rec.on { background: var(--acc-soft); border-color: var(--acc-soft-2); }
.rec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rec-h b { font-weight: 650; font-size: 1rem; }
.rec-h .kod { font: 700 .74rem/1 var(--sans); color: var(--mute); letter-spacing: .04em; }
.rec p { margin: 4px 0 0; font-size: .9rem; color: var(--mute); line-height: 1.5; }
.rec p.how { color: var(--ink-2); }
.rec p.how b { color: var(--acc-2); font-weight: 650; }
.rec .side-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.rec .freq { font-size: .8rem; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink-2); user-select: none;
  background: none; border: 0; padding: 4px 0; }
.toggle .sw { position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--line-2); transition: background-color .2s; flex: 0 0 auto; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1);
  transition: transform .2s var(--ease); }
.toggle[aria-checked="true"] .sw { background: var(--acc); }
.toggle[aria-checked="true"] .sw::after { transform: translateX(16px); }
.note-s { font-size: .84rem; color: var(--mute); margin: 16px 0 0; line-height: 1.55; }
.filter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.filter button { border: 1px solid var(--line-2); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: .84rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* account */
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.acc-row { padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.acc-row .label { margin-bottom: 4px; }
.acc-row .v { font-weight: 600; overflow-wrap: anywhere; }
.acc-row .v small { display: block; font-weight: 400; color: var(--mute); font-size: .84rem; }
.namef { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.namef input { flex: 1 1 200px; min-width: 0; }
.acts-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.danger-z { margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: var(--bad-soft); border: 1px solid var(--bad-line); }
.danger-z b { color: var(--bad); }
.danger-z p { margin: 6px 0 10px; font-size: .9rem; color: var(--ink-2); }
.danger-z .row2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.danger-z input { max-width: 180px; }
.btn.bad-solid { background: var(--bad); box-shadow: none; }
.btn.bad-solid:hover { background: #8f1e18; }
.msg { font-size: .88rem; margin: 10px 0 0; min-height: 1.2em; }
.msg.ok { color: var(--acc); } .msg.bad { color: var(--bad); }

@media (max-width: 1000px) {
  .r-top { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
}
@media (max-width: 860px) {
  .tips { grid-template-columns: minmax(0, 1fr); }
  .auto-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .legend { justify-content: center; }
}
@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px 12px 10px; } .kpi b { font-size: 1.45rem; } .kpi span { font-size: .76rem; line-height: 1.3; }
  .drow { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .drow .acts { justify-content: flex-start; }
  dl.ans { grid-template-columns: minmax(0, 1fr); }
  dl.ans dt { border-top: 1px dashed var(--line); padding-bottom: 0; }
  dl.ans dd { border-top: 0; padding-top: 2px; }
  .cat { grid-template-columns: minmax(0, 1fr) 64px; }
  .cat .cbar { grid-column: 1 / -1; grid-row: 2; }
  .rec { grid-template-columns: minmax(0, 1fr); }
  .rec .side-r { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .card.r { padding: 24px 18px 20px; }
}
.tip .tz { font-size: .8rem; color: var(--mute); }
/* traceability chain: milk -> batch -> materials -> exit and customer */
.lanac { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lanac li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 12px; border-radius: 14px; background: var(--well);
  border: 1px dashed var(--line-3); min-width: 0; }
.lanac li:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-weight: 700;
  z-index: 1; background: var(--paper); line-height: 1; padding: 2px 0; }
.lanac li.on { background: var(--acc-soft); border: 1px solid var(--acc-soft-2); }
.lanac .ld { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-3); display: grid; place-items: center; background: #fff; }
.lanac li.on .ld { background: var(--acc); border-color: var(--acc); color: #fff; }
.lanac .ld svg { width: 12px; height: 12px; }
.lanac b { font-weight: 650; font-size: .95rem; line-height: 1.25; }
.lanac small { font-size: .78rem; color: var(--mute); }
@media (max-width: 720px) {
  .lanac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lanac li:nth-child(2)::after { display: none; }
}
/* icons inside buttons and links (upitnik.css sizes .ic only in its own places) */
.btn .ic, .r-top .ic, .acts-row .ic { width: 18px; height: 18px; }
.empty .ic { display: inline-grid; }
#kod::placeholder { letter-spacing: normal; font-size: 1rem; }

/* ---------- one view at a time (6 Nov): statuses, Calmea's message, the automation call to action, thank-you dialog */
.r-top .crumb b { color: var(--ink); font-weight: 650; }
.r-top .crumb .sep { color: var(--line-3); }
.chip.warn { background: var(--butter-soft); color: var(--butter-ink); border-color: var(--butter-2); }
.chip.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.phases li.bad { color: var(--bad); font-weight: 650; } .phases li.bad .pd { background: var(--bad); border-color: var(--bad); }
.stanje { display: grid; gap: 4px; }
.stanje .meta { margin-top: 2px; }
.opis { margin: 12px 0 0; color: var(--ink-2); max-width: 62ch; }
.poruka { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--well); }
.poruka .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--acc); flex: 0 0 auto; }
.poruka b { display: block; font-size: .84rem; color: var(--mute); font-weight: 650; }
.poruka p { margin: 2px 0 0; white-space: pre-line; color: var(--ink); }
.poruka.warn { background: var(--butter-soft); border-color: var(--butter-line); } .poruka.warn .ic { color: var(--butter-ink); }
.poruka.bad { background: var(--bad-soft); border-color: var(--bad-line); } .poruka.bad .ic { color: var(--bad); }
.poruka.ok { background: var(--acc-soft); border-color: var(--acc-soft-2); }
.cta-auto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: center;
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper) 55%, var(--acc-soft) 100%); }
.cta-r h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.cta-r .lead { margin: 0 0 12px; font-size: 1rem; }
.cta-r .eyebrow .chip { letter-spacing: .02em; text-transform: none; }
.cta-bar { position: relative; height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; max-width: 520px; }
.cta-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; }
.cta-bar .p { background: var(--butter-line); } .cta-bar .a { background: var(--acc); }
.cta-auto .acts-row { align-items: center; margin-top: 16px; }
.gauge.sm .lbl b { font-size: 1.7rem; } .gauge.sm .lbl span { font-size: .7rem; }
.hvala-dlg { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: var(--r-lg); padding: 34px clamp(20px, 4vw, 40px) 28px;
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-3); }
.hvala-dlg::backdrop { background: rgba(23, 35, 29, .45); }
.hvala-dlg .tick { width: 64px; height: 64px; margin-bottom: 16px; }
.hvala-dlg h2 { margin: 0 0 8px; }
.hvala-dlg form { margin: 22px 0 0; display: flex; justify-content: flex-end; }
.pogled-b { margin: 0 0 6px; background: var(--butter-soft); border-color: var(--butter-line); }
.pogled-b .ic { color: var(--butter-ink); }
.shell.pogled .side { background: var(--well); }
/* contact details */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.pf { display: grid; gap: 6px; min-width: 0; }
.pf label { font-weight: 650; font-size: .92rem; }
.pf input, .pf select { width: 100%; }
.pf input[type=tel] { display: block; background-color: #fff; color: var(--ink); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 16px;
  font-size: 1.05rem; line-height: 1.45; }
.pf input[type=tel]:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px rgba(39, 92, 68, .13); }
.pf.has-err input, .pf.has-err select { border-color: var(--bad); background-color: var(--bad-soft); }
.err-s { margin: 0; color: var(--bad); font-size: .86rem; min-height: 0; }
.err-s:empty { display: none; }
.danger-z.card { background: var(--bad-soft); border-color: var(--bad-line); box-shadow: none; }
@media (max-width: 720px) {
  .cta-auto { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
}
.r-sec { display: grid; gap: 18px; }
.stanje .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .86rem; color: var(--mute); }
/* contact details filled from the questionnaire, not yet saved (6 Nov) */
.iz-nota { margin: 0 0 18px; background: var(--butter-soft); border-color: var(--butter-line); }
.iz-nota .ic { color: var(--butter-ink); }
.iz-tag { margin-left: 8px; font: 700 .66rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--butter-ink);
  background: var(--butter-soft); border: 1px solid var(--butter-line); border-radius: 99px; padding: 3px 7px; vertical-align: 1px; }
.pf.iz-upitnika input, .pf.iz-upitnika select { border-color: var(--butter-2); background-color: #fffcf2; }
/* documentation handed over by Calmea (6 Nov) */
.dok-top { display: grid; gap: 14px; margin-bottom: 4px; }
.dok-top .poruka { margin: 0; }
.dok-top .poruka span { display: grid; gap: 2px; }
.dok-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dok-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.dok-n { font: 650 .82rem/1 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.dok-list li.razvoj .dok-t { color: var(--faint); }
/* Pomoć: contact and bug report forms (9 Nov) */
.pomoc-f .pf { display: grid; gap: 6px; margin-top: 14px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.pomoc-f input, .pomoc-f textarea { width: 100%; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 11px 13px; font: inherit; font-weight: 400;
  background: #fff; resize: vertical; }
.pomoc-f input:focus, .pomoc-f textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft-2); }
.pomoc-f .acts-row { margin-top: 16px; align-items: center; }
/* the client's permission for Calmea to fill in the questionnaire, 2 hours (9 Nov) */
.dopustenje { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin: 14px 0 4px;
  padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 14px; }
.dopustenje .ic { width: 20px; height: 20px; color: var(--mute); } .dopustenje p { margin: 2px 0 0; }
.dopustenje.on { border-style: solid; border-color: var(--acc-soft-2); background: var(--acc-soft); } .dopustenje.on .ic { color: var(--acc); }
.dop-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
p.dopustenje { display: flex; gap: 8px; border: 0; padding: 0; }
@media (max-width: 620px) { .dopustenje { grid-template-columns: auto minmax(0, 1fr); } .dop-a { grid-column: 1 / -1; justify-content: flex-start; } }
/* Calmea's remarks to answer (9 Nov) */
.cta-nap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; margin-bottom: 18px;
  padding: 24px clamp(18px, 3vw, 30px); border-radius: 20px; background: linear-gradient(135deg, #b3261e, #8f1d17); color: #fff;
  box-shadow: 0 10px 30px rgba(143, 29, 23, .28); }
.cta-nap-i { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.cta-nap-i svg { width: 28px; height: 28px; color: #fff; }
.cta-nap .eyebrow { color: #ffd6d0; margin: 0; } .cta-nap h2 { color: #fff; margin: 2px 0 4px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.cta-nap-t p:last-child { margin: 0; color: #ffe9e6; }
.btn.cta-nap-b { background: #fff; color: #8f1d17; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); white-space: nowrap; }
.btn.cta-nap-b:hover { background: #fff3f1; }
@media (max-width: 620px) { .cta-nap { grid-template-columns: auto minmax(0, 1fr); } .btn.cta-nap-b { grid-column: 1 / -1; justify-content: center; } }
.napomene.ceka { padding: 0; overflow: hidden; border: 2px solid var(--bad); }
.napomene.ceka .nap-top { background: var(--bad); color: #fff; padding: 16px 18px; }
.napomene.ceka .nap-top .ic { color: #fff; width: 26px; height: 26px; }
.napomene.ceka .nap-top p { color: #ffe9e6; }
.napomene.ceka .nap-l, .napomene.ceka .acts-row { margin-left: 16px; margin-right: 16px; }
.napomene.ceka .acts-row { margin-bottom: 16px; }
.nap-naslov { margin: 0; color: #fff; font-size: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nap-broj { font: 700 .78rem/1 var(--sans); background: #fff; color: var(--bad); padding: 5px 10px; border-radius: 99px; }
.napomene { margin: 16px 0 4px; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--paper); }
.napomene.ceka { border-color: var(--bad-line); background: var(--bad-soft); }
.nap-top { display: flex; gap: 12px; align-items: flex-start; } .nap-top .ic { width: 22px; height: 22px; color: var(--bad); flex: 0 0 auto; margin-top: 2px; }
.nap-top p { margin: 2px 0 0; }
.nap-l { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.nap-i { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: 12px; padding: 12px 14px; }
.nap-i.isp { border-left-color: #d9822b; } .nap-i.nap { border-left-color: var(--acc); }
.nap-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .nap-i p { margin: 6px 0 0; }
.nap-k { white-space: pre-line; } .nap-o { white-space: pre-line; color: var(--acc-2); }
/* the exchange with Calmea, round after round (9 Nov) */
.nap-pov { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.nap-pov li { padding: 8px 10px; border-radius: 10px; background: var(--bg-2); font-size: .92rem; }
.nap-pov li.kl { background: var(--acc-soft); margin-left: 24px; }
.nap-pov li p { margin: 2px 0 0; white-space: pre-line; }
.nap-i.prih { border-left-color: var(--acc); opacity: .85; }
.nap-prih { margin: 12px 16px 0; } .nap-prih summary { cursor: pointer; font-weight: 600; color: var(--acc-2); }
.napomene.gotovo { border-color: var(--acc-soft-2); background: var(--acc-soft); } .napomene.gotovo .nap-top .ic { color: var(--acc); }
.nap-i textarea { width: 100%; margin-top: 8px; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 9px 11px; font: inherit; resize: vertical; background: #fff; }
.nap-i textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft-2); }
.napomene .acts-row { margin-top: 14px; align-items: center; }
.razvoj-tag { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 99px; background: var(--bg-2); color: var(--mute);
  font: 600 .72rem/1.5 var(--sans); vertical-align: 1px; }
.dok-t { min-width: 0; overflow-wrap: anywhere; font-size: .95rem; }
.dok-a { display: flex; gap: 6px; }
.dok-a a.f { display: inline-block; border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 10px; font-size: .8rem; font-weight: 650; text-decoration: none;
  color: var(--acc-2); background: #fff; }
.dok-a a.f:hover { border-color: var(--acc); background: var(--acc-soft); }
@media (max-width: 520px) { .dok-list li { grid-template-columns: 26px minmax(0, 1fr); } .dok-a { grid-column: 2; } }

/* automation on Pregled, below the status (6 Nov): the brand green, a big butter ring, few words */
.cta-auto { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: auto minmax(0, 1fr); gap: 26px 40px; padding: 34px clamp(22px, 4vw, 44px);
  color: #e8f0ea; background: radial-gradient(120% 90% at 0% 0%, #2f6a4f 0%, transparent 60%), var(--acc-2); border: 0; }
.cta-auto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .45; pointer-events: none; }
.cta-auto .eyebrow { color: var(--butter); }
.cta-auto .lvl { font: 700 .7rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-2); background: var(--butter);
  border-radius: 99px; padding: 5px 9px; }
.cta-auto h2 { color: #fffaf0; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 4px 0 6px; }
.cta-sub { margin: 0 0 18px; color: rgba(232, 240, 234, .85); font-size: 1.05rem; }
.cta-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.cta-facts > div { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); min-width: 0; }
.cta-facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(232, 240, 234, .7); }
.cta-facts dd { margin: 2px 0 0; font-weight: 650; color: #fffaf0; }
.cta-btn { background: var(--butter); color: var(--acc-2); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }
.cta-btn:hover { background: #f1d48a; color: var(--acc-2); }
.cta-auto .gauge .trk { stroke: rgba(255, 255, 255, .1); }
.cta-auto .gauge .pot { stroke: rgba(233, 196, 108, .35); }
.cta-auto .gauge.r-hi .val { stroke: #f0715f; } .cta-auto .gauge.r-hi .lbl b { color: #ff9a8b; }
.cta-auto .gauge.r-mid .val { stroke: #f2a14a; } .cta-auto .gauge.r-mid .lbl b { color: #ffc27f; }
.cta-auto .gauge.r-lo .val { stroke: #e9c46c; } .cta-auto .gauge.r-lo .lbl b { color: #f3d996; }
.cta-auto .gauge.r-ok .val { stroke: #8fd3a5; } .cta-auto .gauge.r-ok .lbl b { color: #b9e8c6; }
.cta-auto .gauge .val { stroke: var(--butter); }
.cta-auto .gauge .lbl b { color: #fffaf0; font-size: 3.2rem; }
.cta-auto .gauge .lbl span { color: rgba(232, 240, 234, .75); }
@media (max-width: 720px) { .cta-auto { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cta-facts { justify-content: center; } }

/* versions and editing (6 Nov) */
.vrijedi-n { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; }
.vrijedi-n .ic { width: 16px; height: 16px; color: var(--acc); }
.izmijeni { display: inline-flex; }
.potvrdi-izm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--butter-soft);
  border: 1px solid var(--butter-line); font-size: .9rem; color: var(--ink-2); }
.potvrdi-izm .btn { padding: 8px 14px; font-size: .9rem; }
.zast-tag { font: 700 .66rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 7px; margin-right: 6px; }
.dok-gr.stare .dok-t { color: var(--mute); }
.odg-alati { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 8px; }