/* ================================================================
   Family Tree — assets/css/app.css
   All design tokens at the top; change these to retheme.
   ================================================================ */

:root {
  --ft-bg:          #F8FAFC;
  --ft-surface:     #FFFFFF;
  --ft-border:      #E2E8F0;
  --ft-border-med:  #CBD5E1;
  --ft-text:        #1E293B;
  --ft-text-muted:  #64748B;
  --ft-accent:      #3B82F6;
  --ft-accent-dark: #1D4ED8;
  --ft-danger:      #EF4444;
  --ft-success:     #10B981;
  --ft-warning:     #F59E0B;
  --ft-card-w:      150px;
  --ft-card-h:      90px;
  --ft-radius:      10px;
  --ft-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --ft-shadow-hover:0 4px 12px rgba(0,0,0,.12);
  --ft-connector:   #94A3B8;
  --ft-spouse-line: #F472B6;
}

/* ── Layout ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{background:var(--ft-bg);color:var(--ft-text);font-family:'Inter',system-ui,sans-serif;margin:0;overflow:hidden;height:100vh}

#app{display:flex;flex-direction:column;height:100vh}

/* ── Top nav ──────────────────────────────────────────────────── */
#topbar{
  background:var(--ft-surface);
  border-bottom:1px solid var(--ft-border);
  padding:0 16px;
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  z-index:100;
  box-shadow:var(--ft-shadow);
}
#topbar .brand{font-weight:700;font-size:15px;color:var(--ft-text);white-space:nowrap;margin-right:6px}
#topbar .brand i{color:var(--ft-accent);margin-right:6px}
.tb-divider{width:1px;height:28px;background:var(--ft-border);flex-shrink:0}
.tb-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:6px;
  border:1px solid var(--ft-border);
  background:transparent;color:var(--ft-text-muted);
  font-size:12px;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.tb-btn:hover{background:var(--ft-bg);border-color:var(--ft-border-med);color:var(--ft-text)}
.tb-btn.active{background:#EFF6FF;border-color:#93C5FD;color:var(--ft-accent)}
.tb-btn i{font-size:13px}
#zoom-disp{font-size:11px;color:var(--ft-text-muted);min-width:38px;text-align:center}

/* ── Search bar ──────────────────────────────────────────────── */
#search-wrap{position:relative;margin-left:auto}
#search-inp{
  width:200px;padding:5px 10px 5px 30px;
  border:1px solid var(--ft-border);border-radius:6px;
  font-size:12px;background:var(--ft-bg);color:var(--ft-text);
  transition:width .2s,border-color .15s;
}
#search-inp:focus{outline:none;border-color:var(--ft-accent);width:260px}
#search-wrap i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--ft-text-muted);font-size:13px;pointer-events:none}
#search-results{
  position:absolute;top:calc(100% + 4px);right:0;width:280px;
  background:var(--ft-surface);border:1px solid var(--ft-border);
  border-radius:8px;box-shadow:var(--ft-shadow-hover);
  z-index:200;display:none;max-height:260px;overflow-y:auto;
}
.sr-item{padding:8px 12px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ft-border)}
.sr-item:last-child{border-bottom:none}
.sr-item:hover{background:var(--ft-bg)}

/* ── Filter bar ──────────────────────────────────────────────── */
#filterbar{
  background:var(--ft-surface);
  border-bottom:1px solid var(--ft-border);
  padding:6px 16px;
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;font-size:12px;flex-wrap:wrap;
}
#filterbar label{color:var(--ft-text-muted);font-weight:500;white-space:nowrap}
.filter-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  border:1px solid var(--ft-border);
  background:transparent;color:var(--ft-text-muted);
  font-size:11px;cursor:pointer;transition:all .15s;
}
.filter-chip:hover{border-color:var(--ft-border-med);color:var(--ft-text)}
.filter-chip.active{background:#EFF6FF;border-color:#93C5FD;color:var(--ft-accent)}
.filter-sep{color:var(--ft-border-med);margin:0 4px}

/* ── Canvas ──────────────────────────────────────────────────── */
#canvas-wrap{
  flex:1;overflow:hidden;position:relative;
  background:var(--ft-bg);cursor:grab;
  background-image:radial-gradient(var(--ft-border) 1px, transparent 1px);
  background-size:28px 28px;
}
#canvas-wrap:active{cursor:grabbing}
#canvas{position:absolute;transform-origin:0 0}

#connector-svg{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}

/* ── Person card ─────────────────────────────────────────────── */
.person-card{
  position:absolute;
  width:var(--ft-card-w);
  background:var(--ft-surface);
  border:1.5px solid var(--ft-border);
  border-radius:var(--ft-radius);
  box-shadow:var(--ft-shadow);
  cursor:pointer;
  transition:box-shadow .15s, border-color .15s, transform .15s;
  user-select:none;overflow:hidden;
}
.person-card:hover{box-shadow:var(--ft-shadow-hover);transform:translateY(-1px)}
.person-card.focused{border-color:var(--ft-accent);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.person-card.dimmed{opacity:.25;pointer-events:none}
.person-card.spouse-card{border-style:dashed}

.card-colorbar{height:4px;width:100%}
.card-inner{padding:8px 9px 7px}
.card-top{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.card-avatar{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}
.card-name{font-size:11px;font-weight:600;line-height:1.3;color:var(--ft-text)}
.card-sub{font-size:9px;color:var(--ft-text-muted);margin-top:1px}
.card-dates{font-size:9px;color:var(--ft-text-muted);display:flex;gap:4px;flex-wrap:wrap}
.card-role-badge{
  display:inline-block;font-size:8px;font-weight:600;
  padding:1px 5px;border-radius:3px;margin-top:3px;letter-spacing:.03em;text-transform:uppercase;
}
.card-photo{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}

.gen-label-floating{
  position:absolute;left:10px;
  font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--ft-border-med);pointer-events:none;
}

/* ── Side panel ──────────────────────────────────────────────── */
#panel{
  position:fixed;top:0;right:0;width:320px;height:100vh;
  background:var(--ft-surface);border-left:1px solid var(--ft-border);
  transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
  z-index:300;display:flex;flex-direction:column;
  box-shadow:-4px 0 20px rgba(0,0,0,.08);
}
#panel.open{transform:translateX(0)}
.panel-head{
  padding:14px 16px 12px;border-bottom:1px solid var(--ft-border);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.panel-head-color{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.panel-head h3{font-size:14px;font-weight:600;flex:1;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-close{background:none;border:none;cursor:pointer;color:var(--ft-text-muted);font-size:16px;padding:4px;border-radius:4px}
.panel-close:hover{background:var(--ft-bg);color:var(--ft-text)}

/* tabs */
.panel-tabs{display:flex;border-bottom:1px solid var(--ft-border);flex-shrink:0}
.ptab{flex:1;padding:8px 4px;border:none;background:transparent;font-size:11px;color:var(--ft-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.ptab:hover{color:var(--ft-text)}
.ptab.active{color:var(--ft-accent);border-bottom-color:var(--ft-accent);font-weight:600}

.panel-body{flex:1;overflow-y:auto;padding:14px 16px}
.tab-pane{display:none}.tab-pane.active{display:block}

/* form fields */
.fgroup{margin-bottom:11px}
.fgroup label{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--ft-text-muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.fgroup label i{font-size:11px}
.fgroup input,.fgroup select,.fgroup textarea{
  width:100%;padding:6px 10px;
  border:1px solid var(--ft-border);border-radius:6px;
  font-size:12px;color:var(--ft-text);background:var(--ft-surface);
  transition:border-color .15s;
}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus{outline:none;border-color:var(--ft-accent)}
.fgroup textarea{resize:vertical;min-height:70px;font-family:inherit}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.panel-footer{padding:12px 16px;border-top:1px solid var(--ft-border);display:flex;gap:8px;flex-shrink:0}
.btn-save{flex:1;padding:8px;border:none;border-radius:6px;background:var(--ft-accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.btn-save:hover{background:var(--ft-accent-dark)}
.btn-danger{padding:8px 12px;border-radius:6px;border:1px solid var(--ft-border);background:transparent;color:var(--ft-text-muted);font-size:13px;cursor:pointer}
.btn-danger:hover{border-color:var(--ft-danger);color:var(--ft-danger)}

/* connections tab */
.conn-item{
  display:flex;align-items:center;gap:8px;padding:7px 8px;
  border:1px solid var(--ft-border);border-radius:6px;margin-bottom:6px;
  font-size:12px;cursor:pointer;transition:border-color .15s;
}
.conn-item:hover{border-color:var(--ft-accent)}
.conn-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0}
.conn-del{margin-left:auto;border:none;background:none;color:var(--ft-text-muted);cursor:pointer;padding:2px 4px;border-radius:3px}
.conn-del:hover{color:var(--ft-danger);background:#FEE2E2}
.add-conn-btn{
  display:flex;align-items:center;gap:6px;width:100%;padding:7px 10px;
  border:1px dashed var(--ft-border-med);border-radius:6px;
  background:transparent;color:var(--ft-accent);font-size:12px;cursor:pointer;margin-top:4px;
}
.add-conn-btn:hover{background:#EFF6FF;border-color:#93C5FD}

/* section headers */
.sec-head{font-size:10px;font-weight:700;color:var(--ft-text-muted);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--ft-border)}

/* tooltip on cards */
.ft-tooltip{
  position:absolute;background:#1E293B;color:#fff;
  font-size:11px;padding:4px 8px;border-radius:4px;
  pointer-events:none;white-space:nowrap;z-index:400;
  opacity:0;transition:opacity .15s;
}

/* mini legend */
#legend{
  position:fixed;bottom:16px;left:16px;
  background:var(--ft-surface);border:1px solid var(--ft-border);
  border-radius:8px;padding:8px 12px;font-size:10px;
  box-shadow:var(--ft-shadow);min-width:120px;z-index:100;
}
#legend h6{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--ft-text-muted);margin-bottom:6px;font-weight:700}
.legend-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;color:var(--ft-text-muted)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-line{width:20px;height:0;border-top:2px solid var(--ft-connector)}
.legend-dashed{border-top-style:dashed;border-color:var(--ft-spouse-line)}

/* toast */
#toast{
  position:fixed;bottom:24px;right:24px;
  background:#1E293B;color:#fff;padding:10px 16px;
  border-radius:8px;font-size:12px;font-weight:500;
  transform:translateY(60px);opacity:0;transition:all .2s;
  z-index:500;box-shadow:var(--ft-shadow-hover);
}
#toast.show{transform:translateY(0);opacity:1}

/* scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ft-border-med);border-radius:3px}