/* Stammbauminator Styles */
.container-wide { max-width: 1400px !important; }

.disclaimer { background: #fff3cd; border: 2px solid #ffc107; border-radius: var(--radius-md); padding: var(--space-xl); margin-bottom: var(--space-2xl); }
.disclaimer h3 { margin-top: 0; color: #856404; }
.disclaimer p { margin: var(--space-sm) 0; color: #856404; }

.section { background: var(--color-bg-elevated); border-radius: var(--radius-md); padding: var(--space-2xl); margin-bottom: var(--space-2xl); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.section h2 { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: var(--space-sm); margin-top: 0; margin-bottom: var(--space-xl); }

.form-group { margin-bottom: var(--space-lg); }
.form-group label { display: block; font-weight: var(--font-weight-bold); margin-bottom: var(--space-xs); color: var(--color-primary); }
.form-group input[type="text"], .form-group input[type="date"], .form-group select { width: 100%; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-base); background: var(--color-bg-elevated); color: var(--color-text); }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--color-primary); }

.required::after { content: " *"; color: #d32f2f; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

.hint { font-size: var(--font-size-sm); color: #666; font-style: italic; margin-top: var(--space-xs); }

/* Lists */
.person-list, .family-list { list-style: none; padding: 0; }
.person-item, .family-item { background: var(--color-accent); border-radius: var(--radius-sm); padding: var(--space-lg); margin-bottom: var(--space-md); display: flex; justify-content: space-between; align-items: center; border-left: 4px solid transparent; }
.person-item.alive { border-left-color: #27ae60; }
.person-item.dead { border-left-color: #333; }
.person-item.suspect { border-left-color: #d32f2f; }
.person-item-info, .family-item-info { flex: 1; }
.person-item-info h4, .family-item-info h4 { margin: 0 0 var(--space-xs) 0; color: var(--color-text); }
.person-item-info p, .family-item-info p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.person-item-actions, .family-item-actions { display: flex; gap: var(--space-xs); }

/* Tree Container */
.tree-container { background: white; border: 2px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-2xl); margin-top: var(--space-xl); overflow-x: auto; min-height: 400px; }
body.dark-theme .tree-container { background: var(--color-bg-elevated); }
#treeCanvas { display: block; margin: 0 auto; }
.empty-state { text-align: center; padding: var(--space-3xl); color: #999; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal-content { background: var(--color-bg); max-width: 600px; margin: 5% auto; padding: var(--space-2xl); border-radius: var(--radius-md); max-height: 80vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }
.modal-header h3 { margin: 0; color: var(--color-primary); }
.close-modal { background: none; color: #999; font-size: 1.5rem; padding: 0; width: 30px; height: 30px; line-height: 1; border: none; cursor: pointer; }
.close-modal:hover { background: none; color: #333; }

.checkbox-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-lg); }
.checkbox-item { margin-bottom: var(--space-sm); }
.checkbox-item label { font-weight: normal; cursor: pointer; display: flex; align-items: center; }
.checkbox-item input[type="checkbox"] { margin-right: var(--space-sm); width: auto; }

button.secondary { background: #6c757d; }
button.secondary:hover { background: #5a6268; }
button.danger { background: #d32f2f; }
button.danger:hover { background: #b71c1c; }