/* Gotha viewer */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; font-family: Georgia, 'Times New Roman', serif; color: #2b2b2b; background: #fafaf7; display: flex; flex-direction: column; height: 100vh; }
a { color: #37517e; }

/* --- hlavička --- */
.site-header { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem; background: #2e4a2e; color: #f5f3ea; flex-wrap: wrap; }
.site-header h1 { margin: 0; font-size: 1.4rem; }
.site-header h1 a { color: inherit; text-decoration: none; }
.site-header .subtitle { margin: 0; font-size: .85rem; opacity: .85; flex: 1 1 auto; }
.lang-switch { display: flex; gap: .35rem; }
.lang-switch a { display: inline-flex; padding: 2px; border-radius: 3px; opacity: .55; }
.lang-switch a.active { opacity: 1; outline: 2px solid #d4c47a; }
.action-refresh { color: #f5f3ea; font-size: .85rem; text-decoration: none; border: 1px solid rgba(255,255,255,.4); padding: .3rem .7rem; border-radius: 4px; }
.action-refresh:hover { background: rgba(255,255,255,.12); }

main { padding: 1.2rem; max-width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* --- flash --- */
.flash { padding: .7rem 1rem; border-radius: 5px; background: #eef3ee; border: 1px solid #cfdccf; margin-bottom: 1rem; }
.flash-error { background: #faeaea; border-color: #e5bcbc; color: #7a2828; }

/* --- tabulka rodů --- */
.families { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.families-table-wrap { flex: 1; overflow-y: auto; min-height: 0; }
.toolbar { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.toolbar input[type=search] { padding: .5rem .8rem; min-width: 280px; border: 1px solid #c5c0ae; border-radius: 4px; font-size: 1rem; }
.muted { color: #888; font-size: .85rem; }
.families-table { border-collapse: collapse; width: 100%; background: #fff; }
.families-table th, .families-table td { border: 1px solid #e3dfd0; padding: .5rem .7rem; text-align: left; }
.families-table th { background: #efece0; font-variant: small-caps; }
.families-table td.num, .families-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.families-table td.wd { text-align: center; }
.families-table tbody tr:hover { background: #f5f2e8; }

/* --- strom --- */
.breadcrumb { margin: 0 0 .5rem; }
.tree-search-wrap { position: relative; margin: .5rem 0 1rem; }
.tree-search-wrap input { padding: .5rem .8rem; min-width: 320px; border: 1px solid #c5c0ae; border-radius: 4px; font-size: 1rem; }
.tree-search-results { position: absolute; z-index: 10; background: #fff; border: 1px solid #c5c0ae; border-radius: 0 0 4px 4px; margin: 0; padding: 0; list-style: none; min-width: 320px; max-height: 240px; overflow-y: auto; display: none; }
.tree-search-results li { padding: .45rem .8rem; cursor: pointer; }
.tree-search-results li:hover { background: #f0ede0; }

.family { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Toolbar se zoom ovladači */
.tree-toolbar { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.tree-toolbar .zoom-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 .5rem; border: 1px solid #c5c0ae; border-radius: 4px; background: #f6f4ec; cursor: pointer; font-size: 1rem; line-height: 1; }
.tree-toolbar .zoom-btn:hover { background: #ecead9; }
.tree-toolbar .zoom-btn:active { background: #e2decb; }
.tree-toolbar .zoom-level { font-size: .85rem; color: #6d6850; min-width: 3.2em; text-align: center; }

/* Zoomovatelný strom:
 * .tree-viewport drží viditelný výřez a přebírá scrollování.
 * .tree-canvas je vnitřní "papír" s fixní velikostí, který se transformem
 * škáluje (transform-origin 0 0 → výpočet pozic je přímočarý). */
.tree-viewport { position: relative; overflow: auto; border: 1px solid #ddd8c5; background: #fdfcf7; flex: 1; min-height: 0; }
.tree-canvas { position: relative; overflow: visible; background: #fff; transform-origin: 0 0; }
#tree-edges { position: absolute; left: 30px; top: 20px; }
#tree-edges path.marriage { stroke: #a59371; stroke-width: 2; }
#tree-edges path.child { stroke: #8f9e8f; stroke-width: 1.5; }

.node { position: absolute; width: 210px; height: 84px; padding: .45rem .6rem; background: #f6f4ec; border: 1px solid #b9b29a; border-radius: 6px; cursor: pointer; box-shadow: 1px 2px 4px rgba(0,0,0,.08); box-sizing: border-box; }
.node-other-families { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.node-family-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 4px; color: #555; text-decoration: none; opacity: .85; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: background .15s; }
.node-family-link:hover { background: rgba(255,255,255,.95); opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.node-family-link img { width: 16px; height: 16px; display: block; filter: grayscale(100%); }
.node-family-link:hover img { filter: none; }
.node:hover { border-color: #37517e; }
.node--male   { background: #d9e9f5; } /* muži: světle modrá */
.node--female { background: #f5d9dc; } /* ženy: světle růžová */
.node .name { font-weight: 700; font-size: .92rem; line-height: 1.2; padding-right: 32px; }
.node .years { color: #6d6850; font-size: .82rem; }
.node.hl { outline: 3px solid #d4a017; background: #fff8e1; }
/* Druhá instance osoby (např. dcera, která je zároveň manželkou) – viz $dups v family.php.
 * Vypadá stejně jako primární box (jen ikona .node-dup-link v rohu indikuje navigaci
 * na druhý box). */

/* --- postranní panel --- */
.person-panel { position: fixed; top: 0; right: -420px; width: 400px; max-width: 92vw; height: 100vh; background: #fff; border-left: 1px solid #c5c0ae; box-shadow: -4px 0 12px rgba(0,0,0,.15); padding: 1.2rem; overflow-y: auto; transition: right .25s ease; z-index: 100; }
.person-panel.open { right: 0; }
.person-panel .close { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; font-size: 1.6rem; cursor: pointer; color: #666; }
.person-panel h3 { margin-top: 0; }
.person-panel img.person-photo { max-width: 100%; border-radius: 6px; margin: .5rem 0; }
.person-panel table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.person-panel th, .person-panel td { border-bottom: 1px solid #eee; padding: .35rem .4rem; text-align: left; vertical-align: top; }
.person-panel th { width: 40%; color: #555; font-weight: 600; }

/* --- odkazy v panelu --- */
.person-links { display: flex; gap: .8rem; align-items: center; margin: .6rem 0; }
.person-links .wb-link { font-size: .85rem; color: #888; text-decoration: none; }
.person-links .wb-link:hover { text-decoration: underline; }
.person-links .ext-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; opacity: .8; transition: opacity .15s; }
.person-links .ext-link:hover { opacity: 1; background: #f0ede0; }
.person-links .ext-link img { height: 20px; width: auto; display: block; }

/* --- patička --- */
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; padding: 1rem 1.2rem; color: #777; font-size: .85rem; border-top: 1px solid #e0dccb; flex-shrink: 0; }
.footer-left a { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #555; }
.footer-left img { height: 40px; width: auto; display: block; }
.footer-left .hiu-name { font-size: .82rem; line-height: 1.25; }
.footer-right { display: flex; align-items: center; gap: 1rem; }
.footer-right img { height: 40px; width: auto; display: block; }