/* Kamatni kalkulator — /kalkulator/kamata i sačuvani. Jedan ritam: pb-panel, pb-field + pb-field__lab, pb-input (puna širina ćelije),
   dvokolonski grid sa min-width:0 da se ništa ne skuplja, brojevi desno sa tabularnim ciframa, datumi kao tekst sa kalendarom. */

.km-links a { color: var(--c-brand); text-decoration: none; font-weight: 600; font-size: 13px; margin-left: 14px; white-space: nowrap; }
.km-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.km-panel { padding: 16px 18px; margin-bottom: 14px; }
.km-h { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--c-text-strong); letter-spacing: .02em; display: flex; justify-content: space-between; align-items: baseline; }
.km-h small { font-weight: 400; color: var(--c-text-subtle); font-size: 12px; }
.km-h--mt { margin-top: 16px; }
.km-muted { color: var(--c-text-subtle); font-weight: 400; }

/* situacija */
.km-sit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.km-sit label { border: 1px solid var(--c-border-divider); border-radius: 12px; padding: 10px 12px; background: var(--c-surface-card, #fff); cursor: pointer; min-width: 0; }
.km-sit label.on { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); background: var(--c-brand-surface, #eff4ff); }
.km-sit b { display: block; font-size: 13.5px; }
.km-sit small { color: var(--c-text-subtle); font-size: 12px; }
.km-sit-more { margin-top: 10px; font-size: 12.5px; color: var(--c-text-subtle); }
.km-sit-more a { color: var(--c-brand); text-decoration: none; font-weight: 600; }

/* strane */
.km-strane { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; font-size: 13.5px; }
.km-lab { font-size: 12px; color: var(--c-text-secondary); font-weight: 600; padding-top: 2px; }
.km-who b { display: block; font-weight: 600; }
.km-who b.km-ro { color: var(--c-text-secondary); }
.km-who small { display: block; color: var(--c-text-subtle); font-size: 12px; margin-top: 1px; }
.km-act a { color: var(--c-brand); text-decoration: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* stopa linija u osnovu */
.km-tip { font-size: 13px; color: var(--c-text-secondary); margin: -4px 0 12px; padding: 8px 12px; border: 1px solid var(--c-border-hairline); border-radius: 10px; background: var(--c-surface-page-soft); }
.km-tip b { color: var(--c-text-strong); }
.km-tip a { color: var(--c-brand); text-decoration: none; font-weight: 600; margin-left: 6px; }

/* hidden mora da pobedi display:flex iz pb-field/km-callout — inače ostaju prazne kutije (porez polja, žuti callout) */
.km-two [hidden], .pb-modal [hidden] { display: none !important; }

/* polja — JEDAN grid za ekran i modale */
.km-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.km-row--mt { margin-top: 12px; align-items: end; }
.km-row > .pb-field { min-width: 0; gap: 5px; }
.km-row .pb-field__lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-row .pb-field__lab small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--c-text-subtle); }
.km-span2 { grid-column: 1 / -1; }
.km-field--link { align-self: end; height: 40px; display: flex; align-items: center; }
.km-field--check { align-self: end; height: 40px; display: flex; align-items: center; }
.km-row .pb-input, .km-row select.pb-input { width: 100%; height: 40px; padding: 8px 12px; font-size: 14px; }
.km-in-group { display: flex; gap: 8px; align-items: center; min-width: 0; }
.km-in-group .pb-input { flex: 1 1 auto; min-width: 0; }
.km-unit { flex: 0 0 auto; font-size: 13px; color: var(--c-text-subtle); font-weight: 600; min-width: 34px; }
.km-num, .km-int { text-align: right; font-variant-numeric: tabular-nums; }
.km-sw { flex: 0 0 auto; height: 40px; font-size: 12px; color: var(--c-text-subtle); border: 1px solid var(--c-border-hairline); border-radius: 10px; padding: 0 10px; background: var(--c-surface-card, #fff); cursor: pointer; white-space: nowrap; font-family: inherit; }
.km-sw b { color: var(--c-text-strong); font-weight: 600; }
.km-sw i { font-style: normal; margin: 0 5px; color: var(--c-border-divider); }
.km-pib { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.km-pib .pb-cta-pill { white-space: nowrap; height: 40px; display: inline-flex; align-items: center; }
.km-check { font-size: 13px; color: var(--c-text-secondary); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; height: 40px; flex: 0 0 auto; }
.km-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-brand); }
.km-callout:empty { display: none; }
.km-check--mt { margin-top: 12px; height: auto; }
.km-hint { font-size: 12px; color: var(--c-text-subtle); margin-top: 8px; line-height: 1.5; }
.km-hint--top { margin: 0 0 12px; }
.km-hint--inline { margin: 0; }
.km-hint b { color: var(--c-text-secondary); font-weight: 600; }
.km-why { color: var(--c-brand); text-decoration: none; font-weight: 600; white-space: nowrap; }
.km-link { color: var(--c-brand); text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; }
.km-callout { border: 1px solid var(--c-state-warn-soft, #fcd34d); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--c-warn-deep, #b45309); margin-top: 10px; background: var(--c-surface-card, #fff); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; line-height: 1.5; }
.km-pop { position: relative; margin-top: 10px; max-width: 400px; background: var(--c-surface-card, #fff); border: 1px solid var(--c-border-divider); border-radius: 12px; box-shadow: 0 14px 40px rgba(7,31,77,.14); padding: 12px 14px; font-size: 12.5px; color: var(--c-text-secondary); line-height: 1.5; }
.km-pop::before { content: ""; position: absolute; top: -6px; left: 28px; width: 10px; height: 10px; background: var(--c-surface-card, #fff); border-left: 1px solid var(--c-border-divider); border-top: 1px solid var(--c-border-divider); transform: rotate(45deg); }
.km-pop b { color: var(--c-text-strong); display: block; margin-bottom: 4px; font-size: 13px; }
.km-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.km-chips span { border: 1px solid var(--c-border-divider); border-radius: 999px; padding: 2px 8px; font-size: 11px; color: var(--c-brand); white-space: nowrap; }

/* kalendar */
.km-cal { position: absolute; z-index: 1000; width: 268px; background: var(--c-surface-card, #fff); border: 1px solid var(--c-border-divider); border-radius: 12px; box-shadow: 0 14px 40px rgba(7,31,77,.16); padding: 10px; font-size: 13px; }
.km-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.km-cal__head b { font-weight: 600; color: var(--c-text-strong); }
.km-cal__nav { border: 0; background: transparent; cursor: pointer; color: var(--c-brand); font-size: 16px; width: 28px; height: 28px; border-radius: 8px; }
.km-cal__nav:hover { background: var(--c-surface-page-soft); }
.km-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.km-cal__wd { text-align: center; font-size: 10.5px; color: var(--c-text-subtle); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.km-cal__d { border: 0; background: transparent; cursor: pointer; height: 32px; border-radius: 8px; font-size: 13px; color: var(--c-text-strong); font-variant-numeric: tabular-nums; font-family: inherit; }
.km-cal__d:hover { background: var(--c-surface-page-soft); }
.km-cal__d.other { color: var(--c-text-subtle); }
.km-cal__d.wk { color: var(--c-text-subtle); }
.km-cal__d.today { box-shadow: inset 0 0 0 1px var(--c-brand); }
.km-cal__d.sel { background: var(--c-brand); color: var(--c-text-on-brand, #fff); }
.km-cal__foot { display: flex; justify-content: space-between; margin-top: 6px; }
.km-cal__foot a { color: var(--c-brand); text-decoration: none; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* osnovi lista */
.km-osnov-r { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-border-hairline); align-items: center; white-space: nowrap; font-size: 13px; }
.km-osnov-r small { color: var(--c-text-subtle); }
.km-osnov-r a { color: var(--c-brand); text-decoration: none; font-size: 12.5px; }
.km-n { text-align: right; font-variant-numeric: tabular-nums; }

/* uplate */
.km-redosled { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.km-lab-sm { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); }
.km-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--c-border-divider); border-radius: 999px; font-size: 12.5px; white-space: nowrap; background: var(--c-surface-card, #fff); }
.km-seg span { padding: 6px 14px; border-radius: 999px; color: var(--c-text-secondary); cursor: pointer; line-height: 1.3; }
.km-seg span.on { background: var(--c-brand-surface, #eff4ff); color: var(--c-brand); font-weight: 600; }
.km-seg.is-locked span { cursor: default; }
.km-seg--mb { margin-bottom: 12px; }
.km-uplate { width: 100%; border-collapse: collapse; font-size: 13px; }
.km-uplate th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-subtle); padding: 6px 8px; border-bottom: 1px solid var(--c-border-hairline); font-weight: 600; white-space: nowrap; }
.km-uplate th.km-n { text-align: right; }
.km-uplate td { padding: 8px; border-bottom: 1px solid var(--c-border-hairline); vertical-align: middle; }
.km-uplate td.km-d { white-space: nowrap; }
.km-uplate .km-split { font-size: 12px; color: var(--c-text-subtle); }
.km-uplate td.km-act { white-space: nowrap; text-align: right; }
.km-uplate td.km-act a { color: var(--c-brand); text-decoration: none; font-size: 12.5px; }
.km-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--c-border-divider); border-radius: 999px; background: var(--c-surface-card, #fff); color: var(--c-brand); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: inherit; }

/* napredno */
.km-adv { margin-top: 6px; font-size: 12.5px; color: var(--c-text-subtle); }
.km-adv summary { cursor: pointer; color: var(--c-brand); font-weight: 600; list-style: none; }
.km-adv summary::before { content: "▸ "; }
.km-adv[open] summary::before { content: "▾ "; }
.km-adv__body { margin-top: 10px; background: var(--c-surface-card, #fff); border: 1px solid var(--c-border-hairline); border-radius: 12px; padding: 14px 16px; }

/* rezultat */
.km-res { position: sticky; top: 14px; padding: 18px; min-width: 0; }
.km-stopa { font-size: 13px; color: var(--c-text-secondary); }
.km-stopa b { color: var(--c-text-strong); font-weight: 600; }
.km-stopa2 { font-size: 12px; color: var(--c-text-subtle); margin-top: 2px; }
.km-big { margin: 14px 0 10px; }
.km-big__lab { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-subtle); font-weight: 600; }
.km-big__val { font-size: 34px; letter-spacing: -.02em; color: var(--c-text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; font-weight: 600; }
.km-big__val small { font-size: 15px; color: var(--c-text-subtle); letter-spacing: 0; margin-left: 4px; font-weight: 400; }
.km-cmp { font-size: 12.5px; color: var(--c-text-secondary); border-top: 1px solid var(--c-border-hairline); padding-top: 8px; margin: 8px 0; line-height: 1.5; }
.km-cmp b { color: var(--c-danger-strong, #b91c1c); }
.km-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 8px 0; padding: 0; }
.km-kv div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--c-border-hairline); padding: 6px 0; white-space: nowrap; }
.km-kv dt { font-size: 12px; color: var(--c-text-subtle); margin: 0; }
.km-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.km-daily { font-size: 12.5px; color: var(--c-text-secondary); margin: 8px 0 4px; }
.km-daily b { color: var(--c-text-strong); }
.km-err { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--c-danger-soft); border: 1px solid var(--c-danger-line); color: var(--c-danger-deep); font-size: 12.5px; }
.km-warn { margin: 8px 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--c-state-warn-soft, #fcd34d); color: var(--c-warn-deep, #b45309); font-size: 12.5px; line-height: 1.5; }
.km-segs { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 14px; }
.km-segs th { text-align: right; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-subtle); padding: 6px 6px; border-bottom: 1px solid var(--c-border-hairline); font-weight: 600; white-space: nowrap; }
.km-segs th:first-child, .km-segs td:first-child { text-align: left; }
.km-segs td { padding: 7px 6px; border-bottom: 1px solid var(--c-border-hairline); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.km-segs tr.km-exp td, .km-segs td.km-pay { background: var(--c-surface-page-soft); color: var(--c-text-secondary); font-size: 12px; text-align: left; padding: 7px 10px; white-space: normal; }
.km-segs tr.km-fx td:first-child { font-weight: 600; color: var(--c-text-strong); }
.km-segs tr.km-sub td { color: var(--c-text-secondary); }
.km-tog { color: var(--c-brand); cursor: pointer; }
.km-sums { font-size: 12.5px; text-align: right; margin-top: 10px; color: var(--c-text-secondary); }
.km-sums div { padding: 2px 0; white-space: nowrap; }
.km-sums b { color: var(--c-text-strong); font-variant-numeric: tabular-nums; margin-left: 10px; }
.km-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.km-foot { margin-top: 12px; font-size: 11.5px; color: var(--c-text-subtle); line-height: 1.7; }
.km-foot a { color: var(--c-brand); text-decoration: none; }

/* modali */
.km-radio { display: block; border: 1px solid var(--c-border-divider); border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-size: 13px; cursor: pointer; }
.km-radio:has(input:checked) { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); background: var(--c-brand-surface, #eff4ff); }
.km-radio--off { opacity: .55; cursor: default; }
.km-radio input[type="radio"] { margin: 0 6px 0 0; vertical-align: -1px; }
.km-radio b { font-weight: 600; }
.km-radio small { display: block; color: var(--c-text-subtle); font-size: 12px; margin: 2px 0 0 21px; line-height: 1.4; }
.km-radio__extra { display: none; align-items: center; gap: 8px; margin: 8px 0 0 21px; font-size: 12.5px; color: var(--c-text-secondary); }
.km-radio:has(input:checked) .km-radio__extra { display: flex; }
.km-radio__extra .pb-input { width: auto; min-width: 96px; }
.km-radio__extra .km-num { width: 96px; }
.km-tipovi { display: block; }
.km-spacer { flex: 1; }
.km-danger { color: var(--c-danger-strong, #b91c1c); }
.pb-modal--narrow { max-width: 420px; }

/* sačuvani */
.km-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.km-filters .pb-input { width: auto; min-width: 150px; }
.km-filters .km-search { flex: 1 1 320px; min-width: 280px; }
.km-list td { white-space: nowrap; vertical-align: top; }
.km-list .km-sub { font-size: 11.5px; color: var(--c-text-subtle); }
.km-list td.km-n, .km-list th.km-n { text-align: right; }

@media (max-width: 980px) {
    .km-two { grid-template-columns: 1fr; }
    .km-res { position: static; }
    .km-sit { grid-template-columns: 1fr; }
    .km-row { grid-template-columns: 1fr; }
    .km-kv { grid-template-columns: 1fr; }
}

/* članovi propisa kao reference (popup _RefModal) */
.km-ref { color: var(--c-brand); text-decoration: none; border-bottom: 1px dotted var(--c-brand-soft, #93c5fd); white-space: nowrap; }
.km-ref:hover { border-bottom-style: solid; }
.km-chips .km-ref { border: 1px solid var(--c-border-divider); border-radius: 999px; padding: 2px 8px; font-size: 11px; }

/* modal „Vaša firma na dokumentu" */
.km-firma { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--c-border-hairline); border-radius: 12px; background: var(--c-surface-page-soft); font-size: 13px; margin-bottom: 4px; }
.km-firma b { grid-column: 1 / -1; font-size: 14px; color: var(--c-text-strong); }
.km-firma span { color: var(--c-text-subtle); }
.km-firma span + span { color: var(--c-text-secondary); }
.km-sec { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-subtle); font-weight: 600; margin: 16px 0 8px; }
.km-row .km-in-group .km-num, .km-row .km-in-group .km-int { max-width: 120px; }

/* rezultat: uska kolona za ▸ i disanje oko tabele */
.km-segs th:last-child, .km-segs td:last-child { width: 28px; padding-left: 0; }
.km-foot .km-muted { color: var(--c-text-subtle); }

/* strane: razdelnik između poverioca i dužnika; nepopunjena strana je sama link za izbor */
.km-sep { grid-column: 1 / -1; border-top: 1px solid var(--c-border-hairline); margin: 2px 0; }
.km-pick { display: block; color: var(--c-brand); text-decoration: none; font-weight: 600; font-size: 13.5px; }

/* checkbox labela nije naslov polja: običan tekst, bez verzala */
.km-check, .km-row .km-check { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--c-text-secondary); }
.pb-modal__body .km-row:last-child { margin-bottom: 4px; }

/* PDF/Excel pre čuvanja: vidljivo, onemogućeno, sa tooltipom na hover i klik */
.km-actions .pb-cta-pill.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.km-tipw { position: relative; display: inline-block; }
.km-tipw[data-tip]::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
    background: var(--c-text-strong); color: var(--c-text-on-brand, #fff); font-size: 12px; line-height: 1.3; padding: 7px 10px; border-radius: 8px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 20;
    box-shadow: 0 8px 24px rgba(7,31,77,.18);
}
.km-tipw[data-tip]::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); border: 5px solid transparent;
    border-top-color: var(--c-text-strong); opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.km-tipw[data-tip]:hover::after, .km-tipw[data-tip].is-on::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.km-tipw[data-tip]:hover::before, .km-tipw[data-tip].is-on::before { opacity: 1; }

/* Dinarska protivvrednost ispod glavnog iznosa (samo strana valuta) */
.km-rsd { font-size: var(--fs-sm); color: var(--c-text-secondary); margin: -6px 0 12px; }
.km-rsd b { color: var(--c-text-strong); }

/* „Obračun do": datum ne sme da se seče zbog „do isplate" pored njega */
.km-in-group .km-date { flex: 0 0 auto; width: 116px; }

.km-actions [hidden] { display: none !important; }

/* Telefon: strane u dve kolone (akcije ispod naziva), labele checkboxa smeju da se prelome */
@media (max-width: 640px) {
    .km-strane { grid-template-columns: 72px minmax(0, 1fr); }
    .km-act { grid-column: 2; }
    .km-act a { white-space: normal; }
    .km-check, .km-check--mt { white-space: normal; height: auto; align-items: flex-start; }
    .km-segs { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* rezultat: drugi red radnji — dokumenti iz obračuna (troše kredit), odvojeni od izvoza */
.km-actions__lab { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-subtle); margin: 14px 0 6px; }
.km-actions--doc { margin-top: 0; }