/* Reset-ish */
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, Arial; background:#f4f6f8; color:#222; }

/* === LIGHT THEME (default) === */
body.theme-light {
  --bg-primary: #f4f6f8;
  --bg-secondary: white;
  --bg-tertiary: #eef3f7;
  --text-primary: #222;
  --text-secondary: #556;
  --border-color: #e0e6ea;
  --topbar-bg: white;
  --canvas-bg: #eef3f7;
}

/* === DARK THEME === */
body.theme-dark {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #0f0f0f;
  --text-primary: #e8e8e8;
  --text-secondary: #b0b0b0;
  --border-color: #444;
  --topbar-bg: #2d2d2d;
  --canvas-bg: #1a1a1a;
}

/* === PARCHMENT THEME === */
body.theme-parchment {
  --bg-primary: #f5f1ed;
  --bg-secondary: #faf8f5;
  --bg-tertiary: #ede7e0;
  --text-primary: #3e3432;
  --text-secondary: #6b6157;
  --border-color: #d4c8bb;
  --topbar-bg: #faf8f5;
  --canvas-bg: #f0e8e0;
}

/* Top bar */
#topbar { 
  display:flex; align-items:center; justify-content:space-between; padding:10px 18px; 
  border-bottom:1px solid var(--border-color); 
  background:var(--topbar-bg); 
  flex-wrap:wrap;
}
#topbar h1 { margin:0; font-size:18px; font-weight:700; color:var(--text-primary); }

/* Navigation links */
#navbar a.nav-link { 
  color:var(--text-secondary); text-decoration:none; font-weight:600; font-size:13px; 
  padding:6px 10px; border-radius:6px; transition:all 0.2s;
}
#navbar a.nav-link:hover, #navbar a.nav-link.active { 
  background:#2e8bd8; color:white;
}

.top-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.top-actions button { background:#2e8bd8; color:white; border:0; padding:6px 10px; border-radius:6px; cursor:pointer; font-weight:600; }
.top-actions button:hover{ opacity:0.95; }
#save-status { font-size:12px; color:var(--text-secondary); margin-left:8px; }

/* main area */
#main { display:flex; height:calc(100vh - 136px); } /* leave room for header/footer */

/* canvas wrap */
#canvas-wrap { 
  flex:1; position:relative; overflow:hidden; background:var(--canvas-bg); 
  display:flex; align-items:flex-start; justify-content:flex-start; 
}

/* svg lines overlay */
#lines { position:absolute; left:0; top:0; width:4000px; height:3200px; pointer-events:none; transform-origin:0 0; z-index:2; overflow:visible; }

/* canvas (big area we can pan/zoom) */
#canvas { position:absolute; left:0; top:0; width:4000px; height:3200px; transform-origin:0 0; z-index:1; }

/* inspector */
#inspector { 
  width:340px; border-left:1px solid var(--border-color); 
  background:var(--bg-secondary); padding:18px; overflow:auto; 
  color:var(--text-primary);
}
.hidden { display:none; }

.ins-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ins-head h2 { margin:0; font-size:18px; color:var(--text-primary); }
.ins-controls .danger { background:#d9534f; border:0; color:white; padding:6px 10px; border-radius:6px; cursor:pointer; }

.tabs { 
  display:flex; gap:8px; margin:14px 0 14px 0; 
  border-bottom:1px solid var(--border-color); padding-bottom:6px; 
}
.tab { background:none; border:0; padding:6px 8px; cursor:pointer; font-weight:600; color:var(--text-secondary); }
.tab.active { color:#1b6fb3; border-bottom:3px solid #1b6fb3; }

/* panels */
.panel { display:none; }
.panel.active { display:block; }
label { font-size:13px; color:var(--text-secondary); margin-top:8px; display:block; }
input[type=text], select, textarea { 
  width:100%; padding:8px 10px; border-radius:8px; 
  border:1px solid var(--border-color); margin-top:6px; font-size:14px; 
  background:var(--bg-primary); color:var(--text-primary);
}
input[type=date] { 
  width:100%; padding:8px 10px; border-radius:8px; 
  border:1px solid var(--border-color); margin-top:6px; font-size:14px; 
  background:var(--bg-primary); color:var(--text-primary);
}
textarea { min-height:120px; resize:vertical; background:var(--bg-primary); color:var(--text-primary); }

/* color picker */
.color-picker { display:flex; gap:8px; align-items:center; margin-top:6px; }
.color-picker input[type=color] { width:50px; height:40px; border:1px solid var(--border-color); border-radius:8px; cursor:pointer; }
.color-picker button { 
  flex:1; padding:8px; border-radius:8px; border:0; 
  background:#ddd; color:#222; cursor:pointer; font-weight:600; 
}
.color-picker button:hover { background:#ccc; }

.status-row { display:flex; gap:12px; margin-top:8px; }
.action-block { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.action-block button { padding:8px; border-radius:8px; border:0; background:#2e8bd8; color:white; cursor:pointer; font-weight:700; }

/* Advanced actions collapsible section */
.advanced-actions {
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-tertiary);
}

.advanced-actions summary {
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.advanced-actions summary:hover {
  background: var(--bg-primary);
}

.advanced-actions[open] summary {
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0;
  margin-bottom: 8px;
}

.advanced-actions > div {
  padding: 0 12px 12px 12px;
}

.advanced-actions button {
  font-size: 12px;
  padding: 6px 8px;
  font-weight: 600;
  background: #666;
}

.advanced-actions button:hover {
  background: #555;
}

/* Relationships panel styling */
#relationships-content {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--border-color);
}

#relationships-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

#relationships-content li {
  margin-bottom: 4px;
}

#relationships-content strong {
  color: var(--text-primary);
}

/* person node (card style) */
.person {
  position: absolute;
  width:150px;
  text-align: center;
  cursor: grab;
  user-select: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 8px 14px 8px;
  box-shadow: 0 6px 18px rgba(20,30,40,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.person .img-wrap {
  width:96px;
  height:96px;
  margin-top:6px;
  border-radius:8px;
  overflow:hidden;
  border:4px solid #4aa3e0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
}
.person img { width:100%; height:100%; object-fit:cover; display:block; }
/* shapes */
.img-wrap.shape-square { border-radius:8px; }
.img-wrap.shape-circle { border-radius:50%; }
.person .label { display:block; font-size:13px; margin-top:10px; color:var(--text-primary); font-weight:700; }
.person .badges { position:absolute; right:8px; top:8px; display:flex; gap:6px; }
.badge { padding:4px 6px; font-size:12px; border-radius:8px; background:rgba(0,0,0,0.06); color:#333; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset; }
.badge.passed { background:#222; color:#fff; }
.badge.former { background:#f6caca; color:#7a1b1b; }
.badge.sibling { background:#ffd966; color:#5a3f00; }
.badge.partner { background:#e1f5fe; color:#01579b; }
.badge.partner.passed-partner { background:#424242; color:#fff; }
.badge.partner.former-partner { background:#ffebee; color:#c62828; }

/* Pack / Herd label (inline) */
.person .pack-label { display:block; margin-top:6px; font-size:11px; color:var(--text-secondary); white-space:nowrap; }

/* Generation label (inline) */
.person .gen-label { display:block; margin-top:4px; font-size:11px; color:var(--text-secondary); font-weight:600; }

/* Status text */
.person .status-text { position:absolute; top:6px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:700; color:#d9534f; background: rgba(255,255,255,0.9); padding:2px 6px; border-radius:6px; }

/* selected state */
.person.selected .img-wrap { box-shadow:0 0 0 4px rgba(0, 0, 0, 0.2); }


/* passed/former visual states */
.person.passed .img-wrap { filter:grayscale(1) opacity(0.7); }
.person.former .img-wrap { box-shadow:0 0 0 3px rgba(195,30,30,0.08) inset; border-color:#c0392b; }

/* highlight states */
.person.highlight-ancestor .img-wrap { 
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
  border-color: #ffd700;
  border-width: 3px;
}
.person.highlight-descendant .img-wrap { 
  filter: drop-shadow(0 0 8px rgba(135, 206, 235, 0.8));
  border-color: #87ceeb;
  border-width: 3px;
}

/* multi-select visual state */
.person.multi-selected .img-wrap {
  box-shadow: 0 0 0 5px rgba(255, 1, 1, 0.18);
  border-color: #6246ea;
  transform: translateZ(0);
}

/* anchor node visual state */
.person.anchor-node .img-wrap {
  box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.4);
  border-color: #ff9800;
  border-width: 4px;
  transform: translateZ(0);
}

/* comparison selection visual state */
.person.comparing .img-wrap {
  box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.3);
  border-color: #4caf50;
  border-width: 3px;
}

/* Litter badge */
.litter-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #9b59b6;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 10;
}

/* footer hint */
#hint { position:fixed; bottom:10px; left:10px; font-size:12px; color:var(--text-secondary); background:rgba(255,255,255,0.85); padding:8px 10px; border-radius:8px; border:1px solid var(--border-color); }

/* danger style */
button.danger { background:#d9534f; }

/* multi-select toggle button */
#btn-toggle-multiselect-mode { background:#f0f0f0; color:#333; border:1px solid var(--border-color); padding:6px 10px; border-radius:6px; cursor:pointer; }
#btn-toggle-multiselect-mode.active { background:#6246ea; color:#fff; border-color:#5438d8; }

/* Theme selector styling */
#theme-selector { padding:6px 8px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-primary); cursor:pointer; }

/* Node size slider styling */
#node-size-slider { cursor:pointer; }
#node-size-display { font-weight:600; min-width:35px; }

/* sibling groups inspector list */
#sibling-groups-panel { 
  max-height:220px; overflow:auto; padding-right:6px; 
  background:var(--bg-primary); border-radius:6px;
}
.sibling-group-item { 
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; 
  border-radius:8px; background:var(--bg-tertiary); border:1px solid var(--border-color); 
}
.sibling-group-item .meta { display:flex; gap:8px; align-items:center; }
.sibling-group-item button { background:#e6eef9; border:0; padding:6px 8px; border-radius:6px; cursor:pointer; }
.sibling-group-item button.danger { background:#ffd6d6; }
.sibling-group-item .count { font-size:12px; color:var(--text-secondary); }

/* Footer */
#site-footer {
  background:var(--topbar-bg);
  border-top:1px solid var(--border-color);
  padding:12px 18px;
  text-align:center;
  font-size:12px;
  color:var(--text-secondary);
  margin-top:auto;
}
#site-footer p { margin:4px 0; }
#site-footer strong { color:var(--text-primary); }

/* Page containers */
.content-page {
  display:none;
  flex:1;
  overflow:auto;
  background:var(--bg-primary);
  color:var(--text-primary);
  flex-direction:column;
}
.content-page.active { display:flex; }
#stats-page.active, #achievements-page.active { display:block; }
#stats-page, #achievements-page { display:none; }

/* Stat cards */
.stat-card {
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:8px;
  padding:15px;
  text-align:center;
}
.stat-card h3 { margin:0 0 10px 0; font-size:14px; color:var(--text-secondary); }
.stat-card p { margin:0; }

/* responsive tweak */
@media (max-width:1000px) {
  #inspector { display:none; }
}

/* === HORSE PAGE STYLES === */
#horse-page {
  display: none;
  flex-direction: column;
  height: 100vh;
}

#horse-topbar {
  background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
  color: white;
}

#horse-topbar h1 {
  color: white;
  margin: 0;
}

#horse-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#horse-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: auto;
  background: #f8f9fa;
}

#horse-canvas {
  position: relative;
  min-height: 100%;
  min-width: 100%;
}

#horse-inspector {
  width: 320px;
  background: #f8f9fa;
  border-left: 1px solid #e0e6ea;
  padding: 0;
  overflow-y: auto;
}