/*
 * tree.css — styling for the SVG family tree rendered by tree-renderer.js.
 * Gender / deceased / TBD states are CSS classes on each .person-node group.
 *
 * @history 2026-06-08 Phase 2 — first web renderer.
 */

html, body { margin: 0; height: 100%; }

.tree-svg {
  width: 100%;
  height: 100%;
  background: #f4f5f7;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  touch-action: none;          /* let JS handle pan/zoom gestures */
  user-select: none;
}

/* ---- node card ---- */
.node-bg {
  fill: #ffffff;
  stroke: #dcdfe3;
  stroke-width: 2;
}
.gender-male   .node-bg { fill: #e8f0fe; }
.gender-female .node-bg { fill: #fdebf1; }
.gender-other  .node-bg,
.gender-unspecified .node-bg { fill: #f1f3f4; }

/* ---- avatar ---- */
.avatar-placeholder { fill: #cfd8dc; }
.gender-male   .avatar-placeholder { fill: #90caf9; }
.gender-female .avatar-placeholder { fill: #f48fb1; }

.avatar-border { stroke: #1976d2; stroke-width: 3; }
.gender-female .avatar-border { stroke: #c2185b; }
.gender-other  .avatar-border,
.gender-unspecified .avatar-border { stroke: #90a4ae; }

/* ---- deceased ---- */
.person-node.deceased .avatar-border,
.person-node.deceased .node-bg { stroke: #9e9e9e; }
.person-node.deceased { opacity: 0.9; }

/* ---- TBD placeholder ---- */
.person-node.tbd .node-bg {
  fill: #fafafa;
  stroke: #bdbdbd;
  stroke-dasharray: 10 7;
}
.person-node.tbd .avatar-placeholder { fill: #e0e0e0; }
.person-node.tbd .person-name { fill: #9e9e9e; font-style: italic; }

/* ---- text ---- */
.person-name     { fill: #1f2329; font-weight: 600; }
.person-lastname { fill: #3c4043; }
.person-years    { fill: #5f6368; }
.person-node.deceased .person-name,
.person-node.deceased .person-lastname,
.person-node.deceased .person-years { fill: #6b6b6b; }

/* ---- connection lines ---- */
.partner-line { stroke-linecap: round; }
.parent-child-line { stroke-linejoin: round; }

/* ---- instance badge ---- */
.instance-badge  { fill: #1976d2; }
.instance-number { fill: #ffffff; font-weight: 700; }

.person-node { cursor: pointer; }

/* ---- context menu (context-menu.js) ---- */
.ctx-menu {
  position: fixed; z-index: 100; min-width: 210px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px;
  font: 14px system-ui, "Segoe UI", Roboto, sans-serif;
}
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px; cursor: pointer; color: #1f2329;
}
.ctx-item:hover { background: #eef3ff; }
.ctx-item.disabled { color: #bcc1c7; cursor: default; }
.ctx-item.disabled:hover { background: transparent; }
.ctx-icon { width: 18px; text-align: center; }
.ctx-sep { height: 1px; background: #ececec; margin: 6px 4px; }

/* ---- detail panel (detail-panel.js) ---- */
.detail-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 340px; max-width: 86vw;
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,.15);
  transform: translateX(100%); transition: transform .22s ease; z-index: 90;
  display: flex; flex-direction: column;
  font: 14px system-ui, "Segoe UI", Roboto, sans-serif;
}
.detail-panel.open { transform: translateX(0); }
.dp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #eee;
}
.dp-title { font-size: 18px; font-weight: 600; color: #1f2329; }
.dp-close { border: none; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #888; }
.dp-body { padding: 16px; overflow-y: auto; }
.dp-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto 18px; overflow: hidden; background: #cfd8dc;
}
.dp-avatar.gender-male   { background: #90caf9; }
.dp-avatar.gender-female { background: #f48fb1; }
.dp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dp-row { display: flex; padding: 9px 0; border-bottom: 1px solid #f3f3f3; }
.dp-label { width: 110px; color: #5f6368; }
.dp-value { flex: 1; color: #1f2329; word-break: break-word; }

/* ---- edit modal (person-edit.js) ---- */
.edit-backdrop {
  position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center;
}
.edit-backdrop.open { display: flex; }
.edit-modal {
  background: #fff; border-radius: 12px; width: 380px; max-width: 92vw;
  max-height: 90vh; overflow-y: auto; padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  font: 14px system-ui, "Segoe UI", Roboto, sans-serif;
}
.edit-title { margin: 0 0 14px; font-size: 18px; color: #1f2329; }
.edit-field { display: block; margin-bottom: 12px; }
.edit-label { display: block; margin-bottom: 4px; color: #5f6368; font-size: 13px; }
.edit-field input, .edit-field select {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #d0d4d9; border-radius: 6px; font-size: 14px;
}
.edit-error { color: #c62828; min-height: 18px; margin: 4px 0 8px; }
.edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.edit-btn {
  padding: 8px 16px; border-radius: 6px; border: 1px solid #d0d4d9;
  background: #fff; cursor: pointer; font-size: 14px; color: #1f2329;
}
.edit-btn.primary { background: #1976d2; border-color: #1976d2; color: #fff; }
.edit-btn.danger { background: #c62828; border-color: #c62828; color: #fff; }
.edit-btn:disabled { opacity: .6; cursor: default; }

/* ---- login panel (login-panel.js) — reuses .edit-* modal styles ---- */
.login-backdrop { z-index: 200; background: rgba(15,18,40,.55); }
.login-link {
  display: inline-block; margin-top: 10px; font-size: 13px;
  color: #1976d2; text-decoration: none; cursor: pointer;
}
.login-link:hover { text-decoration: underline; }

/* ---- confirm dialog (confirm-dialog.js) ---- */
.confirm-msg { margin: 0 0 14px; color: #1f2329; line-height: 1.4; }
.confirm-check { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; color: #5f6368; }
.confirm-check input { width: auto; }

/* danger context-menu item (e.g. Delete) */
.ctx-item.danger { color: #c62828; }
.ctx-item.danger:hover { background: #fdecea; }

/* ---- trash panel (trash-panel.js) ---- */
.trash-list { margin-bottom: 8px; }
.trash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #eceff1;
}
.trash-info { flex: 1; min-width: 0; }
.trash-name { color: #1f2329; }
.trash-date { color: #9aa0a6; font-size: 12px; }
.trash-actions { display: flex; gap: 6px; flex-shrink: 0; }
.trash-actions .edit-btn { padding: 6px 10px; font-size: 13px; }
.trash-empty { color: #5f6368; padding: 8px 0; }

/* toolbar button (index.html) */
.tb-btn {
  margin-left: 8px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid #d0d4d9; background: #fff; cursor: pointer;
  font: 13px system-ui, sans-serif; color: #1f2329;
}
.tb-btn:hover { background: #f1f3f4; }