/* ==========================================================================
   PRAĆENI MODELI (v1.70.0) — src/frontend/trziste/praceni-modeli.css
   Praćenje cijena → tab „Praćeni modeli”: pregled #/trziste/modeli i detalj #/trziste/modeli/<id>
   (praceni-modeli.mjs + praceni-grafovi.mjs). Komponente (zaglavlje, tabovi, KPI, čipovi, seg, pilule, obavijesti,
   prazno, skeleti, .data-table.is-stack) dolaze iz dizajn sustava; ovdje samo raspored (.pm-*) i boje grafova.
   Boje SAMO tokeni (nijedan hex/rgb, nijedan vlastiti token na :root / html.icare) — iCare (tamni prikaz) radi sam.
   Serije: prodano = puna točka --viz-1, na oglasu = prazan neutralan prsten (--ink-3), prodano ranije = mali sivi
   kvadrat (--ink-4), naš salon = romb --viz-2; krivulje: svi --ink-2, po cijeni prodaje --viz-1, skuplji --viz-2
   (crtkano). Tjedni s manje praćenih salona: siva šrafura iza stupaca (--ink u color-mix), stupci prigušeni.
   Raspored po širini SADRŽAJA (container "pm"), ne prozora: izbornik gura sadržaj.
   ========================================================================== */

.pm { container: pm / inline-size; grid-template-columns: minmax(0, 1fr); }
.pm .pm-weak { color: var(--ink-4); }
.pm .pm-none { color: var(--ink-4); }
/* ≤ 860 px styles.css slaže zaglavlje u stupac (flex-direction: column); uz flex-wrap tabovi (osnovica 100 %) tada
   odu u drugi STUPAC, desno izvan ekrana. Praćenje cijena (oba taba): tabovi u svom retku ispod, preko cijele širine. */
@media (max-width: 860px) {
  .pm > .page-header.has-tabs, .market-page > .page-header.has-tabs { flex-wrap: nowrap; }
  .pm > .page-header.has-tabs > .ui-tabs, .market-page > .page-header.has-tabs > .ui-tabs { flex: 0 0 auto; align-self: stretch; }
}
.pm-n { margin-left: 4px; color: var(--ink-4); font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pm-cell-sub { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.pm-cell-sub.pm-weak { color: var(--ink-4); }
.pm-trend { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-trend > span[aria-hidden] { font-size: 9px; }
.pm-linkbtn {
  display: inline; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; white-space: normal; text-align: left;
  color: var(--brand-strong); font: inherit; font-weight: 560; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.pm-linkbtn:hover:not(:disabled) { background: none; color: var(--brand); }
.pm-linkbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
.pm-reading-label { color: var(--ink-3); font-weight: 600; }

/* --- kartice ------------------------------------------------------------------------------------------- */
.pm-card {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs);
}
.pm-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; min-width: 0; }
.pm-card-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: var(--fs-h3); font-weight: 640; line-height: 1.3; }
.pm-card-sub { margin: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }

/* --- pregled ----------------------------------------------------------------------------------------- */
.pm-statusbar { display: grid; gap: 6px; }
.pm-reading { margin: 0; color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.45; }
.pm-ov-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.pm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; box-shadow: inset 0 -1px 0 var(--line); }
.pm-period-note { color: var(--ink-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.pm-ov-body { min-width: 0; }
.pm-ov-body > .empty-state { margin: 16px; }
.pm-ov-card .pm-ov-wrap { border: 0; border-radius: 0; }
.pm-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.pm-ov-table td { vertical-align: top; }
.pm-ov-row { cursor: pointer; }
.pm-ov-row:focus-within { background: var(--surface-soft); }
.pm-ov-model { min-width: 180px; }
.pm-ov-link { color: var(--ink); font-size: 14px; font-weight: 620; text-decoration: none; }
.pm-ov-link:hover { color: var(--brand-strong); text-decoration: underline; }
.pm-ov-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
.pm-years { color: var(--ink-3); font-size: 12.5px; font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-note { display: block; max-width: 260px; overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pm-ov-speed .status-pill { margin-top: 3px; }
.pm-ov-signals { white-space: nowrap; }
.pm-signal { display: block; color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pm-signal > span[aria-hidden] { margin: 0 2px; font-size: 9px; }
.pm-ov-cov { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
.pm-ov-table tr.pm-brand-row td { padding-top: 12px; padding-bottom: 6px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pm-brand-row strong { color: var(--ink); }
.pm-brand-count { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }

/* uski sadržaj: svaki model je kartica (naslov + brojke u 2 stupca s oznakom) */
@container pm (max-width: 760px) {
  .pm-ov-table, .pm-ov-table tbody { display: block; width: 100%; }
  .pm-ov-table thead { display: none; }
  .pm-ov-table tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .pm-ov-table td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  .pm-ov-table td.num { text-align: left; }
  .pm-ov-table td[data-cell="title"] { grid-column: 1 / -1; }
  /* mobilni prikaz: bez ljepljivog 1. stupca obične tablice (ui.css) — ovdje je redak kartica */
  .pm .pm-ov-table.data-table tr td:first-child { position: static; max-width: none; box-shadow: none; background: transparent; }
  .pm .pm-ov-table.data-table tr.pm-brand-row td { background: transparent; }
  .pm-ov-table td[data-label]::before {
    content: attr(data-label); display: block; color: var(--ink-3); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  .pm-ov-table td.pm-empty-cell { display: none; }
  .pm-ov-table td.pm-ov-cov { grid-column: 1 / -1; }
  .pm-ov-table tr.pm-brand-row { padding: 10px 14px 8px; background: var(--surface-soft); }
  .pm-ov-table tr.pm-brand-row td { padding: 0; }
  .pm-ov-model { min-width: 0; }
  .pm-cell-sub { white-space: normal; }
}

/* --- obrazac: dodaj / uredi ---------------------------------------------------------------------------- */
.pm-form-card { max-width: 920px; }
.pm-form { display: grid; gap: 12px; }
.pm-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.pm-field { display: grid; gap: 4px; min-width: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.pm-field > span em { color: var(--danger); font-style: normal; }
.pm-field select { min-width: 200px; }
.pm-field--year input { width: 110px; font-variant-numeric: tabular-nums; }
.pm-field--km input { width: 130px; font-variant-numeric: tabular-nums; }
.pm-field--note { flex: 1 1 240px; }
.pm-field--note input { width: 100%; }
.pm-form-models { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pm-form-models legend { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 4px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.pm-checks { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pm-check {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer;
}
.pm-check:hover { border-color: var(--line-hover); }
.pm-check:focus-within { outline: 2px solid var(--brand-ring); outline-offset: 1px; }
.pm-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.pm-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-form-note { margin: 0; color: var(--ink-3); font-size: 12.5px; }
/* v1.72.0 link pretrage s Njuškala */
.pm-field--link input { width: 100%; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; }
.pm-field-hint { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.pm-form-manual { display: grid; gap: 12px; }
.pm-form-or { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.pm-form.is-link .pm-form-manual { display: none; }
.pm-note--link { color: var(--brand); }
.pm-note--nolink { color: var(--ink-3); font-style: italic; }
.pm-form .ui-field-error a { margin-left: 6px; color: inherit; font-weight: 600; }
.pm-form-card .empty-state { margin: 0; }

/* --- detalj: izvori, filtri ---------------------------------------------------------------------------- */
.pm-sourcebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; }
.pm-sources { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.45; }
.pm-filters {
  display: grid; gap: 10px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs);
}
.pm-filters-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pm-filters-head .pm-fgroup--period { flex: 1 1 auto; }
.pm-filters-toggle { display: none; }
.pm-filters-reset { margin-left: auto; }
.pm-filters-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.pm-fgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; max-width: 100%; }
.pm-flabel { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pm-fgroup .ui-chips { min-width: 0; max-width: 100%; }

/* uski sadržaj / mobitel: filtri u sklopivom panelu "Filtri (n)" */
@container pm (max-width: 600px) {
  .pm-filters { padding: 10px 12px; }
  .pm-filters-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
  .pm-filters-head .pm-fgroup--period { flex: 1 1 100%; }
  .pm-filters-head .pm-fgroup--period .pm-flabel { display: none; }
  .pm-filters-body { display: none; flex-direction: column; align-items: stretch; gap: 12px; }
  .pm-filters.is-open .pm-filters-body { display: flex; }
  .pm-fgroup { display: grid; gap: 4px; }
}

/* --- detalj: tipičan auto, KPI ---------------------------------------------------------------------------- */
.pm-body { display: grid; gap: 16px; min-width: 0; }
.pm-refline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.pm-ref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; color: var(--ink-2); font-size: 13px; }
.pm-ref b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }
.pm-excl { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.pm .pm-kpis.metric-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-kpi .ui-kpi-label { display: inline-flex; align-items: center; gap: 4px; }
.pm-kpi .ui-kpi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pm-kpi.is-weak .ui-kpi-value { color: var(--ink-4); }
.pm-kpi-warn { color: var(--warn); font-weight: 560; }
.pm-kpi-car { font-size: 12.5px; font-weight: 500; }
.pm-kpi-note { display: block; color: var(--ink-3); font-size: 12px; font-weight: 500; line-height: 1.35; }
.pm-kpi .ui-kpi-foot { margin-top: 4px; }
.pm-kpi-raw { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.pm-gap { color: var(--ink-2); font-size: 13px; font-weight: 640; font-variant-numeric: tabular-nums; }
@container pm (max-width: 760px) {
  .pm .pm-kpis.metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pm .pm-kpis .ui-kpi { padding: 10px 12px; }
  .pm .pm-kpis .ui-kpi-value { font-size: 22px; }
}

/* --- detalj: procjena ---------------------------------------------------------------------------------- */
.pm-est-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.pm-est-seg { align-content: start; }
.pm-est-seg .ui-seg { max-width: 100%; overflow-x: auto; }
.pm-est-out { min-width: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.pm-est-note { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }
.pm-est-msg { font-variant-numeric: tabular-nums; }
.pm-est-msg b { color: var(--ink); font-size: 16px; font-weight: 680; }
.pm-est-msg.is-error { color: var(--danger); }
.pm-est-msg.is-busy { opacity: 0.6; }
.pm-est-need { display: block; margin-top: 6px; }
.pm-sep { margin: 0 8px; color: var(--ink-4); }
.pm-est-comps { margin-top: 10px; border-top: 1px solid var(--line); }

/* --- oglasi (zadnje prodaje, svi oglasi, usporedivi) ----------------------------------------------------- */
.pm-rows { display: block; list-style: none; margin: 0; padding: 0; container: pmrows / inline-size; }
.pm-rows > .pm-row + .pm-row { border-top: 1px solid var(--line); }
.pm-row {
  display: grid; align-items: center; gap: 2px 14px; padding: 9px 0;
  grid-template-columns: 64px minmax(0, 1fr) 120px minmax(150px, 220px);
  grid-template-areas: "img main price side";
}
.pm-row.is-compact { grid-template-columns: 48px minmax(0, 1fr) 110px minmax(140px, 200px); padding: 7px 0; }
.pm-row.is-excluded .pm-row-title { color: var(--ink-3); }
.pm-row-img {
  grid-area: img; display: grid; place-items: center; width: 64px; height: 48px; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-4);
}
.pm-row.is-compact .pm-row-img { width: 48px; height: 36px; }
.pm-row-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-row-main { grid-area: main; display: grid; gap: 1px; min-width: 0; }
.pm-row-title { overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.pm-row-title:hover { color: var(--brand-strong); text-decoration: underline; }
a.pm-row-title:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: var(--radius-xs); }
.pm-row-specs { overflow: hidden; color: var(--ink-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-row-seller { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; color: var(--ink-3); font-size: 12px; }
.pm-private { font-style: italic; }
.pm-tag {
  display: inline-flex; align-items: center; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink-3); font-size: 10.5px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.pm-tag.is-own { border-color: var(--brand-line); color: var(--brand-strong); }
.pm-tag.is-excl { border-color: var(--warn-line); color: var(--warn); }
.pm-row-price { grid-area: price; display: grid; justify-items: end; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.pm-row-price b { color: var(--ink); font-size: 14px; font-weight: 660; white-space: nowrap; }
.pm-drop { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.pm-row-side { grid-area: side; display: grid; justify-items: end; gap: 3px; min-width: 0; text-align: right; }
.pm-row-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.pm-row-when { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
@container pmrows (max-width: 600px) {
  .pm-row, .pm-row.is-compact {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "img main price" "img side side";
    align-items: start; gap: 4px 10px;
  }
  .pm-row-img, .pm-row.is-compact .pm-row-img { width: 48px; height: 36px; }
  .pm-row-side { justify-items: start; text-align: left; }
  .pm-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .pm-row-pills { justify-content: flex-start; }
  .pm-row-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
  .pm-row-specs { white-space: normal; }
}

.pm-lists { gap: 10px; }
.pm-lists-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; box-shadow: inset 0 -1px 0 var(--line); }
.pm-lists-bar > .ui-tabs { flex: 1 1 420px; min-width: 0; box-shadow: none; }
.pm-sort { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.pm-list-panel { display: grid; gap: 8px; min-width: 0; }
.pm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.pm-pager-count { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* --- grafovi: raspored ----------------------------------------------------------------------------------- */
.pm-charts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pm-tables { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container pm (min-width: 1100px) {
  .pm-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-charts > .pm-chart-wide { grid-column: 1 / -1; }
}
.pm-chart-card figure { margin: 0; }
.pm-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 12px; }
.pm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pm-lg { flex: 0 0 auto; overflow: visible; }
.pm-lg-line { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--ink-2); }
.pm-lg-line.is-fair { border-top-color: var(--viz-1); }
.pm-lg-line.is-high { border-top: 2px dashed var(--viz-2); }
.pm-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--viz-1); }
.pm-key.is-other { background: var(--viz-3); }
.pm-key.is-partial { background: repeating-linear-gradient(135deg, var(--viz-1) 0 3px, color-mix(in srgb, var(--viz-1) 35%, var(--surface)) 3px 6px); }
.pm-key.is-fewer { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--line); }
.pm-twin { margin-top: 6px; }
.pm-twin > summary { width: fit-content; color: var(--brand-strong); font-size: 12px; font-weight: 560; cursor: pointer; }
.pm-twin > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
.pm-twin-note { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; }
.pm-twin-table a { color: var(--brand-strong); }
.pm-twin-wrap { max-height: 260px; margin-top: 6px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.pm-twin-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pm-twin-table th, .pm-twin-table td { padding: 4px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); text-align: left; font-weight: 500; white-space: nowrap; }
.pm-twin-table thead th { position: sticky; top: 0; background: var(--surface-soft); color: var(--ink-3); font-weight: 600; }
.pm-twin-table .num { text-align: right; }
.pm-sub-title { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; font-weight: 600; }

/* --- grafovi: zajedničke oznake (SVG) --------------------------------------------------------------------- */
.pm-grid { stroke: var(--viz-grid); stroke-width: 1; }
.pm-axis { stroke: var(--viz-axis); stroke-width: 1; }
.pm-tick { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pm-lbl { fill: var(--ink-2); font-size: 11.5px; font-weight: 560; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.pm-lbl--strong { fill: var(--ink); font-weight: 650; }
.pm-lbl--gap { fill: var(--ink); font-size: 12px; font-weight: 680; }
.pm-median { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.pm-gapline { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pm-hit { fill: transparent; }
.pm-pt { cursor: default; outline: none; }
.pm-mark.is-prodano { fill: var(--viz-1); stroke: var(--surface); stroke-width: 1.5; }
.pm-mark.is-na_oglasu { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.6; }
.pm-mark.is-prodano_staro { fill: var(--ink-4); stroke: var(--surface); stroke-width: 0.75; }
.pm-mark.is-own { fill: var(--viz-2); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
.pm-mark.is-trend { fill: var(--viz-1); stroke: var(--surface); stroke-width: 1.5; }
.pm-pt:hover .pm-mark, .pm-pt:focus-visible .pm-mark, .pm-pt.is-tip-active .pm-mark { stroke: var(--ink); stroke-width: 2; }
.pm-pt:focus-visible .pm-hit { stroke: var(--brand); stroke-width: 2; }
.pm-pt.has-url { cursor: pointer; }
.pm-pt.is-picked .pm-mark { stroke: var(--ink); stroke-width: 2; }

/* kartica oglasa (klik / dodir na točku grafa) */
.pm-pick {
  position: absolute; z-index: 3; display: grid; gap: 2px; width: max-content; max-width: min(280px, 80%); padding: 10px 30px 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md);
  color: var(--ink-2); font-size: 12.5px; line-height: 1.4; transform: translate(-12px, 14px);
}
.pm-pick[hidden] { display: none; }
.pm-pick.is-left { transform: translate(calc(-100% + 12px), 14px); }
.pm-pick.is-up { transform: translate(-12px, calc(-100% - 14px)); }
.pm-pick.is-left.is-up { transform: translate(calc(-100% + 12px), calc(-100% - 14px)); }
.pm-pick-title { color: var(--ink); font-size: 13px; font-weight: 620; }
.pm-pick-link { margin-top: 4px; color: var(--brand-strong); font-weight: 600; }
.pm-pick-close {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; min-height: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--radius-xs); background: none; box-shadow: none; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer;
}
.pm-pick-close:hover { background: var(--surface-soft); color: var(--ink); }

/* traka cijena: oznake traka lijevo (HTML), SVG desno */
.pm-strip { margin: 0; }
.pm-strip-grid { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; }
.pm-strip-lanes { position: relative; }
.pm-strip-lane { position: absolute; left: 0; display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; line-height: 1.2; transform: translateY(-50%); }
.pm-strip-lane.is-prodano { top: 52px; }
.pm-strip-lane.is-na_oglasu { top: 120px; }
.pm-strip-lane b { display: block; color: var(--ink); font-weight: 620; }
.pm-strip-lane small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pm-strip-svg { display: block; overflow: visible; }
@container pm (max-width: 600px) {
  .pm-strip-grid { grid-template-columns: 70px minmax(0, 1fr); }
  .pm-strip-lane .pm-lg { display: none; }
  .pm-tick.is-minor, .pm-xaxis > span.is-minor { display: none; }
  .pm-cxaxis > span.is-minor { visibility: hidden; }   /* stupci ostaju, samo oznaka nestaje */
  .pm-endlbl.is-surv { display: none; }   /* uski graf: krivulje imenuje samo legenda */
}

/* xy grafovi: HTML vodoravna mreža s oznakama + SVG */
.pm-xy { display: grid; gap: 6px; margin: 0; }
.pm-xy-plot { position: relative; margin-left: 52px; }
.pm-xy-svg, .pm-line-svg { position: absolute; inset: 0; display: block; width: 100%; overflow: visible; }
.pm-hgrids { position: absolute; inset: 0; pointer-events: none; }
.pm-hgrid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--viz-grid); }
.pm-hgrid.is-half { border-top-color: var(--viz-axis); }
.pm-hgrid em {
  position: absolute; right: calc(100% + 6px); top: 0; transform: translateY(-50%);
  color: var(--ink-3); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pm-xaxis { position: relative; height: 18px; margin-left: 52px; color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pm-xaxis > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pm-xaxis > span.is-start { transform: none; }
.pm-xaxis > span.is-end { transform: translateX(-100%); }
.pm-xaxis > b { position: absolute; right: 0; top: 16px; color: var(--ink-3); font-size: 10.5px; font-weight: 500; }
.pm-xy figcaption { display: grid; gap: 4px; margin-top: 12px; }
.pm-own { overflow: visible; }

/* krivulje "još na oglasu" */
.pm-surv { fill: none; stroke-width: 2; stroke-linejoin: round; }
.pm-surv.is-all { stroke: var(--ink-2); }
.pm-surv.is-fair { stroke: var(--viz-1); }
.pm-surv.is-high { stroke: var(--viz-2); stroke-dasharray: 6 4; }
.pm-band-hit { fill: transparent; }
.pm-band-hit:hover, .pm-band-hit.is-tip-active { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.pm-surv-half { position: absolute; right: 4px; transform: translateY(-115%); color: var(--ink-3); font-size: 10.5px; pointer-events: none; }
.pm-endlbl {
  position: absolute; transform: translate(6px, -50%); color: var(--ink-2); font-size: 11px; font-weight: 600; white-space: nowrap;
  pointer-events: none; text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface);
}
.pm-endlbl.is-left { transform: translate(calc(-100% - 6px), -50%); }
.pm-endlbl.is-trend { color: var(--ink); font-variant-numeric: tabular-nums; transform: translate(calc(-100% + 4px), calc(-100% - 8px)); }
.pm-endlbl.is-trend.is-below { transform: translate(calc(-100% + 4px), 8px); }

/* trend cijene */
.pm-trend-line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* stupci po tjednima */
.pm-weekly { display: grid; gap: 6px; margin: 0; }
.pm-cchart { display: grid; gap: 4px; }
.pm-cplot { position: relative; margin: 8px 0 0 36px; }
.pm-cgrids { position: absolute; inset: 0; pointer-events: none; }
.pm-cgrid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--viz-grid); }
.pm-cgrid.is-zero { border-top-color: var(--viz-axis); }
.pm-cgrid em {
  position: absolute; right: calc(100% + 6px); top: 0; transform: translateY(-50%);
  color: var(--ink-3); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums;
}
.pm-ccols { position: absolute; inset: 0; display: grid; align-items: end; gap: 0; }
.pm-ccol { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 0 1px; }
.pm-ccol:hover, .pm-ccol.is-tip-active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pm-cstack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(100%, 22px); height: 100%; justify-content: flex-start; }
.pm-cseg { display: block; width: 100%; flex: 0 0 auto; }
.pm-cseg:first-child { border-radius: 0 0 1px 1px; }
.pm-cseg:last-child { border-radius: 4px 4px 0 0; }
.pm-cseg.is-salon { background: var(--viz-1); }
.pm-cseg.is-other { background: var(--viz-3); }
.pm-cseg.is-new { background: var(--viz-other); }
.pm-ccol.is-partial .pm-cseg { background-image: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--surface) 55%, transparent) 3px 6px); }
.pm-ccol.is-fewer .pm-cseg { opacity: 0.55; }
/* tjedni s manje praćenih salona: siva šrafura iza stupaca / crte */
.pm-cband {
  position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 2px, transparent 2px 7px);
  box-shadow: inset -1px 0 0 var(--line);
}
/* promjena broja salona / početak cijele HR: crta od rezerviranog pojasa iznad grafa do osi, oznaka u pojasu */
.pm-cmarker { position: absolute; bottom: 0; width: 0; border-left: 1.5px dashed var(--ink-3); pointer-events: none; }
.pm-cmarker em {
  position: absolute; left: 4px; top: -1px; color: var(--ink-2); font-size: 10.5px; font-style: normal; font-weight: 600; line-height: 12px; white-space: nowrap;
}
.pm-cmarker.is-left em { left: auto; right: 4px; }
.pm-cmarker em { pointer-events: auto; cursor: default; }
/* mala promjena (ili oznaka koja ne stane): kratka crtica na vrhu grafa, broj salona u oblačiću (title) */
.pm-cmarker.is-tick { top: -3px; bottom: auto; height: 9px; border-left-style: solid; pointer-events: auto; }
.pm-cxaxis { display: grid; margin-left: 36px; color: var(--ink-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pm-cxaxis > span { overflow: visible; white-space: nowrap; }
.pm-cxaxis > span:last-child { display: flex; justify-content: flex-end; }   /* zadnji tjedan: tekst ulijevo, ne preko ruba */

/* --- tablice po godištu / izvedbi ------------------------------------------------------------------------------ */
.pm-table-card .pm-tbl-wrap { border-radius: var(--radius); }
.pm-tbl td { padding-top: 8px; padding-bottom: 8px; }
.pm-tbl tr.is-best td { background: color-mix(in srgb, var(--brand-soft) 50%, var(--surface)); }
.pm-bar-cell { min-width: 110px; }
.pm-bar-cell .pm-bar-num { display: inline-block; min-width: 26px; color: var(--ink); font-weight: 600; }
.pm-variant { color: var(--ink); font-weight: 560; }

/* --- pokrivenost ------------------------------------------------------------------------------------------ */
.pm-coverage { display: block; }
.pm-coverage > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.pm-coverage > summary::-webkit-details-marker { display: none; }
.pm-coverage > summary::after { content: "▾"; color: var(--ink-3); font-size: 12px; transition: transform var(--dur-fast) ease; }
.pm-coverage[open] > summary::after { transform: rotate(180deg); }
.pm-coverage > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
.pm-coverage-body { display: grid; gap: 6px; margin-top: 10px; }
.pm-coverage-body p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.pm-coverage-body .pm-tbl-wrap { margin-top: 6px; }

/* --- mobilni prikaz / uski sadržaj ------------------------------------------------------------------------- */
.pm-skel { display: grid; gap: 14px; }
@container pm (max-width: 600px) {
  .pm-card { padding: 12px 12px; gap: 10px; }
  .pm-xy-plot, .pm-xaxis { margin-left: 50px; }   /* "21,8 tis. €" stane uz 12 px ruba kartice */
  .pm-cplot, .pm-cxaxis { margin-left: 28px; }
  .pm-field select { min-width: 0; width: 100%; }
  .pm-form-row > .pm-field:not(.pm-field--year) { flex: 1 1 100%; }
  .pm-lists-bar > .ui-tabs { flex-basis: 100%; overflow-x: auto; }
  .pm-sort { margin: 4px 0 8px; }
  .pm-refline { display: grid; }
  .pm-ov-card .pm-toolbar { padding: 10px 12px; }
}
.mobile-shell .pm-toolbar .ui-seg { overflow-x: auto; max-width: 100%; }
.mobile-shell .pm-pt .pm-hit { r: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pm-coverage > summary::after { transition: none; }
}