body {
	font-family: Arial, sans-serif;
	padding: 1em;
	margin: 0;
	background-color: #f9f9f9;
}
h1 {
	text-align: center;
}
input[type="text"], input[type="date"], select {
	padding: 0.3em;
	width: 100%;
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 2em;
	background-color: white;
}
th, td {
	border: 1px solid #ddd;
	padding: 0.75em;
	text-align: left;
}
th {
	background-color: #f2f2f2;
}
img.user-photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.status-true {
	color: green;
	font-weight: bold;
}
.status-false {
	color: red;
	font-weight: bold;
}
button {
	padding: 0.3em 0.6em;
	margin: 0.2em 0.4em;
}
#search {
	margin-top: 1em;
	width: 100%;
	padding: 0.5em;
	font-size: 1em;
}

.hamburger {
	position: absolute;
	top: 1em;
	right: 1em;
	display: flex;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
}
.hamburger div {
	width: 25px;
	height: 3px;
	background-color: #333;
}
.menu {
	display: none;
	position: absolute;
	top: 3.5em;
	right: 1em;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	z-index: 10;
}
.menu a {
	display: block;
	padding: 0.75em 1em;
	text-decoration: none;
	color: #333;
}
.menu a:hover {
	background-color: #eee;
}
@media (max-width: 600px) {
	table, thead, tbody, th, td, tr {
		display: block;
	}
	thead {
		display: none;
	}
	tr {
		margin-bottom: 1em;
		background-color: #fff;
		border-radius: 4px;
		padding: 1em;
	}
	td {
		border: none;
		padding: 0.5em 0;
		display: flex;
		justify-content: space-between;
	}
	td::before {
		content: attr(data-label);
		font-weight: bold;
	}
}