:root{ --bg:#ffffff; --card:#fefefe; --muted:#e8eef7; --ink:#0f172a; --accent:#e9f3ff; --accent-br:#bcdcff; --ink-soft:#334155;
       --info-bg:#fff8e7; --info-b:#fde2a8; }
.jk{background:var(--card);border:1px solid var(--muted);border-radius:14px;padding:16px;max-width:980px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.jk-title{margin:8px 0 14px;font-size:22px;color:var(--ink)}
.jk-form{margin:0}
.jk-row{display:grid;grid-template-columns:420px 1fr;gap:14px;align-items:center;margin:10px 0}
.jk-label{font-weight:600;color:var(--ink)}
.jk-ctrl{position:relative}
.jk-input,.jk-select{width:100%;padding:10px 48px 10px 10px;border:1px solid #d0d7e2;border-radius:10px;background:#fff}
.jk-check{width:18px;height:18px}
.jk-line{position:absolute;right:10px;top:8px;font-size:12px;font-weight:700;opacity:.75}
.jk-help{color:#64748b;font-size:12px;margin-top:4px}
.jk-btn{padding:8px 12px;border-radius:10px;border:1px solid var(--accent-br);background:var(--accent);cursor:pointer}
.jk-btn--ghost{background:#fff;border-color:#d0d7e2;margin-right:8px}
.jk-sticky{position:sticky;top:0;z-index:10;background:#ffffffea;backdrop-filter:saturate(1.2) blur(2px);display:flex;gap:12px;align-items:center;justify-content:flex-end;padding:10px;border:1px solid #eef2f7;border-radius:12px;margin-bottom:10px}
.jk-sticky__label{font-weight:700;color:#0f172a}
.jk-sticky__value{font-weight:800}
.jka__item{border:1px solid #e8eef7;border-radius:12px;margin:10px 0;overflow:hidden;background:#fff}
.jka__item--info{background:var(--info-bg);border-color:var(--info-b)}
.jka__header{touch-action:manipulation; width:100%;display:flex;gap:16px;align-items:center;padding:12px 14px;background:#f8fbff;border:0;cursor:pointer;color:var(--ink-soft)}
.jka__item--info > .jka__header{touch-action:manipulation; background:#fff3d4}
.jka__header[aria-expanded="true"]{background:#eef6ff}
.jka__title{flex:1;font-weight:700}
.jka__sum{min-width:160px;text-align:right;font-feature-settings:'tnum' 1,'lnum' 1;font-variant-numeric:tabular-nums lining-nums;font-weight:700;opacity:.9}
.jka__chev{transition:transform .2s;color:#64748b;margin-left:6px}
.jka__header[aria-expanded="true"] .jka__chev{transform:rotate(180deg)}
.jka__panel{padding:12px 14px;background:#fff}
.jka__subtotal{display:flex;justify-content:space-between;font-weight:700;border-top:1px dashed #eef2f7;margin-top:8px;padding-top:8px}
@media (max-width:820px){.jk-row{grid-template-columns:1fr} .jka__sum{min-width:auto}}

.jk-input:not(:placeholder-shown) {
  color: red !important;
  font-weight: bold !important;
}


/* Highlight numbers in red */
.jk .jk-sticky__value,
.jk .jka__sum,
.jk .jk-line {
  color: #e11d48 !important; /* red-600 */
  font-weight: 800 !important;
}
/* Inputs with value already bold red is defined earlier; ensure in print they are black for legibility */
@media print{
  .jk .jk-sticky{ position: static; box-shadow: none; }
  .jk .jka__panel{ display: block !important; }
  .jk .jka__header i{ display:none; }
}


.jk .jk-title{ text-align:left; font-weight:800; color:#16a34a; margin: 8px 0 12px; }


/* Force left alignment and bigger total */
.jk .jk-sticky{ text-align: left !important; }
.jk .jk-sticky__value{ font-size: 22px !important; line-height: 1.1 !important; }


/* Place sticky at bottom and unify typography */
.jk .jk-sticky--bottom{ position: static !important; margin-top: 14px; }
.jk .jk-sticky__label{ font-size:18px !important; font-weight:800 !important; text-align:left !important; }
.jk .jk-sticky__value{ font-size:18px !important; font-weight:800 !important; text-align:left !important; }


/* Force left alignment and same medium font for sticky label/value */
.jk .jk-sticky{ display:flex !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; gap:10px; }
.jk .jk-sticky__label, .jk .jk-sticky__value{ font-size:18px !important; }
/* Title left alignment */
.jk .jk-title{ text-align:left !important; }


/* Left label/value, right-aligned buttons in sticky */
.jk .jk-sticky{ display:flex !important; align-items:center !important; gap:10px; }
.jk .jk-sticky__label{ margin-right:0; }
.jk .jk-sticky__value{ }
.jk .jk-sticky .jk-btn:first-of-type{ margin-left:auto !important; } /* push the first button (Reset) and following to the right */


/* Mobile optimizations for sticky bar */
@media (max-width: 640px){
  .jk .jk-sticky{ flex-wrap: wrap !important; gap:8px !important; }
  .jk .jk-sticky__label, .jk .jk-sticky__value{ flex: 1 0 100% !important; }
  .jk .jk-sticky .jk-btn{ flex:1 0 48%; }
  .jk .jk-sticky .jk-btn:first-of-type{ margin-left:0 !important; }
}


/* Mobile: two rows of buttons (Reset/Izračunaj first, PDF/WORD second) */
@media (max-width: 640px){
  .jk .jk-sticky{ flex-wrap: wrap !important; gap:8px !important; }
  .jk .jk-sticky__label, .jk .jk-sticky__value{ flex: 1 0 100% !important; }
  .jk .jk-sticky .jk-btn{ flex: 1 0 48%; margin-left: 0 !important; }
  .jk .jk-sticky .jk-btn[data-action="reset"]{ order: 1; }
  .jk .jk-sticky .jk-btn[data-action="calculate"]{ order: 2; }
  .jk .jk-sticky .jk-btn[data-action="download-pdf"]{ order: 3; }
  .jk .jk-sticky .jk-btn[data-action="download-word"]{ order: 4; }
}


/* Mobile layout: label left, value right; two rows of buttons */
@media (max-width: 640px){
  .jk .jk-sticky{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important; }
  .jk .jk-sticky__label{ order:1; flex:1 0 48%; text-align:left !important; }
  .jk .jk-sticky__value{ order:2; flex:1 0 48%; text-align:right !important; }
  .jk .jk-sticky .jk-btn{ flex:1 0 48%; margin-left:0 !important; }
  .jk .jk-sticky .jk-btn[data-action="reset"]{ order:3; }
  .jk .jk-sticky .jk-btn[data-action="calculate"]{ order:4; }
  .jk .jk-sticky .jk-btn[data-action="download-pdf"]{ order:5; }
  .jk .jk-sticky .jk-btn[data-action="download-word"]{ order:6; }
}


/* Mobile grid layout for sticky block */
@media (max-width: 640px){
  .jk .jk-sticky{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: minmax(44px, auto);
    gap: 10px !important;
    align-items: center !important;
  }
  .jk .jk-sticky__label{ grid-column: 1; justify-self: start; text-align: left !important; }
  .jk .jk-sticky__value{ grid-column: 2; justify-self: end; text-align: right !important; }
  .jk .jk-sticky .jk-btn{ width: 100%; }
  .jk .jk-sticky .jk-btn[data-action="reset"]{ grid-column: 1; }
  .jk .jk-sticky .jk-btn[data-action="calculate"]{ grid-column: 2; }
  .jk .jk-sticky .jk-btn[data-action="download-pdf"]{ grid-column: 1; }
  .jk .jk-sticky .jk-btn[data-action="download-word"]{ grid-column: 2; }
}


/* Light green style for Izračunaj button */
.jk .jk-sticky .jk-btn[data-action="calculate"] {
  background-color: #d9fdd3 !important; /* very light green */
  border-color: #b2e8a6 !important;
  color: #166534 !important; /* darker green for text */
}
.jk .jk-sticky .jk-btn[data-action="calculate"]:hover {
  background-color: #c8f7c0 !important;
}

/* Ensure hidden panels are really hidden across themes */
.jk .jka__panel[hidden]{display:none !important;}