/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f3ee; color: #1f2933; -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

.hidden { display: none !important; }

/* ---------- Login ---------- */
.login-screen { position: fixed; inset: 0; background: linear-gradient(135deg, #6b8e6f 0%, #4a7280 100%); display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; padding: 32px 28px; border-radius: 14px; width: 100%; max-width: 360px; box-shadow: 0 24px 60px rgba(0,0,0,.2); text-align: center; }
.login-card h1 { font-size: 28px; margin-bottom: 4px; }
.login-card .subtitle { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
.login-card input { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid #d1d5db; border-radius: 8px; margin-bottom: 12px; }
.login-card input:focus { outline: none; border-color: #4a7280; box-shadow: 0 0 0 3px rgba(74,114,128,.2); }
.login-card button { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; background: #4a7280; color: white; border-radius: 8px; transition: background .15s; }
.login-card button:hover { background: #3d6271; }
.login-card .error { color: #c0392b; font-size: 13px; margin-top: 10px; min-height: 16px; }

/* ---------- App shell ---------- */
.app { display: flex; flex-direction: column; height: 100vh; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.03); position: relative; z-index: 100; }
.brand { font-weight: 600; cursor: pointer; white-space: nowrap; }
.admin-badge { display: inline-flex; align-items: center; padding: 4px 10px; background: linear-gradient(135deg, #4a5568, #2d3748); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(45,55,72,.2); }

/* Admin panel — modal grows wider and tabs stick to the top while content scrolls */
.modal-card:has(.admin-panel) { max-width: 920px; padding: 24px 28px; }
.admin-panel { display: flex; flex-direction: column; }
.admin-panel > h2 {
    margin: 0 0 8px;
    position: sticky; top: 0; background: #fff; z-index: 6;
    padding-right: 40px; /* leave room for modal-close button */
}
.admin-tabs {
    display: flex; gap: 4px; border-bottom: 1px solid #e5e7eb;
    margin: 0 -28px; padding: 6px 28px 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: sticky; top: 40px; background: #fff; z-index: 5;
}
.admin-tabs button {
    padding: 12px 18px; font-size: 13px; font-weight: 500; color: #6b7280;
    background: transparent; border-bottom: 2px solid transparent;
    white-space: nowrap; border-radius: 0; margin-bottom: -1px; letter-spacing: .01em;
}
.admin-tabs button:hover { color: #1f2933; }
.admin-tabs button.active { color: #4a7280; border-bottom-color: #4a7280; }
.admin-tab-content { padding: 20px 2px 4px; }
.admin-empty { padding: 40px 20px; color: #9ca3af; text-align: center; font-size: 14px; }
.admin-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; background: #fff; }
.admin-row-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
.admin-section { margin-bottom: 24px; padding: 16px; background: #faf8f3; border-radius: 10px; }
.admin-section h3 { font-size: 14px; margin-bottom: 8px; color: #1f2933; }
.admin-section .admin-help { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
.admin-section input { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.admin-stat-tile { padding: 14px; background: #faf8f3; border-radius: 10px; }
.admin-stat-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.admin-stat-value { font-size: 24px; font-weight: 600; color: #1f2933; }
.admin-stat-sub { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.admin-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.admin-bar-label { flex: 0 0 200px; font-size: 12px; color: #4b5563; }
.admin-bar-bg { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.admin-bar-fg { height: 100%; background: linear-gradient(90deg, #6b8e6f, #4a7280); border-radius: 4px; }
.admin-bar-pct { flex: 0 0 40px; font-size: 12px; color: #6b7280; text-align: right; }
.admin-recent-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.admin-recent-row:last-child { border-bottom: none; }
.admin-audit-log { max-height: 500px; overflow-y: auto; }
.admin-audit-row { display: grid; grid-template-columns: 140px 140px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; align-items: center; }
.admin-audit-row:last-child { border-bottom: none; }
.admin-audit-time { font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.admin-audit-meta { display: flex; gap: 6px; align-items: center; }
.admin-audit-action { color: #4b5563; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; }
.admin-audit-summary { color: #1f2933; }
.admin-role-tag { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.admin-role-tag.family { background: #d1e5da; color: #2f6b4a; }
.admin-role-tag.admin { background: #4a5568; color: #fff; }
.admin-role-tag.anonymous { background: #e5e7eb; color: #6b7280; }
@media (max-width: 600px) {
    .admin-audit-row { grid-template-columns: 1fr; gap: 4px; }
    .admin-bar-label { flex: 0 0 auto; }
}
.search-wrap { flex: 1; position: relative; max-width: 420px; }
.search-wrap input { width: 100%; padding: 9px 14px; font-size: 15px; border: 1px solid #d1d5db; border-radius: 999px; background: #f9fafb; }
.search-wrap input:focus { outline: none; border-color: #4a7280; background: #fff; }
.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 320px; overflow-y: auto; z-index: 110; }
.search-result { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: #f9fafb; }
.search-result-name { font-weight: 500; }
.search-result-meta { font-size: 12px; color: #6b7280; }
.topbar-actions { display: flex; gap: 6px; align-items: center; }
.topbar-actions button { padding: 8px 12px; border-radius: 8px; background: #f3f4f6; font-size: 14px; font-weight: 500; }
.topbar-actions button:hover { background: #e5e7eb; }
#add-person-btn { background: #4a7280; color: white; }
#add-person-btn:hover { background: #3d6271; }
#fit-btn { padding: 8px 10px; font-size: 16px; }

.main { flex: 1; display: flex; overflow: hidden; position: relative; }

/* ---------- Tree canvas ---------- */
.tree-canvas { flex: 1; position: relative; overflow: hidden; background:
    radial-gradient(circle at 20% 20%, rgba(107,142,111,.05) 0, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(74,114,128,.05) 0, transparent 50%),
    #faf8f3;
    cursor: grab;
}
.tree-canvas.dragging { cursor: grabbing; }
#tree-svg { display: block; user-select: none; }
.canvas-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #9ca3af; background: rgba(255,255,255,.7); padding: 6px 12px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(8px); }

/* Tree node visuals — modernized */
.tree-node { cursor: pointer; transition: filter .18s ease-out; }
.tree-node:hover { filter: drop-shadow(0 6px 16px rgba(31,41,51,.14)); }
.tree-node-card { fill: #fff; stroke: #e2e8f0; stroke-width: 1.25; rx: 12; }
.tree-node.selected .tree-node-card { stroke: #4a7280; stroke-width: 3; }
.tree-node.deceased .tree-node-card { fill: #dfe8f2; stroke: #a8bcd0; }
.tree-node-photo { stroke: #e5e7eb; stroke-width: 1; }
.tree-node-name { font-size: 14px; font-weight: 600; fill: #1f2933; text-anchor: middle; }
.tree-node-dates { font-size: 11px; fill: #6b7280; text-anchor: middle; }
/* Connection lines — modern, rounded, cleaner */
.tree-link { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tree-link.parent-line   { stroke: #64748b; }  /* single parent → child curve (no bus) */
.tree-link.parent-drop   { stroke: #64748b; }  /* parent couple → T junction — ENDS here */
.tree-link.sibling-bus   { stroke: #b8926a; }  /* inverse-U crossbar between siblings */
.tree-link.child-drop    { stroke: #b8926a; }  /* inverse-U vertical to each child */
.tree-link.spouse        { stroke: #c47b8f; stroke-dasharray: 5 4; stroke-width: 1.75; }

/* Wider invisible hit target behind every link — makes hover forgiving */
.tree-link-hit { pointer-events: stroke; cursor: pointer; }

.tree-link { transition: stroke-width .12s, filter .12s; }
.tree-link-hover { stroke-width: 4 !important; filter: brightness(0.75); }
.link-tooltip { position: fixed; background: #1f2933; color: white; padding: 6px 10px; border-radius: 6px; font-size: 12px; pointer-events: none; z-index: 400; box-shadow: 0 4px 12px rgba(0,0,0,.15); white-space: nowrap; display: none; }

/* Legend — modern floating panel */
.legend { position: absolute; bottom: 20px; right: 20px; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.6); border-radius: 14px; padding: 12px 16px; font-size: 12px; z-index: 50; box-shadow: 0 8px 32px rgba(31,41,51,.08), 0 2px 8px rgba(31,41,51,.04); user-select: none; }
.legend h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: 10px; font-weight: 600; }
.legend-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; color: #334155; }
.legend-row:last-child { margin-bottom: 0; }
.legend-swatch { width: 24px; height: 2.5px; border-radius: 2px; flex-shrink: 0; }
.legend-swatch.parent  { background: #64748b; }
.legend-swatch.sibling { background: #b8926a; }
.legend-swatch.spouse  { background-image: linear-gradient(90deg, #c47b8f 5px, transparent 5px, transparent 9px, #c47b8f 9px, #c47b8f 14px, transparent 14px, transparent 18px, #c47b8f 18px); background-size: 100% 100%; }
.legend-node { display: inline-block; width: 24px; height: 14px; border-radius: 4px; flex-shrink: 0; border: 1.5px solid #d1d5db; background: #fff; }
.legend-node.deceased { background: #dfe8f2; border-color: #a8bcd0; }
@media (max-width: 600px) {
    .legend { bottom: 12px; right: 12px; padding: 10px 12px; font-size: 11px; }
}

/* Empty state on canvas */
.canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #6b7280; text-align: center; padding: 20px; }
.canvas-empty h2 { font-size: 22px; color: #374151; }
.canvas-empty button { padding: 10px 18px; background: #4a7280; color: white; border-radius: 8px; font-weight: 500; }

/* ---------- Side panel ---------- */
.side-panel { width: 380px; max-width: 100%; background: #fff; border-left: 1px solid #e5e7eb; overflow-y: auto; box-shadow: -4px 0 16px rgba(0,0,0,.04); display: flex; flex-direction: column; }
.side-panel-header { display: flex; justify-content: flex-end; padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
.icon-btn { width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #6b7280; }
.icon-btn:hover { background: #f3f4f6; color: #1f2933; }
#side-panel-body { padding: 0 20px 24px; flex: 1; }
.person-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 20px; border-bottom: 1px solid #f3f4f6; margin-bottom: 18px; }
.person-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #e5e7eb; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.person-photo-placeholder { width: 96px; height: 96px; border-radius: 50%; background: #d1d5db; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; font-weight: 600; }
.person-name { font-size: 20px; font-weight: 600; text-align: center; }
.person-tagline { font-size: 13px; color: #6b7280; text-align: center; }
.person-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.person-actions button { padding: 7px 12px; background: #f3f4f6; border-radius: 7px; font-size: 13px; font-weight: 500; }
.person-actions .primary { background: #4a7280; color: white; }
.person-actions button:hover { background: #e5e7eb; }
.person-actions .primary:hover { background: #3d6271; }

.detail-section { margin-bottom: 22px; }
.detail-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: 10px; font-weight: 600; }
.detail-row { display: flex; padding: 4px 0; font-size: 14px; }
.detail-label { width: 130px; flex-shrink: 0; color: #6b7280; }
.detail-value { flex: 1; color: #1f2933; }
.detail-value.notes { white-space: pre-wrap; line-height: 1.5; background: #faf8f3; padding: 10px 12px; border-radius: 8px; border-left: 3px solid #6b8e6f; }
.detail-empty { color: #9ca3af; font-style: italic; font-size: 13px; }

.relatives-list { display: flex; flex-direction: column; gap: 6px; }
.relative-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.relative-item:hover { background: #f9fafb; }
.relative-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e5e7eb; }
.relative-name { font-weight: 500; font-size: 14px; }
.relative-rel { font-size: 12px; color: #6b7280; }
.relative-add { padding: 8px; border: 1px dashed #d1d5db; border-radius: 8px; text-align: center; color: #6b7280; font-size: 13px; cursor: pointer; transition: all .12s; }
.relative-add:hover { background: #f9fafb; border-color: #4a7280; color: #4a7280; }
.relative-add-mini { padding: 3px 8px; font-size: 11px; font-weight: 500; color: #4a7280; background: transparent; border: 1px solid #d1d5db; border-radius: 6px; }
.relative-add-mini:hover { background: #4a7280; color: white; border-color: #4a7280; }
.relative-item { padding-right: 4px; }

/* Photo gallery */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photo-thumb { aspect-ratio: 1; border-radius: 6px; background-size: cover; background-position: center; cursor: pointer; position: relative; overflow: hidden; background-color: #e5e7eb; }
.photo-thumb.is-main::after { content: '⭐'; position: absolute; top: 4px; right: 4px; font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.photo-upload { aspect-ratio: 1; border: 2px dashed #d1d5db; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #6b7280; cursor: pointer; transition: all .15s; }
.photo-upload:hover { border-color: #4a7280; color: #4a7280; }

/* Attachments */
.attachment-list { display: flex; flex-direction: column; gap: 6px; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: #faf8f3; border-radius: 8px; }
.attachment-icon { font-size: 22px; }
.attachment-info { flex: 1; min-width: 0; }
.attachment-title { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta { font-size: 11px; color: #6b7280; }
.attachment-actions { display: flex; gap: 4px; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; backdrop-filter: blur(4px); }
.modal-card { background: #fff; border-radius: 14px; max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.modal-close { position: absolute; top: 10px; right: 10px; }
.modal h2 { margin-bottom: 18px; font-size: 22px; }

/* Forms */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: #4b5563; margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #4a7280; box-shadow: 0 0 0 3px rgba(74,114,128,.15); }
.form-group textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-group .hint { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.form-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
.form-section:last-child { border-bottom: none; }
.form-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: 12px; font-weight: 600; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.form-section h3::after { content: '▼'; font-size: 9px; transition: transform .15s; }
.form-section.collapsed h3::after { transform: rotate(-90deg); }
.form-section.collapsed > *:not(h3) { display: none; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-primary { padding: 10px 20px; background: #4a7280; color: white; border-radius: 8px; font-weight: 500; }
.btn-primary:hover { background: #3d6271; }
.btn-secondary { padding: 10px 20px; background: #f3f4f6; color: #374151; border-radius: 8px; font-weight: 500; }
.btn-secondary:hover { background: #e5e7eb; }
.btn-danger { padding: 10px 20px; background: #fee2e2; color: #991b1b; border-radius: 8px; font-weight: 500; }
.btn-danger:hover { background: #fecaca; }

/* Dedupe warning */
.dedupe-warning { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.dedupe-warning h4 { font-size: 14px; color: #92400e; margin-bottom: 6px; }
.dedupe-match { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.dedupe-match button { color: #4a7280; font-size: 12px; text-decoration: underline; }

/* Photo viewer */
.photo-viewer { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.photo-viewer-img-wrap { position: relative; max-width: 100%; max-height: 60vh; }
.photo-viewer-img { max-width: 100%; max-height: 60vh; display: block; border-radius: 8px; cursor: crosshair; }
.photo-tag { position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px; border: 2px solid #fff; border-radius: 50%; background: rgba(74,114,128,.7); cursor: pointer; transition: all .15s; }
.photo-tag.pending { background: rgba(217, 119, 6, .8); }
.photo-tag-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(0,0,0,.8); color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.photo-tag:hover .photo-tag-label { opacity: 1; }

/* Menu */
.menu { position: absolute; top: 56px; right: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 6px; min-width: 240px; z-index: 150; }
.menu-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 6px; font-size: 14px; }
.menu-item:hover { background: #f3f4f6; }
#unresolved-count { background: #ef4444; color: white; padding: 2px 7px; border-radius: 999px; font-size: 11px; margin-left: 6px; }
#unresolved-count:empty { display: none; }

/* Toast */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1f2933; color: white; padding: 12px 20px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 300; opacity: 0; transition: opacity .25s; }
.toast.show { opacity: 1; }
.toast.error { background: #b91c1c; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
    .topbar { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
    .brand { font-size: 15px; }
    .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
    .topbar-actions button { padding: 7px 10px; font-size: 13px; }
    .side-panel { position: absolute; inset: 0; width: 100%; z-index: 90; }
    .menu { right: 10px; left: 10px; min-width: auto; }
    .modal-card { padding: 20px 18px; }
    .form-row { flex-direction: column; gap: 0; }
}