:root {
	--bg-color: #121212;
	--surface-color: #1e1e1e;
	--primary-text: #e0e0e0;
	--secondary-text: #a0a0a0;
	--accent-color: #4CAF50;
	--border-color: #333333;
	--death-color: #b71c1c;
}

/* --- Page Layout --- */
.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem;
}

.header-image {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 3rem;
	border: 1px solid var(--border-color);
}

/* --- Journal Entries Timeline --- */
.journal-entries {
	position: relative;
	/* Creates the timeline bar on the left */
	border-left: 2px solid var(--border-color);
	padding-left: 2rem;
}

.journal-entry {
	background-color: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	position: relative;
}

/* Creates the dot on the timeline bar */
.journal-entry::before {
	content: '';
	position: absolute;
	left: -2.5rem; /* (padding-left of parent) + (width of dot / 2) */
	top: 2rem;
	height: 10px;
	width: 10px;
	background: var(--secondary-text);
	border-radius: 50%;
	border: 2px solid var(--bg-color);
}

.entry-header {
	margin-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 0.75rem;
}

.entry-header h2 {
	margin: 0;
	font-size: 1.5rem;
	color: var(--accent-color);
	font-weight: 500;
}

.entry-header .date {
	margin: 0;
	color: var(--secondary-text);
	font-size: 0.9rem;
}

.entry-body p {
	line-height: 1.6;
	margin: 0;
}

/* --- Special Entry Types --- */

/* Add a 💵 emoji for sold */
.Sold h2::before { content: '💵'; }

/* Add a 💸 emoji for purchase */
.Purchase h2::before { content: '💸'; }

/* Add a ✂️ emoji for pruning */
.Pruning h2::before { content: '✂️'; }

/* Add a 🪴 emoji for repotting */
.Repotting h2::before { content: '🪴'; }

/* Add a 💩 emoji for fertilizing */
.Fertilization h2::before { content: '💩'; }

/* Add a ✨ emoji for styling */
.Styling h2::before { content: '✨'; }

/* Add a ⛏️ emoji for collection */
.Collection h2::before { content: '⛏️'; }

/* Add a 📸️ emoji for photo */
.Photo h2::before { content: '📸'; }

/* Special style for a 'death' entry */
.Death {
	border-color: var(--death-color);
}
.Death h2 {
	color: var(--death-color);
}
.Death h2::before {
	content: '🪦';
}
.Death::before {
	background-color: var(--death-color);
}

.entry-with-image .entry-body {
    display: flex; /* Aligns children (image and text) side-by-side */
    align-items: flex-start; /* Aligns items to the top */
    gap: 1.5rem; /* Creates space between the image and the text */
}

.entry-with-image .entry-image {
	flex-shrink: 0; /* Prevents the image from shrinking */
	width: 200px; /* Sets a fixed width for the image */
	position: relative;
}

.entry-with-image .entry-image img {
	width: 100%; /* Makes the image fill its container */
	height: auto; /* Maintains the aspect ratio */
	border-radius: 6px;
	display: block; /* Removes any extra space below the image */
	object-fit: cover; /* Ensures the image covers the area without distortion */
}

.entry-with-image .entry-text {
    flex-grow: 1; /* Allows the text block to take up the remaining space */
}

/* --- Responsive adjustment for smaller screens --- */
@media (max-width: 600px) {
    .entry-with-image .entry-body {
        flex-direction: column; /* Stacks the image on top of the text */
    }

    .entry-with-image .entry-image {
        width: 100%; /* Makes the image full-width on small screens */
        margin-bottom: 1rem;
    }
}

.journal-actions {
	text-align: right;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 2rem;
}

/* Style for the textarea in the modal */
.form-group textarea {
	width: 100%;
	padding: 0.75rem;
	background-color: #2c2c2c;
	border: 1px solid var(--border-color, #333333);
	border-radius: 6px;
	color: var(--primary-text, #e0e0e0);
	font-size: 1rem;
	box-sizing: border-box;
	font-family: inherit;
	resize: vertical;
}

	.form-group textarea:focus {
		outline: none;
		border-color: var(--accent-color, #4CAF50);
	}

/* Style for the select dropdown in the modal */
.form-group select {
	width: 100%;
	padding: 0.75rem;
	background-color: #2c2c2c;
	border: 1px solid var(--border-color, #333333);
	border-radius: 6px;
	color: var(--primary-text, #e0e0e0);
	font-size: 1rem;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0a0a0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right .7em top 50%;
	background-size: .65em auto;
}

.btn-make-default {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	border: none;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 0.8rem;
	cursor: pointer;
	opacity: 0; /* Hidden by default */
	transition: opacity 0.2s ease-in-out;
}

/* Show the button on hover */
.entry-with-image:hover .btn-make-default {
	opacity: 1;
}

.btn-make-default:hover {
	background-color: var(--accent-color);
}

.default-indicator {
	position: absolute;
	top: 8px;
	right: 8px;
	background-color: var(--accent-color);
	color: white;
	padding: 3px 6px;
	font-size: 0.75rem;
	font-weight: bold;
	border-radius: 4px;
}