/*
  TANDARA DIAGRAM CSS — COMMON STANDARD 2026-09-18
  Jedini zajednički izgled za svih 5 HR + 5 EN dijagrama.
  Ne sadrži pravila vezana uz konkretne osobe ili grane.
*/

*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Georgia,"Times New Roman",serif;background:#f3eee5;color:#2f291f}.diagram-shell{display:flex;flex-direction:column;width:100%;height:100vh;min-width:0;overflow:hidden}.diagram-header{flex:0 0 auto;background:#f7f1e8;border-bottom:1px solid #b9aa94;box-shadow:0 2px 5px rgba(45,36,24,.12);z-index:5}.topbar{display:grid;grid-template-columns:44px 42px 42px minmax(210px,1fr) auto 42px;align-items:center;gap:6px;padding:7px 10px 5px}.icon-btn,.topbar button,.toolbar button{font-family:Arial,sans-serif}.icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:34px;border:1px solid #b5a58e;border-radius:7px;background:#fff8ef;color:#473825;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.08)}.icon-btn:hover,.icon-btn:focus-visible,.topbar button:hover,.toolbar button:hover,.toolbar button:focus-visible{border-color:#775d3c;background:#fff}.home-btn svg{width:22px;height:22px}.flag-btn img{display:block;width:26px;height:18px;object-fit:cover;border-radius:2px}.flag-btn.active{outline:2px solid #5b4230;outline-offset:1px}.title-wrap{text-align:center;min-width:0}.title-wrap h1{margin:0;color:#244e3d;font-size:clamp(24px,2vw,35px);line-height:1.05}.title-wrap p{margin:3px 0 0;color:#685e50;font:600 12px/1.2 Arial,sans-serif}.topbar button{height:34px;border:1px solid #a99272;border-radius:7px;background:#fffaf3;color:#3a3025;font-weight:700;padding:0 10px;cursor:pointer}.print-btn{width:38px!important;padding:5px!important}.print-btn img{width:23px;height:23px;object-fit:contain}.toolbar{display:flex;align-items:flex-end;gap:8px;padding:5px 10px 7px;border-top:1px solid rgba(117,94,62,.14)}.action-group{display:flex;flex:0 0 auto;gap:5px;align-items:center}.toolbar button{min-height:33px;border:1px solid #aa967a;border-radius:7px;background:#fffaf3;color:#342a20;font-weight:700;padding:6px 9px;cursor:pointer;white-space:nowrap}.toolbar .primary{background:#315d49;color:#fff;border-color:#244b3a}.search-wrap{position:relative;display:grid;grid-template-columns:120px minmax(135px,1.1fr) minmax(125px,1fr) minmax(125px,1fr) auto;gap:5px;align-items:end;min-width:0;flex:1}.search-field{display:flex;flex-direction:column;gap:2px;color:#4d4438;font:700 10px/1.1 Arial,sans-serif;min-width:0}.search-field input{width:100%;min-width:0;height:33px;border:1px solid #a99c89;border-radius:6px;background:#fff;padding:5px 7px;color:#25211c;font:14px/1.2 Arial,sans-serif;outline:none}.search-field input:focus{border-color:#315d49;box-shadow:0 0 0 2px rgba(49,93,73,.16)}.find-btn{background:#4d627f!important;color:#fff!important;border-color:#3c526e!important}.search-results{position:absolute;right:0;top:calc(100% + 5px);z-index:30;width:min(680px,90vw);max-height:310px;overflow:auto;border:1px solid #8d7f6d;border-radius:8px;background:#fffdf8;box-shadow:0 7px 22px rgba(0,0,0,.23)}.search-results-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:7px 9px;background:#ede4d7;border-bottom:1px solid #c8baa7;font:700 13px Arial,sans-serif}.search-results-close{min-width:28px!important;height:27px!important;padding:0!important;background:#fff!important;color:#222!important}.search-result{display:block;width:100%;border:0!important;border-bottom:1px solid #e2d8ca!important;border-radius:0!important;background:#fffdf8!important;color:#26211b!important;text-align:left;padding:8px 10px!important;font:13px/1.35 Arial,sans-serif!important;white-space:normal!important}.search-result:hover,.search-result:focus-visible{background:#f5ead8!important}.search-result strong{display:inline-block;margin-right:7px}.search-result small{display:block;color:#6a6156;margin-top:2px}.guidebar{display:grid;grid-template-columns:1fr;gap:7px;padding:7px 12px 9px;border-top:1px solid rgba(117,94,62,.16);font:13px/1.45 Arial,sans-serif;color:#4b4339;background:#fbf7f0}.legend-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.instructions-inline{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;gap:12px;padding-top:6px;border-top:1px solid rgba(117,94,62,.14);text-align:left}.guide-title{font-weight:800;color:#30271f}.instructions-title{font-size:16px;line-height:1.4}.instructions-text{display:flex;flex-wrap:wrap;gap:5px 18px;min-width:0;font-size:15px;line-height:1.45;color:#302b25}.instruction-item{display:inline}.instruction-item strong{font-weight:800;color:#244e3d}.legend-item{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.sw{display:inline-block;width:15px;height:10px;border:2px solid;border-radius:3px}.sw.carrier{background:#e7f0f8;border-color:#4d82aa}.sw.spouse{background:#fff1f3;border-color:#9d4052}.sw.other{background:#f3eaff;border-color:#72509d}.toggle-mini{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#071f16;border:2px solid #ffd400;color:#fff;font:bold 13px Arial}.root-mini,.numeric-mini,.s-mini,.sp-mini,.k-mini,.carrier-daughter-mini{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 4px;border-radius:3px;font:bold 10px Arial}.root-mini{background:#315d49;border:2px solid #183d2c;color:#fff}.numeric-mini{background:#e8f2fb;border:2px solid #4d82aa;color:#111}.s-mini{background:#f6d2a2;border:2px solid #c9822b;color:#111}.sp-mini{background:#fff1f3;border:2px solid #9d4052;color:#6d2634}.k-mini{background:#f3eaff;border:2px solid #72509d;color:#4c356b}.carrier-daughter-mini{background:#e5e7eb;border:2px solid #7a7f87;color:#111}.date-symbol-mini{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;font:bold 13px Arial;color:#30271f}.gn-mini{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:18px;padding:0 4px;border:1.5px solid #5e5549;border-radius:3px;background:#fff;color:#30271f;font:bold 10px Arial}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}#workspace{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background-color:#f4f7fb;background-image:linear-gradient(rgba(77,91,103,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(77,91,103,.055) 1px,transparent 1px);background-size:32px 32px;cursor:grab;touch-action:none;user-select:none}#workspace.dragging{cursor:grabbing}#treeSvg{display:block;width:100%;height:100%;overflow:hidden;touch-action:none}.tree-link,.side-link{fill:none;stroke:#716c65;stroke-width:2.1;vector-effect:non-scaling-stroke}.tree-link.focused{stroke:#15120f;stroke-width:4;filter:drop-shadow(0 0 3px rgba(255,213,0,.95))}.side-link{stroke:#9a8b82;stroke-width:1.55}.node,.side-node{outline:none;cursor:pointer}.node rect,.side-node rect{stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 2px rgba(0,0,0,.10))}.node:hover rect,.node:focus rect,.side-node:hover rect,.side-node:focus rect{stroke:#111!important;stroke-width:4!important}.node.root rect{fill:#315d49;stroke:#183d2c}.node.root .node-code,.node.root .node-label,.node.root .node-dates{fill:#fff}.node.primary rect{fill:#e8f2fb;stroke:#4d82aa}.node.terminal rect{fill:#f6d2a2;stroke:#c9822b}.node-code,.side-code{font:800 11px Arial,sans-serif;letter-spacing:.2px}.node-label{font:700 13px Arial,sans-serif}.node-dates{font:700 11px/1 Arial,sans-serif;letter-spacing:.1px}.node.primary .node-code,.node.primary .node-label,.node.primary .node-dates{fill:#111}.node.terminal .node-code,.node.terminal .node-label,.node.terminal .node-dates{fill:#111}.side-node.spouse rect{fill:#fff1f3;stroke:#9d4052}.side-node.daughter rect{fill:#f3eaff;stroke:#72509d}.side-node.son rect{fill:#f6d2a2;stroke:#c9822b}.side-node .side-label{font:700 11.5px Arial,sans-serif}.side-node .side-dates{font:700 10.5px Arial,sans-serif}.date-unknown-box{fill:#fffdf8;stroke:#5e5549;stroke-width:1.2;vector-effect:non-scaling-stroke}.date-unknown-text{fill:#30271f!important;font-weight:800}.node.root .date-unknown-box{fill:#fff;stroke:#fff}.node.root .date-unknown-text{fill:#173a57!important}.node.primary .date-unknown-box{fill:#fff;stroke:#4d82aa}.node.terminal .date-unknown-box{fill:#fff;stroke:#c9822b}.side-node.spouse .date-unknown-box{fill:#fff;stroke:#9d4052}.side-node.daughter .date-unknown-box{fill:#fff;stroke:#72509d}.side-node.son .date-unknown-box{fill:#fff;stroke:#c9822b}.side-node .side-meta{font:10px Arial,sans-serif}.side-node.spouse text{fill:#6d2634}.side-node.daughter text{fill:#4c356b}.side-node.son text{fill:#111}.toggle-hit{cursor:pointer}.toggle-circle{fill:#071f16;stroke:#ffd400;stroke-width:4;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 4px rgba(0,0,0,.52))}.toggle-symbol{fill:#fff;font:900 28px Arial,sans-serif;pointer-events:none}.branch-link-hit{cursor:pointer}.branch-link-circle{fill:#7c2835;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}.branch-link-symbol{fill:#fff;font:900 16px Arial,sans-serif;pointer-events:none}.search-focus rect{stroke:#111!important;stroke-width:7!important;filter:drop-shadow(0 0 8px rgba(255,196,0,.96))}.selected rect{stroke:#26342e!important;stroke-width:5!important}.person-details{position:absolute;right:12px;bottom:12px;z-index:24;width:min(440px,calc(100% - 24px));max-height:78%;overflow:auto;padding:14px 16px 15px;border:2px solid #315d49;border-radius:10px;background:#fffdf8;color:#2c261f;box-shadow:0 8px 24px rgba(0,0,0,.24);font:15px/1.5 Arial,sans-serif;user-select:text}.person-details[hidden]{display:none}.person-details-close{position:absolute;right:7px;top:6px;width:32px;height:32px;border:1px solid #9c8d79;border-radius:50%;background:#fff;color:#2c261f;font:700 22px/1 Arial,sans-serif;cursor:pointer}.person-details h2{margin:0 38px 5px 0;color:#244e3d;font:800 20px/1.2 Arial,sans-serif}.person-details-code{font-weight:800;color:#40372d}.person-details-dates{margin-top:4px;font-weight:800}.person-details-parents{margin-top:5px;color:#51483e}.person-details-text{margin-top:10px;padding-top:9px;border-top:1px solid #d3c6b5;white-space:pre-line;font-size:15px;line-height:1.55}.person-details-text[hidden]{display:none}#diagramStatus{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:25;max-width:80%;padding:8px 12px;border-radius:7px;background:#181512;color:#fff;opacity:0;pointer-events:none;transition:opacity .18s;font:700 13px Arial,sans-serif;text-align:center}#diagramStatus.show{opacity:1}@media(max-width:1180px){.toolbar{align-items:stretch;flex-direction:column}.search-wrap{width:100%;grid-template-columns:110px 1fr 1fr 1fr auto}.guidebar{padding:7px 9px 9px}.instructions-text{font-size:15px}}@media(max-width:820px){.topbar{grid-template-columns:36px 34px 34px minmax(140px,1fr) auto 36px;padding-left:5px;padding-right:5px}.topbar button span{display:none}.title-wrap p{display:none}.toolbar{gap:5px;padding:4px 5px}.action-group{flex-wrap:wrap}.search-wrap{grid-template-columns:1fr 1fr 1fr 1fr auto}.search-field span{display:none}.search-field input{font-size:12px;padding-left:5px;padding-right:5px}.guidebar{gap:6px;padding:7px 8px 9px}.legend-inline{font-size:12px;gap:5px 7px}.instructions-inline{grid-template-columns:1fr;gap:3px;padding-top:6px}.instructions-title{font-size:17px}.instructions-text{display:grid;grid-template-columns:1fr;gap:3px;font-size:16px;line-height:1.45}}@media(max-width:590px){.person-details{right:7px;bottom:7px;width:calc(100% - 14px);max-height:70%;padding:12px 13px 13px;font-size:16px}.person-details h2{font-size:19px}.person-details-text{font-size:16px}.search-wrap{grid-template-columns:1fr 1fr}.find-btn{grid-column:1/-1}.action-group button{font-size:11px;padding:5px}.title-wrap h1{font-size:20px}.legend-inline{font-size:11.5px}.instructions-title{font-size:17px}.instructions-text{font-size:16px}}@media(prefers-reduced-motion:reduce){#diagramStatus{transition:none}}@media print{html,body,.diagram-shell{height:auto;overflow:visible}.diagram-header{display:none}#workspace{height:95vh;background:#fff}.node rect,.side-node rect,.toggle-circle{filter:none}}
/* TANDARA MASTER v1 — usvojene Matina korekcije */
.life-date{white-space:nowrap}
.date-ng{display:inline-flex;align-items:center;justify-content:center;min-width:2.05em;height:1.22em;padding:0 .18em;border:1px solid currentColor!important;border-radius:0!important;background:transparent!important;font-size:.72em;font-weight:700;line-height:1;vertical-align:.08em}
.gn-mini{border-width:1px!important;border-style:solid!important;border-radius:0!important;background:transparent!important;font-size:8px!important;min-width:25px!important;height:15px!important;padding:0 3px!important}
.person-details-dates .date-ng,.search-result .date-ng{font-size:.72em;min-width:2.05em;height:1.22em}
.date-unknown-box{fill:transparent!important;stroke-width:1!important;filter:none!important}
.node:hover .date-unknown-box,.node:focus .date-unknown-box,.node.selected .date-unknown-box,.node.search-focus .date-unknown-box,.side-node:hover .date-unknown-box,.side-node:focus .date-unknown-box,.side-node.selected .date-unknown-box,.side-node.search-focus .date-unknown-box{stroke-width:1!important;filter:none!important}
.node.root .date-unknown-text{fill:#fff!important}
.marriage-label{font:800 10.5px Arial,sans-serif;fill:#5a4631;letter-spacing:.15px;pointer-events:none;paint-order:stroke;stroke:#f4f7fb;stroke-width:3px;stroke-linejoin:round}
.marriage-child-label{font-size:10px}
.marriage-link{fill:none;stroke:#7c684f;stroke-width:1.35;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;opacity:.92}

/* TANDARA FINAL: N.G. is always a thin square, same background as its context. */
.date-unknown-box,.date-ng{stroke-width:1!important;border-width:1px!important;border-style:solid!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.date-unknown:hover .date-unknown-box,.date-unknown:focus .date-unknown-box,.node:hover .date-unknown-box,.node.selected .date-unknown-box,.node.search-focus .date-unknown-box{stroke-width:1!important}
.node-code,.side-code,.person-details-code,.search-result strong{overflow-wrap:anywhere;word-break:normal}
.direct-flagcounter{flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;min-height:30px;padding:3px 10px 4px;border-top:1px solid rgba(117,94,62,.14);background:#fbf7f0}
.direct-flagcounter a{display:inline-flex;align-items:center;max-width:190px}
.direct-flagcounter img{display:block;max-width:190px;width:100%;height:auto;max-height:28px;object-fit:contain}


/* Zajedničko skrivanje/prikaz zaglavlja dijagrama. */
.diagram-header{position:relative;overflow:visible}
.header-collapse-btn{
  position:absolute;right:10px;bottom:-15px;z-index:80;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:30px;height:30px;padding:0;
  border:1px solid #8d7f6d;border-radius:7px;
  background:#fffaf3;color:#342a20;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  font:900 16px/1 Arial,sans-serif;cursor:pointer;
}
.header-collapse-btn:hover,.header-collapse-btn:focus-visible{
  border-color:#5b4230;background:#fff;outline:2px solid rgba(49,93,73,.22);outline-offset:1px
}
.header-collapse-label{display:none;font:700 12px/1 Arial,sans-serif;white-space:nowrap}
.diagram-header.header-collapsed>.topbar,
.diagram-header.header-collapsed>.toolbar,
.diagram-header.header-collapsed>.guidebar{display:none!important}
.diagram-header.header-collapsed{
  min-height:0;height:0;border-bottom-color:transparent;box-shadow:none;background:transparent;overflow:visible
}
/* When the header is hidden, keep the restore control completely inside the visible iframe.
   It sits over the top-right of the diagram instead of being half clipped above the viewport. */
.diagram-header.header-collapsed .header-collapse-btn{
  top:10px;right:10px;bottom:auto;
  width:auto;min-width:172px;height:34px;padding:0 10px;
  border-width:1px;border-radius:8px;background:#fffaf3
}
.diagram-header.header-collapsed .header-collapse-label{display:inline}
@media(max-width:590px){
  .header-collapse-btn{right:6px;width:32px;height:32px;bottom:-16px}
  .diagram-header.header-collapsed .header-collapse-btn{top:8px;right:6px;min-width:0;width:auto;max-width:calc(100vw - 12px);height:36px;padding:0 9px}
  .diagram-header.header-collapsed .header-collapse-label{font-size:11px}
}
@media print{.header-collapse-btn{display:none!important}}


/* ==========================================================
   TANDARA COMMON DATA-DRIVEN TYPES
   Nema selektora vezanih uz konkretnu šifru osobe.
   ========================================================== */

/* Kći koja nastavlja prezime/lozu: u JSON zapisu carrierDaughter:true */
.node.carrier-daughter rect,
.side-node.carrier-daughter rect {
  fill:#e5e7eb;
  stroke:#7a7f87;
}
.node.carrier-daughter .node-code,
.node.carrier-daughter .node-label,
.node.carrier-daughter .node-dates,
.side-node.carrier-daughter text {
  fill:#111;
}
.node.carrier-daughter .date-unknown-box,
.side-node.carrier-daughter .date-unknown-box {
  fill:#fff;
  stroke:#7a7f87;
}

/* Privremeni zapis kada ime/spol još nisu poznati: type:"unknown" */
.side-node.unknown rect,
.node.unknown rect {
  fill:#eceff1;
  stroke:#70757a;
}
.side-node.unknown text,
.node.unknown text {
  fill:#202124;
}
.side-node.unknown .date-unknown-box,
.node.unknown .date-unknown-box {
  fill:#fff;
  stroke:#70757a;
}
.v-mini,.unknown-mini {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  padding:0 4px;
  border-radius:3px;
  font:bold 10px Arial,sans-serif;
  background:#eceff1;
  border:2px solid #70757a;
  color:#202124;
}
/* =========================================================
   TANDARA DIAGRAM — HR | HOME | UK
   Isti raspored i visina kao na početnoj stranici
   ========================================================= */

.topbar{
  grid-template-columns:
    max-content
    66px
    max-content
    minmax(210px,1fr)
    auto
    42px;

  gap:10px;
  align-items:center;
}

/* HOME */
.topbar .home-btn{
  width:66px;
  height:66px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.topbar .home-btn img{
  display:block;
  width:66px;
  height:66px;
  object-fit:contain;
}

/* HR i UK zastava */
.topbar .flag-btn{
  width:auto;
  height:66px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.topbar .flag-btn img{
  display:block;
  width:auto;
  height:66px;
  max-width:none;
  object-fit:contain;
  border-radius:5px;
}

/* Aktivna zastava bez promjene dimenzija */
.topbar .flag-btn.active{
  outline:0;
  filter:drop-shadow(0 0 4px rgba(212,175,55,.75));
}

/* Hover kao na zajedničkom lijevom stupcu */
.topbar .home-btn:hover,
.topbar .home-btn:focus-visible,
.topbar .flag-btn:hover,
.topbar .flag-btn:focus-visible{
  border:0;
  background:transparent;
  filter:drop-shadow(0 0 5px rgba(212,175,55,.85));
}

/* Mali mobitel */
@media(max-width:420px){

  .topbar{
    grid-template-columns:
      max-content
      56px
      max-content
      minmax(120px,1fr)
      auto
      36px;

    gap:8px;
  }

  .topbar .home-btn,
  .topbar .home-btn img{
    width:56px;
    height:56px;
  }

  .topbar .flag-btn,
  .topbar .flag-btn img{
    height:56px;
  }
}
/* =========================================================
   TANDARA DIAGRAM — PODIJELJENI PRIKAZ

   Kada je zajednički lijevi stupac vidljiv:
   - HR / HOME / UK u dijagramu se ne prikazuju
   - naslov dijagrama zauzima njihov prostor

   Klasa .diagram-wide koristit će se kasnije
   za prikaz dijagrama preko cijele širine.
   ========================================================= */

body.site-shell-ready:not(.diagram-wide) .topbar > .flag-btn,
body.site-shell-ready:not(.diagram-wide) .topbar > .home-btn {
  display: none;
}

body.site-shell-ready:not(.diagram-wide) .topbar {
  grid-template-columns:
    minmax(210px, 1fr)
    auto
    42px;
}
/* =========================================================
   TANDARA DIAGRAM — CIJELA ŠIRINA

   Kada body dobije klasu .diagram-wide:
   - lijevi zajednički stupac se skriva
   - dijagram zauzima cijelu širinu
   - HR / HOME / UK u zaglavlju dijagrama opet se prikazuju
   ========================================================= */

body.site-shell-ready.diagram-wide .site-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.site-shell-ready.diagram-wide .site-shell {
  display: none;
}

body.site-shell-ready.diagram-wide .site-content {
  width: 100%;
  min-width: 0;
}

body.site-shell-ready.diagram-wide .topbar > .flag-btn,
body.site-shell-ready.diagram-wide .topbar > .home-btn {
  display: flex;
}
/* Dijagrami — bez naslova "Posjetitelji" */
.site-shell__flag-title {
  display: none;
}