/* Questo foglio di stile viene caricato solo sulla pagina che contiene
   lo shortcode [albero_genealogico], servita dal template a schermo
   intero del plugin: le regole su html/body qui sotto non toccano
   quindi il resto del sito. */
html, body{
  margin:0;
  height:100%;
  overflow:hidden;
}

#albero-genealogico-app{
  --color-cork:#8A6A49;
  --color-card:#F6EFE0;
  --color-card-edge:#E2D5B3;
  --color-ink:#2B2118;
  --color-ink-soft:#6B5D4C;
  --color-panel:#F8F2E5;
  --color-panel-edge:#E6D9BB;
  --color-string-parent:#A8342A;
  --color-string-spouse:#B5872A;
  --color-danger:#A8342A;
  --color-pin-femmina:#D56B6B;
  --color-pin-maschio:#6B6BD5;
  --color-pin-altro:#B5872A;
  --color-selection:#2F7D8C;
  --shadow-card:0 3px 8px rgba(30,20,10,0.35), 0 1px 2px rgba(30,20,10,0.25);
  --shadow-panel:-6px 0 20px rgba(0,0,0,0.35);
}
#albero-genealogico-app *{box-sizing:border-box;}
@media (prefers-color-scheme: dark){
  #albero-genealogico-app:not([data-theme="light"]){
    --color-cork:#3d332a;
    --color-card:#e8dfca;
    --color-card-edge:#cbbf9d;
    --color-ink:#241b12;
    --color-ink-soft:#5c5140;
    --color-panel:#efe6d1;
    --color-panel-edge:#d8cba9;
  }
}

/* Tutti i testi dell'app usano il font del sito (eredità normale della
   cascata); i form control fanno eccezione per via del loro stile di
   default del browser, quindi qui forziamo esplicitamente l'eredità.
#albero-genealogico-app input,
#albero-genealogico-app select,
#albero-genealogico-app textarea,
#albero-genealogico-app button{
  font-family:inherit;
}
*/

/* L'app occupa l'intero viewport: è pensata come un'esperienza a tutto
   schermo, non come un widget incassato nel layout della pagina. */
#board{
  position:fixed;
  inset:0;
  z-index:1;
  color:var(--color-ink);
  background-color:var(--color-cork);
  /*
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,0.12), transparent 50%),
    repeating-radial-gradient(circle at 0 0, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 1px, transparent 1.5px, transparent 7px);
  */
  background-image: url('./bg_texture.webp');
  cursor:grab;
  touch-action:none;
}
#board.panning{cursor:grabbing;}
#board.select-mode{cursor:crosshair;}

/* Il plugin nasconde la admin bar sulla pagina dell'albero, quindi in
   condizioni normali queste regole non servono. Restano come rete di
   sicurezza nel caso in cui la admin bar venga comunque mostrata (ad
   esempio se lo shortcode viene usato fuori dal template dedicato). */
body.admin-bar #board{ top:32px; }
body.admin-bar #toolbar{ top:50px; }
body.admin-bar #hint{ top:50px; }
body.admin-bar #panel{ top:32px; height:calc(100% - 32px); }
@media (max-width:782px){
  body.admin-bar #board{ top:46px; }
  body.admin-bar #toolbar{ top:64px; }
  body.admin-bar #hint{ top:64px; }
  body.admin-bar #panel{ top:46px; height:calc(100% - 46px); }
}

#world{
  position:absolute;
  left:0; top:0;
  width:0; height:0;
  transform-origin:0 0;
  will-change:transform;
}

svg#lines{
  position:absolute;
  left:-4000px; top:-4000px;
  width:8000px; height:8000px;
  overflow:visible;
  pointer-events:none;
}
svg#lines path.hit{ pointer-events:stroke; cursor:pointer; }

.card{
  position:absolute;
  width:176px;
  min-height:88px;
  background:var(--color-card);
  border:1px solid var(--color-card-edge);
  border-radius:3px;
  box-shadow:var(--shadow-card);
  padding:14px 12px 10px;
  cursor:grab;
  user-select:none;
  text-align:center;
  transition:box-shadow .15s ease;
}
.card:active{cursor:grabbing;}
.card.sel-a{ box-shadow:0 0 0 3px var(--color-string-spouse), var(--shadow-card); }
.card.selected{ box-shadow:0 0 0 3px var(--color-selection), var(--shadow-card); }

/* Rettangolo di selezione multipla (Maiusc+trascina su un punto vuoto
   della bacheca): vive in coordinate di schermo, non del mondo
   trascinabile, così resta un rettangolo dritto a qualunque zoom. */
#selection-rect{
  position:absolute;
  z-index:15;
  border:1px solid var(--color-selection);
  background:rgba(47,125,140,0.15);
  pointer-events:none;
  display:none;
}

.pin{
  position:absolute;
  top:-8px; left:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  box-shadow:0 2px 3px rgba(0,0,0,.4);
  background:var(--color-pin-altro);
}
.card-name{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  color:var(--color-ink);
  word-break:break-word;
}
.card-dates{
  margin-top:5px;
  font-size:12px;
  color:var(--color-ink-soft);
  font-variant-numeric:tabular-nums;
  font-weight: normal;
}

#toolbar{
  position:fixed;
  top:18px;
  left:18px;
  z-index:20;
  background:var(--color-panel);
  border:1px solid var(--color-panel-edge);
  border-radius:4px;
  box-shadow:var(--shadow-card);
  padding:14px 16px 12px;
  max-width:min(300px, calc(100vw - 36px));
  color:var(--color-ink);
}
#loading-state h1,
#toolbar h1,
#panel h1{
  margin:0 0 2px;
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:22px;
  color:var(--color-ink);
}
#toolbar p.sub{
  margin:0 0 10px;
  font-size:12px;
  color:var(--color-ink-soft);
}
#albero-genealogico-app .btnrow{display:flex; flex-wrap:wrap; gap:6px;}
#albero-genealogico-app button{
  font-size:13px;
  font-weight:600;
  border:1px solid var(--color-panel-edge);
  background:#fffdf8;
  color:var(--color-ink);
  padding:7px 11px;
  border-radius:3px;
  cursor:pointer;
  transition:background .12s ease, transform .05s ease;
}
#albero-genealogico-app button:hover{ background:#fff; }
#albero-genealogico-app button:active{ transform:translateY(1px); }
#albero-genealogico-app button.primary{ background:var(--color-string-parent); color:#fdf3ef; border-color:var(--color-string-parent); }
#albero-genealogico-app button.primary:hover{ filter:brightness(1.06); }
#albero-genealogico-app button.active-toggle{ background:var(--color-string-spouse); color:#2b2118; border-color:var(--color-string-spouse); }
#albero-genealogico-app button.danger{ background:transparent; color:var(--color-danger); border-color:var(--color-danger); }
#albero-genealogico-app button.danger:hover{ background:var(--color-danger); color:#fff; }
#albero-genealogico-app button.ghost{ background:transparent; }

#hint{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:21;
  background:var(--color-string-spouse);
  color:#2b2118;
  font-size:13px;
  font-weight:600;
  padding:8px 16px;
  border-radius:3px;
  box-shadow:var(--shadow-card);
  display:none;
}

#toast{
  position:fixed;
  bottom:18px;
  right:18px;
  z-index:50;
  background:var(--color-danger);
  color:#fdf3ef;
  font-size:13px;
  font-weight:600;
  padding:10px 16px;
  border-radius:3px;
  box-shadow:var(--shadow-card);
  display:none;
  max-width:280px;
}

#legend{
  position:fixed;
  left:18px;
  bottom:16px;
  z-index:20;
  font-size:12px;
  color:#f3ead9;
  background:rgba(0,0,0,0.28);
  padding:8px 12px;
  border-radius:3px;
  line-height:1.7;
}
#legend .swatch{ display:inline-block; width:20px; border-bottom:3px solid; margin-right:6px; vertical-align:middle; }

#panel{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:min(340px, 100vw);
  background:var(--color-panel);
  border-left:1px solid var(--color-panel-edge);
  box-shadow:var(--shadow-panel);
  transform:translateX(calc(100% + 20px));
  transition:transform .28s ease;
  z-index:30;
  display:flex;
  flex-direction:column;
  padding:20px 22px;
  overflow-y:auto;
  text-align:left;
  color:var(--color-ink);
}
#panel.open{ transform:translateX(0); }
#panel h2{
  font-family:'Fraunces',serif;
  font-size:20px;
  font-weight:600;
  margin:0 0 16px;
}
#panel .field{ margin-bottom:14px; }
#panel .field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--color-ink-soft);
  margin-bottom:4px;
}
#panel .field input, #panel .field select, #panel .field textarea{
  width:100%;
  font-size:14px;
  padding:8px 10px;
  border:1px solid var(--color-panel-edge);
  border-radius:3px;
  background:#fffdf8;
  color:var(--color-ink);
}
#panel .field textarea{ resize:vertical; min-height:60px; }
#panel .field-row{ display:flex; gap:10px; }
#panel .field-row .field{ flex:1; }
#panel .actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
#panel .actions .spacer{ flex:1; }

.overlay-backdrop{
  position:fixed; inset:0; z-index:40;
  background:rgba(20,14,8,0.35);
  display:flex; align-items:center; justify-content:center;
}
.overlay-card{
  background:var(--color-panel);
  border:1px solid var(--color-panel-edge);
  border-radius:4px;
  box-shadow:var(--shadow-card);
  padding:20px;
  max-width:340px;
  width:calc(100% - 40px);
  text-align:left;
  color:var(--color-ink);
}
.overlay-card h3{
  font-family:'Fraunces',serif;
  font-size:17px;
  margin:0 0 12px;
}
.overlay-card .opt{
  display:block;
  width:100%;
  text-align:left;
  margin-bottom:8px;
  padding:9px 12px;
}
.overlay-card .opt:last-of-type{ margin-bottom:0; }

.rel-menu{
  position:fixed;
  z-index:35;
  background:var(--color-panel);
  border:1px solid var(--color-panel-edge);
  border-radius:3px;
  box-shadow:var(--shadow-card);
  padding:6px;
}

#loading-state, #empty-state{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:5;
  pointer-events:none;
}
#loading-state .box, #empty-state .box{
  background:rgba(248,242,229,0.92);
  border:1px solid var(--color-panel-edge);
  border-radius:4px;
  padding:26px 30px;
  max-width:320px;
  pointer-events:auto;
  box-shadow:var(--shadow-card);
  font-size:14px;
  color:var(--color-ink-soft);
}
#empty-state h2{
  font-family:'Fraunces',serif;
  font-size:19px;
  margin:0 0 8px;
  color:var(--color-ink);
}
#empty-state p{
  font-size:13px;
  color:var(--color-ink-soft);
  margin:0 0 14px;
}

@media (prefers-reduced-motion: reduce){
  #panel{ transition:none; }
}