/* Dentavista, javni registar: klinički sloj preko stil.css.
   Smjer: minimalizam, preciznost, profesionalnost. Bijelo, tanke linije, brojke kao očitanje instrumenta. */

:root {
  --bg: #F5F7F7; --paper: #FFFFFF; --ink: #0F1A1F; --muted: #56676D; --line: #D7E0E2; --line-2: #E7EDEE;
  --ours: #0B6A70; --ours-2: #8CC3C5; --ours-tint: #E3F0F0; --problem: #B23A2C; --ok: #2F6B50; --on-ours: #FFFFFF;
  --band-0: #EBDCD8; --band-1: #EEE6D2; --band-2: #DDE9E7; --band-3: #C3DDDB;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "SFMono-Regular", monospace;
  --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.375rem;
  --step-3: clamp(1.45rem, 2.3vw, 1.85rem); --step-4: clamp(2rem, 4.4vw, 3.1rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1416; --paper: #111C1F; --ink: #E5EDED; --muted: #98ACAF; --line: #23353A; --line-2: #1A2A2D;
    --ours: #5CC0C4; --ours-2: #2D7C80; --ours-tint: #12302F; --problem: #F0705C; --ok: #6CC49A; --on-ours: #0C1416;
    --band-0: #45302C; --band-1: #463F2B; --band-2: #233935; --band-3: #2A4A47; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1416; --paper: #111C1F; --ink: #E5EDED; --muted: #98ACAF; --line: #23353A; --line-2: #1A2A2D;
  --ours: #5CC0C4; --ours-2: #2D7C80; --ours-tint: #12302F; --problem: #F0705C; --ok: #6CC49A; --on-ours: #0C1416;
  --band-0: #45302C; --band-1: #463F2B; --band-2: #233935; --band-3: #2A4A47; color-scheme: dark;
}

body { font: 400 var(--step-0)/1.65 var(--font); background: var(--bg); color: var(--ink); }

/* Zaglavlje: tanka linija, mirna navigacija */
.top { background: var(--bg); border-bottom: 1px solid var(--line); }
.top .wrap { min-height: 64px; }
.brand { font-weight: 600; letter-spacing: -0.01em; }
.nav a { font-size: 0.875rem; color: var(--muted); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ours); }

/* Tipografija: precizno, bez vike */
h1 { font-weight: 600; font-size: var(--step-4); line-height: 1.12; letter-spacing: -0.022em; max-width: 21em; }
h1.page-title { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.015em; }
h2.title { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; margin-bottom: 14px; }
.lead { font-size: var(--step-1); line-height: 1.6; max-width: 40em; }
.intro { font-size: var(--step-0); max-width: 44em; margin-bottom: 24px; }
.eyebrow { font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ours); margin: 0 0 14px; }
.source { font-size: 0.8125rem; color: var(--muted); }
.muted { color: var(--muted); }

section.block { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(36px, 5vw, 56px); }

/* Gumbi */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 6px; background: var(--ours); color: var(--on-ours); text-decoration: none; font-weight: 500; font-size: 0.9375rem; border: 1px solid var(--ours); }
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); filter: none; }

/* Naslovnica: tekst lijevo, očitanje desno */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
.readout { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px 6px; }
.readout dl { margin: 0; }
.readout dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line-2); }
.readout dt { color: var(--muted); font-size: 0.875rem; }
.readout dd { margin: 0; font: 500 1rem/1.4 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Tablice kao mjerni list */
table.plain th { font: 500 0.6875rem/1.3 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
table.plain td { border-bottom: 1px solid var(--line-2); padding-top: 11px; padding-bottom: 11px; }
table.plain td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
table.plain td.num b { font-weight: 500; }
td.rng-cell { width: 26%; vertical-align: middle; padding-left: 18px; }
.rng { position: relative; display: block; height: 4px; background: var(--line-2); border-radius: 2px; }
.rng i { position: absolute; top: 0; bottom: 0; background: var(--ours-2); border-radius: 2px; }
.rng b { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--ours); margin-left: -1px; }

/* Brojke registra */
.figures.facts .figure b { color: var(--ink); font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--mono); letter-spacing: -0.01em; }

/* Mjesta kao mreža pločica */
.cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cities li { margin: 0 -1px -1px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cities a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--paper); padding: 13px 16px; text-decoration: none; height: 100%; }
.cities a:hover { background: var(--ours-tint); }
.cities a span { font-family: var(--mono); color: var(--muted); font-size: 0.875rem; }

/* Tri koraka mjerenja */
.method3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.method3 li { background: var(--paper); padding: 20px; }
.method3 small { display: block; font: 500 0.75rem/1 var(--mono); color: var(--ours); letter-spacing: 0.08em; margin-bottom: 10px; }
.method3 b { display: block; font-weight: 600; margin-bottom: 6px; }
.method3 p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.band { display: grid; grid-template-columns: 49fr 20fr 15fr 16fr; height: 8px; border-radius: 4px; overflow: hidden; margin: 22px 0 6px; max-width: 640px; }
.band i:nth-child(1) { background: var(--band-0); } .band i:nth-child(2) { background: var(--band-1); }
.band i:nth-child(3) { background: var(--band-2); } .band i:nth-child(4) { background: var(--band-3); }
.band-labels { display: grid; grid-template-columns: 49fr 20fr 15fr 16fr; max-width: 640px; font: 400 0.75rem/1.3 var(--mono); color: var(--muted); }

/* Popis provjera prije puta */
ol.checks5 { list-style: none; counter-reset: c; margin: 0; padding: 0; max-width: 46em; }
ol.checks5 li { counter-increment: c; display: grid; grid-template-columns: 2.4em 1fr; padding: 12px 0; border-top: 1px solid var(--line-2); }
ol.checks5 li::before { content: counter(c, decimal-leading-zero); font: 500 0.8125rem/1.65 var(--mono); color: var(--ours); }

/* Napomene i oznake */
.status-note { border-radius: 4px; font: 400 0.75rem/1.4 var(--mono); }
.claim { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .method3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  td.rng-cell, th.rng-cell { display: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
th.rng-cell + th.num, td.rng-cell + td.num { padding-left: 14px; }
@media (max-width: 640px) {
  table.plain td.num { font-size: 0.8125rem; }
  table.plain th, table.plain td { padding-right: 8px; }
  th.rng-cell + th.num, td.rng-cell + td.num { padding-left: 8px; }
}

/* Za medije: vodoravne trake (HTML, čitljive na mobitelu i u PDF-u) */
.bars { display: grid; gap: 14px; max-width: 46rem; margin: 6px 0 16px; }
.bar-legend { display: flex; gap: 18px; margin: 0; font-size: var(--step--1); color: var(--muted); }
.bar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bar-legend i, .bar-track i { display: block; background: var(--ours); border-radius: 2px; }
.bar-legend i { width: 12px; height: 12px; }
.bar-legend i.hu, .bar-track i.hu { background: var(--ours-2); }
.bar-group { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; }
.bar-lab { grid-row: span 2; font-size: 0.9375rem; }
.bar-group:has(.bar-row:only-of-type) .bar-lab { grid-row: auto; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 10px; align-items: center; }
.bar-track { display: block; height: 14px; }
.bar-track i { height: 100%; }
.bar-val { font: 500 0.875rem/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-val small { font-weight: 400; color: var(--muted); }
@media (max-width: 640px) {
  .bar-group { grid-template-columns: minmax(0, 1fr); }
  .bar-lab { grid-row: auto; font-weight: 500; }
  .bar-row { grid-template-columns: minmax(0, 1fr) 7.5rem; }
}

/* Ispis (PDF za medije): bez navigacije i gumba, sažetiji razmaci */
@page { size: A4; margin: 14mm 14mm 16mm; }
@media print {
  .top nav, .actions, .foot-links, .skip { display: none !important; }
  body { background: #FFFFFF; font-size: 10.5pt; }
  .hero { padding-block: 0 10px; }
  section.block { padding-block: 14px; }
  .bars, .checks5 li, .prose p, tr { break-inside: avoid; }
  h2, .eyebrow { break-after: avoid; }
  table.plain td, table.plain th { padding-block: 7px; }
  section.nova-strana { break-before: page; border-top: 0; }
  footer { display: none !important; }
  .prose a[href^="/"]::after { content: " (dentavista.eu" attr(href) ")"; color: var(--muted); }
  a { color: inherit; text-decoration: none; }
  .bar-track i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .bar-legend i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rng i, .rng b { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Nadnaslov i u tekstualnim blokovima u boji registra */
.prose .eyebrow { color: var(--ours); }

/* Popis klinika: mjesta zatvorena, klinike se otvaraju na "+" */
.gradovi { border-top: 1px solid var(--line); max-width: 60rem; }
details.grad { border-bottom: 1px solid var(--line); }
details.grad > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 2px; cursor: pointer; }
details.grad > summary::-webkit-details-marker { display: none; }
details.grad > summary:hover .ime { color: var(--ours); }
details.grad .ime { font-weight: 600; font-size: var(--step-1); }
details.grad .broj { margin-left: auto; font: 400 0.875rem/1 var(--mono); color: var(--muted); }
details.grad .plus { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ours); font: 500 1.125rem/1 var(--mono); transition: transform .15s ease; }
details.grad[open] .plus { transform: rotate(45deg); border-color: var(--ours); }
.kl-mini { list-style: none; margin: 0; padding: 0 0 6px; }
.kl-mini li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 11.5rem; gap: 2px 18px; align-items: baseline; padding: 11px 2px; border-top: 1px solid var(--line-2); font-size: 0.9375rem; }
.kl-mini li span { color: var(--muted); }
.kl-mini .tel { font-family: var(--mono); font-size: 0.875rem; white-space: nowrap; justify-self: end; }
details.grad > .source { margin: 4px 2px 18px; }
@media (max-width: 640px) {
  .kl-mini li { grid-template-columns: minmax(0, 1fr); }
  .kl-mini .tel { justify-self: start; }
}
@media print { details.grad .plus { display: none; } }

/* Karta klinika: vlastiti SVG, ploča s klinikama uz kartu (na mobitelu ispod) */
.karta-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.karta { margin: 0; }
.karta-svg { display: block; width: 100%; height: auto; }
.karta-svg .kopno { fill: var(--paper); stroke: var(--ours-2); stroke-width: 1.6; stroke-linejoin: round; }
.karta-svg .hit { fill: transparent; }
.karta-svg .tocka { fill: var(--ours); stroke: var(--paper); stroke-width: 2.5; transition: r .15s ease; }
.karta-svg a:hover .tocka, .karta-svg a:focus .tocka, .karta-svg a.on .tocka { fill: var(--ink); }
.karta-svg .ime { font: 600 22px/1 var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; opacity: 0; pointer-events: none; }
.karta-svg .ime .br { font: 400 18px var(--mono); fill: var(--muted); }
.karta-svg a.stalno .ime, .karta-svg a:hover .ime, .karta-svg a:focus .ime, .karta-svg a.on .ime { opacity: 1; }
.karta-svg a:focus { outline: none; }
.karta-svg a:focus-visible .tocka { stroke: var(--ink); stroke-width: 4; }
.karta figcaption { margin-top: 8px; }
.karta-ploca { position: sticky; top: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; min-height: 12rem; }
.karta-ploca .title { margin-bottom: 8px; }
.karta-ploca .kl-mini li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.karta-ploca .kl-mini .tel { justify-self: start; }
@media (max-width: 880px) { .karta-grid { grid-template-columns: minmax(0, 1fr); } .karta-ploca { position: static; } }
@media print { .karta-blok { display: none; } }
@media (max-width: 640px) {
  .karta-svg .tocka { transform-box: fill-box; transform-origin: center; transform: scale(1.8); }
  .karta-svg .hit { r: 40px; }
  .karta-svg .ime { font-size: 40px; stroke-width: 9px; transform: translateX(16px); }
  .karta-svg .ime .br { font-size: 34px; }
  .karta-svg .kopno { stroke-width: 2.4; }
}

/* Primjer punog profila: boja klinike (u pravom profilu dolazi iz loga klinike) */
:root { --klinika: #2D5BA8; --klinika-tint: #E7EEF8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --klinika: #8AACEA; --klinika-tint: #172238; } }
:root[data-theme="dark"] { --klinika: #8AACEA; --klinika-tint: #172238; }
.profil-kartica { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--klinika); border-radius: 10px; padding: 18px 20px 20px; box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ink) 35%, transparent); }
.profil-kartica .eyebrow { margin-bottom: 12px; }
.pk-glava { display: flex; align-items: center; gap: 12px; }
.pk-glava svg { width: 44px; height: 44px; flex: none; }
.pk-glava b { display: block; font-size: var(--step-1); line-height: 1.25; }
.pk-glava span { color: var(--muted); font-size: 0.875rem; }
.pk-glava.velika svg { width: 64px; height: 64px; }
.pk-glava.velika .page-title { margin: 0; }
.pk-oznaka { font: 500 0.75rem/1.5 var(--mono); color: var(--klinika); letter-spacing: 0.02em; margin: 12px 0; }
.profil-kartica dl { margin: 0; }
.profil-kartica dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 0.9375rem; }
.profil-kartica dt { color: var(--muted); }
.profil-kartica dd { margin: 0; font-weight: 600; text-align: right; }
.pk-ai { font-size: 0.8125rem; color: var(--ink); margin: 12px 0 14px; padding: 8px 10px; background: var(--ours-tint); border-radius: 6px; }
.primjer-traka { background: var(--klinika-tint); border-bottom: 1px solid var(--line); }
.primjer-traka .wrap { padding-block: 10px; font-size: 0.875rem; }
.profil h2.title { border-left: 3px solid var(--klinika); padding-left: 12px; }
.pk-obavijest { background: var(--klinika-tint); padding: 10px 14px; border-radius: 6px; }
.pk-foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.pk-foto figure { margin: 0; }
.pk-foto div { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--klinika-tint) 0 12px, var(--paper) 12px 24px); }
.pk-foto figcaption { font-size: 0.8125rem; color: var(--muted); margin-top: 6px; }
.pk-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.kod { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 16px; overflow-x: auto; max-width: 100%; font: 400 0.8125rem/1.55 var(--mono); margin: 0; }
table.usporedba th:nth-child(n+2), table.usporedba td:nth-child(n+2) { width: 22%; }
@media (max-width: 640px) { .pk-dva { grid-template-columns: minmax(0, 1fr); gap: 8px; } .pk-foto { gap: 8px; } }