/* Podjela auta za izračun — tabovi Filtera Podjela · Moji auti · Tim + kartica "Za izračun" na Početnoj
   (kartica #2, src/frontend/podjela/podjela-view.mjs, docs/modules/PODJELA.md → "Frontend").
   Boje su SAMO tokeni. Boje osoba (kategorijski identitet, stalni redoslijed po id-u korisnika) su globalni tokeni
   --viz-person-1..4 (styles.css :root + html.icare + ICARE_DARK/ICARE_BLACK; provjereni dataviz validate_palette.js
   --pairs all na #ffffff i #1e2228); --pj-c0 = "Ostali". Boja osobe je samo prsten avatara, crta, točka, mjerilo
   i stupac — tekst je uvijek --ink*. */

.pj {
  --pj-c0: var(--viz-other);
  --pj-c1: var(--viz-person-1);
  --pj-c2: var(--viz-person-2);
  --pj-c3: var(--viz-person-3);
  --pj-c4: var(--viz-person-4);
  container: pj / inline-size;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.pj-muted { color: var(--ink-3); }
.pj-note { margin: 0; color: var(--ink-3); font-size: var(--fs-meta); }
.pj-pad { margin: 0; padding: 4px 0; }
.pj-link { color: var(--brand-strong); font-size: var(--fs-meta); font-weight: 560; text-decoration: none; }
.pj-link:hover { text-decoration: underline; }

/* --- avatar: inicijali u prstenu boje osobe --- */
.pj-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--pc, var(--ink-4));
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.pj-av--lg { width: 34px; height: 34px; font-size: 12px; }
.pj-av.is-none { border-style: dashed; color: var(--ink-3); }
.pj-av.is-sum { border-color: var(--ink-3); color: var(--ink-2); font-size: 15px; }

/* --- uvod + radnje --- */
.pj-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.pj-intro-text { min-width: 240px; flex: 1 1 320px; }
.pj-intro-text h2 { margin: 0; font-size: 18px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.pj-of { color: var(--ink-3); font-size: var(--fs-body); font-weight: 500; }
.pj-intro-text p { margin: 3px 0 0; color: var(--ink-3); font-size: var(--fs-meta); }
.pj-intro-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- kistovi (osobe) --- */
.pj-brushes { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.pj-brush {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.pj-brush.is-none { border-style: dashed; box-shadow: none; }
.pj-brush.is-on { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), var(--shadow-xs); }
.pj-brush.is-on .pj-brush-main { background: color-mix(in srgb, var(--pc) 6%, var(--surface)); }
.pj-brush-main {
  display: grid;
  justify-items: stretch;
  gap: 8px;
  width: 100%;
  min-height: 0;
  padding: 11px 12px 9px;
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.pj-brush.is-none .pj-brush-main { border-radius: var(--radius-lg); }
.pj-brush-main:hover:not(:disabled) { background: var(--surface-soft); border-color: transparent; }
.pj-brush-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pj-brush-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 620; }
.pj-brush-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.pj-brush-hint { color: var(--ink-3); font-size: var(--fs-small); font-weight: 500; }
.pj-brush.is-on .pj-brush-hint { color: var(--ink-2); font-weight: 600; }
.pj-meter { position: relative; display: flex; gap: 2px; height: 5px; overflow: hidden; border-radius: 99px; background: var(--line); }
.pj-meter i { display: block; height: 100%; border-radius: 99px; background: var(--pc); }
.pj-meter.is-ok i { background: var(--ok); }
.pj-meter.is-ok i.is-bez { background: var(--ink-4); }
.pj-ratio {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 10px 8px;
  color: var(--ink-3);
  font-size: var(--fs-small);
}
.pj-ratio input { width: 52px; min-height: 28px; height: 28px; padding: 2px 6px; font-size: 13px; text-align: center; }

/* --- filteri popisa --- */
.pj-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 380px;
}
.pj-search .ui-i { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.pj-search input { width: 100%; padding-left: 32px; }
.pj-select { max-width: 230px; min-width: 0; }

/* --- lista (aukcija) --- */
.pj-group { display: grid; gap: 10px; min-width: 0; }
.pj-ghead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pf);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.pj-ghead-logo { display: inline-flex; align-items: center; flex: none; }
.pj-ghead-main { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.pj-ghead-main h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.pj-sub { color: var(--ink-3); font-size: var(--fs-meta); }
.pj-ghead-end { font-size: var(--fs-meta); white-space: nowrap; }
.pj-ghead-rule .status-pill { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- pločice auta u Podjeli --- */
.pj-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.pj-tile { position: relative; min-width: 0; }
.pj-tile-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.pj-tile.has-who .pj-tile-main { border-color: color-mix(in srgb, var(--pc) 55%, var(--line)); background: color-mix(in srgb, var(--pc) 7%, var(--surface)); }
.pj-tile-main:hover:not(:disabled) { border-color: var(--line-hover); background: var(--surface-soft); }
.pj-tile.has-who .pj-tile-main:hover:not(:disabled) { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 11%, var(--surface)); }
.pj-tile.is-busy { opacity: 0.7; }
.pj-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 46px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-4);
}
.pj-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pj-tile-text { display: grid; gap: 1px; min-width: 0; }
.pj-tile-text b { overflow: hidden; font-size: 13px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.pj-tile-text span { overflow: hidden; color: var(--ink-3); font-size: var(--fs-small); text-overflow: ellipsis; white-space: nowrap; }
.pj-tile-text em { color: var(--ink); font-size: 12.5px; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }
.pj-slot { width: 26px; height: 26px; border: 2px dashed var(--line-strong); border-radius: 50%; }
.pj-tile-st {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.pj-tile-st.is-ok { background: var(--ok-soft); color: var(--ok); }
.pj-tile-st.is-bez { background: var(--surface-soft); color: var(--ink-3); }
.pj-tile-st.is-q { background: var(--warn-soft); color: var(--warn); }
.pj-tile-x {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  min-height: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--dur-fast, 0.12s) ease;
}
.pj-tile:hover .pj-tile-x,
.pj-tile:focus-within .pj-tile-x { opacity: 1; }
@media (hover: none) { .pj-tile-x { opacity: 1; } }

/* --- kartice (Moji auti, Tim) --- */
.pj-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.pj-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pj-card-head h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 640; }
.pj-card-head .pj-legend { margin-left: auto; }
.pj-card-head > .pj-muted { font-size: var(--fs-small); }

.pj-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  color: var(--ink-2);
  font-size: var(--fs-meta);
}
.pj-other > span:not(.pj-av) { flex: 1 1 260px; }

/* sažetak osobe */
.pj-sum { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 20px; }
.pj-sum-main { display: grid; gap: 8px; min-width: 0; }
.pj-sum-head { display: flex; align-items: center; gap: 10px; }
.pj-sum-head h2 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.pj-sum-last { display: grid; justify-items: end; gap: 2px; color: var(--ink-3); font-size: var(--fs-small); }
.pj-sum-last b { color: var(--ink); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pj-prog { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 99px; background: var(--line); }
.pj-prog i { display: block; height: 100%; }
.pj-prog i:first-child { border-radius: 99px 0 0 99px; }
.pj-prog .is-ok, .pj-legend .is-ok { background: var(--ok); }
.pj-prog .is-q, .pj-legend .is-q { background: var(--warn-fill); }
.pj-prog .is-bez, .pj-legend .is-bez { background: var(--ink-4); }
.pj-prog .is-isteklo, .pj-legend .is-isteklo { background: var(--danger); }
.pj-legend .is-ceka { background: var(--line-strong); }
.pj-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); font-size: var(--fs-meta); }
.pj-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pj-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.pj-legend i.is-line { width: 16px; height: 3px; border-radius: 2px; background: var(--pc); }

/* kad završavaju aukcije */
.pj-when { display: grid; gap: 8px; }
.pj-when .ui-overline { margin: 0; }
.pj-when-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pj-when-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* stupac = širina pločice (inače se sadržaj centrira i reže lijevo: "11 auta" → "1 auta") */
  justify-items: start;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--pf);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.pj-when-tile.is-soon { border-color: var(--danger-line); border-top-color: var(--danger); background: var(--danger-soft); }
.pj-when-tile.is-done { background: var(--surface-soft); }
.pj-when-top { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.pj-when-name { overflow: hidden; color: var(--ink-2); font-size: var(--fs-meta); font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.pj-when-n { font-size: 15px; font-weight: 650; }
.pj-when-n .is-wait { color: var(--brand-strong); }
.pj-when-n .is-ok { color: var(--ok); }
.pj-when-end { max-width: 100%; font-size: var(--fs-meta); }
.pj-when-end .auction-end { flex-wrap: wrap; row-gap: 2px; white-space: normal; }

/* pravilo ponude liste */
.pj-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.pj-rule b { color: var(--ink); }
.pj-rule.is-warn { border-color: var(--warn-line); background: var(--warn-soft); }
.pj-rule.is-info { border-color: var(--brand-line); background: var(--brand-soft); }
.pj-rule-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-3);
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
}
.pj-rule.is-warn .pj-rule-ic { background: var(--warn-fill); color: var(--on-warn-fill); }
.pj-rule.is-info .pj-rule-ic { background: var(--brand-strong); color: var(--surface); }

/* auto = postojeći redak s kalkulatorom + traka podjele ispod */
.pj-cars { container: acrows / inline-size; display: grid; gap: 12px; min-width: 0; }
.pj-car { display: grid; min-width: 0; scroll-margin-top: calc(var(--app-sticky-top, 0px) + 90px); }
.pj-car > .ac-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pj-car .ac-open { display: none; }                     /* "Na aukciji ↗" je u traci podjele (ista poveznica lot_url) */
.pj-car.is-next > .ac-card { box-shadow: 0 0 0 2px var(--brand-ring), var(--shadow-xs); }
.pj-bar {
  display: grid;
  gap: 8px;
  padding: 8px 12px 10px;
  border: 1px solid var(--line);
  border-top: 1px dashed var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface-soft);
  margin-top: -1px;
}
.pj-car.st-ok .pj-bar { border-left: 3px solid var(--ok); }
.pj-car.st-pitanje .pj-bar { border-left: 3px solid var(--warn-fill); }
.pj-car.st-bez .pj-bar { border-left: 3px solid var(--ink-4); }
.pj-car.st-ceka .pj-bar { border-left: 3px solid var(--brand); }
.pj-car.st-isteklo .pj-bar { border-left: 3px solid var(--danger); }
.pj-car.st-pitanje > .ac-card { box-shadow: inset 3px 0 0 var(--warn-fill), var(--shadow-xs); }
.pj-car.st-bez > .ac-card { box-shadow: inset 3px 0 0 var(--ink-4), var(--shadow-xs); }
.pj-car.st-ceka > .ac-card { box-shadow: inset 3px 0 0 var(--brand), var(--shadow-xs); }
.pj-car.st-isteklo > .ac-card { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-xs); }
.ac-foot-meta .pj-bar-status { margin-right: 8px; }
.ac-actions .btn-sm.is-open, .pc-actions .btn-sm.is-open { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }
.pj-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pj-bar-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.pj-bar-text { color: var(--ink-2); font-size: var(--fs-meta); }
.pj-bar-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pj-bar-actions .btn-sm.is-open { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }
.pj-panel { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.pj-panel-label { color: var(--ink-2); font-size: var(--fs-meta); font-weight: 600; }
.pj-reason-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-napomena { max-width: 520px; }
.pj-ask textarea { width: 100%; min-height: 58px; resize: vertical; }
.pj-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-qa { display: grid; gap: 6px; }
.pj-q, .pj-a { margin: 0; padding: 7px 10px; border-radius: var(--radius-md); color: var(--ink); font-size: var(--fs-meta); line-height: 1.45; }
.pj-q { border: 1px solid var(--warn-line); background: var(--warn-soft); }
.pj-qa:not(.is-open) .pj-q { border-color: var(--line); background: var(--surface); }
.pj-a { border: 1px solid var(--ok-line); background: var(--ok-soft); }
.pj-answer { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-answer input { flex: 1 1 240px; min-width: 0; }

/* --- Tim --- */
.pj-ptabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.pj-ptab {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--ink);
  text-decoration: none;
}
a.pj-ptab:hover { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), var(--shadow-xs); }
.pj-ptab.is-all { border-color: var(--line-strong); background: var(--surface-soft); }
.pj-ptab-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pj-ptab-name { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.pj-ptab-n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pj-ptab-n small { color: var(--ink-3); font-size: 13px; font-weight: 560; }
.pj-ptab-sub { color: var(--ink-3); font-size: var(--fs-small); }
.pj-q-badge { color: var(--warn); font-weight: 650; }
.pj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pj-two { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 12px; align-items: start; }
@container pj (max-width: 900px) { .pj-two { grid-template-columns: minmax(0, 1fr); } }

.pj-chart-wrap { position: relative; min-width: 0; }
.pj-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.pj-grid line { stroke: var(--viz-grid); stroke-width: 1; }
.pj-axis { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pj-line { fill: none; stroke: var(--pc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pj-dot { fill: var(--pc); stroke: var(--surface); stroke-width: 2; }
.pj-endlabel { fill: var(--ink-2); font-size: 12px; font-weight: 600; }
.pj-endnum { fill: var(--ink); font-weight: 700; }
.pj-now { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.pj-cross { stroke: var(--ink-3); stroke-width: 1; pointer-events: none; }
.pj-hit { cursor: crosshair; }
.pj-tip {
  position: absolute;
  top: 8px;
  z-index: 2;
  display: grid;
  gap: 3px;
  min-width: 128px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  pointer-events: none;
}
.pj-tip[hidden] { display: none; }
.pj-tip-time { color: var(--ink); font-size: 12px; }
.pj-tip-row { display: flex; align-items: center; gap: 6px; }
.pj-tip-row i { width: 12px; height: 3px; border-radius: 2px; background: var(--pc); }
.pj-tip-row b { min-width: 18px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pj-table-toggle summary { color: var(--ink-3); font-size: var(--fs-meta); cursor: pointer; }
.pj-table-toggle[open] summary { margin-bottom: 6px; }

.pj-qlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pj-qitem { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: var(--radius-md); background: var(--warn-soft); }
.pj-qitem.is-answered { border-color: var(--line); background: var(--surface-soft); }
.pj-qitem p { margin: 0; color: var(--ink); font-size: var(--fs-meta); line-height: 1.45; }
.pj-qitem-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-meta); }
.pj-qitem-head b { color: var(--ink); }

.pj-tscroll { overflow-x: auto; min-width: 0; }
.pj-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.pj-table th, .pj-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; white-space: nowrap; }
.pj-table thead th { color: var(--ink-3); font-size: var(--fs-small); font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; }
.pj-table tbody th { font-weight: 560; }
.pj-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.pj-table tbody tr:last-child > * { border-bottom: 0; }
.pj-who { display: inline-flex; align-items: center; gap: 8px; }
.pj-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; }
.pj-spark i { display: block; width: 8px; border-radius: 3px 3px 0 0; background: var(--pc); }
.pj-spark i.is-today { opacity: 0.55; }

/* --- uži prostor i mobitel --- */
@container pj (max-width: 640px) {
  .pj-ghead-end { width: 100%; }
  .pj-select { flex: 1 1 calc(50% - 4px); max-width: none; }
  .pj-search { max-width: none; flex-basis: 100%; }
  .pj-sum { grid-template-columns: minmax(0, 1fr); }
  .pj-sum-last { justify-items: start; }
  .pj-tiles { grid-template-columns: minmax(0, 1fr); }
}
.mobile-shell .pj-brushes,
.mobile-shell .pj-ptabs {
  display: flex;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.mobile-shell .pj-brush,
.mobile-shell .pj-ptab { flex: 0 0 min(76vw, 240px); scroll-snap-align: start; }
.mobile-shell .pj-intro-actions > button { flex: 1 1 auto; }

/* --- Početna: kartica "Za izračun" (pocetna.mjs renderZaIzracunCard) --- */
.pc-todo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  color: var(--ink);
  text-decoration: none;
}
.pc-todo:hover { border-color: var(--brand); }
.pc-todo.is-soon { border-color: var(--danger-line); border-left-color: var(--danger); background: var(--danger-soft); }
.pc-todo-main { display: grid; gap: 2px; min-width: 0; }
.pc-todo-over { color: var(--ink-2); font-size: var(--fs-small); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.pc-todo-title { font-size: 18px; font-weight: 680; }
.pc-todo-of { color: var(--ink-2); font-size: var(--fs-body); font-weight: 500; }
.pc-todo-sub { color: var(--ink-2); font-size: var(--fs-meta); }
.pc-todo.is-soon .pc-todo-left { color: var(--danger); font-weight: 650; }
.pc-todo-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-strong); font-size: 13px; font-weight: 620; }

/* Tab Ponude (kartica #25) */
.pj-ponude-stanja { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-ponude-stanja b { font-weight: 600; font-variant-numeric: tabular-nums; }