/* =============================================================
   Parra Cjenici — design classes
   Taken verbatim from the design file "Parra Cjenici.dc.html".
   Only tokens from design-tokens.css are used; no hex values are
   introduced here that the design does not already contain.
   ============================================================= */

html,body{margin:0;height:100%;background:var(--bg-primary)}
a{color:var(--bs-cta);text-decoration:none}
a:hover{color:#5A2280}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.st{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font:600 12px/16px var(--font-sans);white-space:nowrap}
.st .d{width:6px;height:6px;border-radius:999px;flex:none}
.st-green{background:#EAF3DE;color:#3B6D11}.st-green .d{background:#3B6D11}
.st-orange{background:#FAEEDA;color:#854F0B}.st-orange .d{background:#854F0B}
.st-red{background:#FCEBEB;color:#A32D2D}.st-red .d{background:#A32D2D}
.st-grey{background:#F1EFE8;color:#5F5E5A}.st-grey .d{background:#5F5E5A}
.st-blue{background:#E6F1FB;color:#185FA5}.st-blue .d{background:#185FA5}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;pointer-events:none}
.st-brand{background:var(--bg-light-brand);color:var(--bs-cta)}.st-brand .d{background:var(--bs-cta)}
.lnk{color:var(--bs-cta);cursor:pointer;font-weight:600}
.lnk:hover{text-decoration:underline}
.sel{background:#fff;border:1px solid var(--ds-secondary);border-radius:var(--r-lg);height:36px;padding:0 30px 0 12px;font:600 13px/20px var(--font-sans);color:var(--text-primary);appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer;outline:none}
.sel:focus{border-color:var(--ds-active-input)}
.txt{height:36px;border:1px solid var(--ds-secondary);border-radius:var(--r-lg);padding:0 12px;font:500 13px/20px var(--font-sans);color:var(--text-primary);background:#fff;outline:none}
.txt:focus{border-color:var(--ds-active-input);background:var(--bg-light-brand);box-shadow:0 0 0 3px rgba(71,10,118,.08)}
.cell-in{height:32px;width:76px;border:1px solid var(--ds-secondary);border-radius:6px;padding:0 8px;font:500 13px/20px var(--font-sans);text-align:right;outline:none;background:#fff}
.cell-in:focus{border-color:var(--ds-active-input);background:var(--bg-light-brand)}
.cell-sel{height:32px;border:1px solid var(--ds-secondary);border-radius:6px;padding:0 24px 0 8px;font:500 12px/20px var(--font-sans);outline:none;background:#fff;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 6px center}
.tblx thead th.sortable{cursor:pointer}
.row-compact tbody td{padding:9px 16px;font-size:13px;line-height:18px}
.row-compact thead th{padding:9px 16px}
.authbg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);padding:40px}
.healthdot{width:9px;height:9px;border-radius:999px;flex:none}
.page__head{align-items:flex-start;gap:16px}
.page__actions{flex:none;flex-wrap:nowrap}
.page__actions .btn,.btn{white-space:nowrap}
.sb__nav .sb__item{width:100%;transition:background .12s ease-out,box-shadow .12s ease-out}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ds-secondary);background:#fff;font:600 13px/18px var(--font-sans);color:var(--text-tertiary);cursor:pointer}
.pill.is-on{background:var(--bs-cta);border-color:var(--bs-cta);color:#fff}
.pill .n{font-weight:500;opacity:.75}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:20px;background:var(--neutral-03);border:1px solid var(--ds-table);border-radius:6px;padding:12px 14px;white-space:pre-wrap;word-break:break-all;color:var(--text-primary)}
.card-h{padding:14px 18px;border-bottom:1px solid var(--ds-secondary);font:700 14px/20px var(--font-sans)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--ds-table)}
.srow:last-child{border-bottom:0}
.srow .t{font:600 13px/18px var(--font-sans)}
.srow .d2{font:400 12px/16px var(--font-sans);color:var(--text-secondary);margin-top:2px}
.accent-l{border-left:3px solid var(--bs-cta)}
.kbtn{width:28px;height:28px;border:1px solid var(--ds-secondary);background:#fff;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-tertiary)}
.kbtn:hover{background:var(--bg-light-brand);color:var(--bs-cta)}
.radio{width:18px;height:18px;border-radius:999px;border:1.5px solid var(--ds-table-2);display:inline-flex;align-items:center;justify-content:center;flex:none;background:#fff}
.radio.is-on{border-color:var(--bs-cta)}
/* Točka je parna namjerno: uz 18px krug (18 - 10) / 2 daje cijeli piksel, dok je s 9px
   razmak 4,5px — pola piksela se ne može iscrtati, pa je preglednik pomakne na cijeli i
   točka ispadne izvan sredine. Dizajn ima 9px i ondje se vidi isto. */
.radio.is-on::after{content:"";width:10px;height:10px;border-radius:999px;background:var(--bs-cta)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#D8D8D8;border-radius:6px;border:2px solid var(--bg-primary)}
  .tbl-card{overflow-x:auto}