[x-cloak] { display: none !important; }
body { font: 14px/1.5 Arial, sans-serif; margin: 0; background: #f4f5f7; color: #222; }
header { background: #2DBDB6; color: #fff; padding: 10px 20px; }
header h1 { font-size: 18px; margin: 0; display: inline-block; }
header h1 a { color: #fff; text-decoration: none; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header .who { font-size: 13px; opacity: .95; }
main { max-width: 1150px; margin: 20px auto; padding: 0 20px 48px; }
.msg { padding: 8px 14px; border-radius: 4px; margin-bottom: 12px; }
.msg.error { background: #fdecea; color: #a33; border: 1px solid #f5c6cb; }
.msg.notice { background: #e6f9f1; color: #176; border: 1px solid #b3e6d2; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type=text], .toolbar select { padding: 6px 8px; border: 1px solid #c8ccd1; border-radius: 3px; }
.toolbar input[type=text] { width: 220px; max-width: 100%; }
.toolbar .count { color: #666; font-size: 12px; margin-left: auto; }
.toolbar .sort-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.ok { color: #080; font-weight: bold; }
.missing { color: #c00; font-size: 12px; }
button { background: #2DBDB6; color: #fff; border: 0; padding: 7px 16px; cursor: pointer; border-radius: 3px; font-size: 13px; }
button.danger { background: #c0392b; }
button.ghost { background: transparent; color: #2DBDB6; border: 1px solid #2DBDB6; }
button:disabled { opacity: .5; cursor: default; }
form.bar { background: #fff; padding: 16px 20px; border-radius: 4px; margin-bottom: 16px; border: 1px solid #e3e5e8; }
form.bar.login { max-width: 380px; margin: 60px auto; }
form.bar.pw { max-width: 560px; }
form.bar label { display: inline-block; width: 130px; font-size: 13px; vertical-align: top; padding-top: 6px; }
form.bar input[type=text], form.bar input[type=password], form.bar select, form.bar textarea {
	width: 300px; max-width: calc(100% - 140px); padding: 5px; border: 1px solid #c8ccd1; border-radius: 3px; font-size: 13px;
}
form.bar input:disabled { background: #f0f1f3; color: #666; }
form.bar .row { margin-bottom: 8px; }
form.bar label.inline { width: auto; padding-top: 2px; vertical-align: middle; }
.photo-current-controls { display: inline-flex; align-items: center; gap: 12px; vertical-align: middle; }
form.bar .photo-current img.thumb { display: block; }
.hint { color: #777; font-size: 12px; }
.pager {
	margin-top: 16px;
	display: flex;
	gap: 0;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-wrap: wrap;
}
.pager-status { margin: 0 16px; color: #555; }
.leaving { display: block; color: #c0392b; font-size: 11px; font-weight: normal; }
.del-panel { border: 1px solid #f5c6cb; background: #fdf3f3; border-radius: 4px; padding: 8px 10px; margin-top: 10px; font-size: 12px; }
.del-panel .del-line { margin: 5px 0; }
.del-panel label { width: auto; display: inline-block; padding-top: 0; }
.del-panel label.inline { display: inline; }
.del-panel input[type=date] { padding: 3px; border: 1px solid #c8ccd1; border-radius: 3px; }
img.thumb { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; display: block; }
form.bar img.thumb { height: 48px; width: 48px; }

/* Staff cards */
.staff-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.staff-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
	padding: 12px 14px;
	min-width: 0;
	box-sizing: border-box;
}
.staff-card-main {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	flex: 1 1 auto;
}
.staff-card-photo { flex: 0 0 auto; width: 40px; min-height: 40px; }
.staff-card-body { flex: 1 1 auto; min-width: 0; }
.staff-card-name { font-size: 15px; font-weight: bold; }
.staff-card-name a { color: inherit; text-decoration: none; }
.staff-card-name a:hover { color: #2DBDB6; text-decoration: underline; }
.staff-card-title { color: #444; font-size: 13px; margin-top: 2px; word-break: break-word; }
.staff-card-meta { color: #666; font-size: 12px; margin-top: 4px; word-break: break-word; }
.staff-card .actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	margin-left: 4px;
	font-size: 12px;
	line-height: 1.75;
	text-align: center;
}
.staff-card-slug {
	font-size: 12px;
	line-height: 1.75;
	color: #888;
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}
.staff-card .action-links {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}
.staff-card .action-link {
	display: block;
	text-align: center;
	font-size: 12px;
	line-height: 1.75;
	color: #2DBDB6;
	text-decoration: none;
	padding: 0;
}
.staff-card .action-link:hover { text-decoration: underline; }
.staff-card .action-link.danger { color: #c0392b; }
.staff-empty {
	grid-column: 1 / -1;
	color: #888;
	padding: 20px;
	text-align: center;
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
}

/* Footer */
.admin-footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 10px 20px;
	align-items: center;
	margin-top: 28px;
	padding: 10px 0;
	border-top: 1px solid #dde0e4;
	color: #777;
	font-size: 12px;
}
.admin-footer-meta { justify-self: start; }
.admin-footer-credit {
	justify-self: center;
	text-align: center;
	color: #999;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.admin-footer a,
.admin-footer button.link {
	background: none;
	border: 0;
	padding: 0;
	color: #2DBDB6;
	cursor: pointer;
	font-size: 12px;
	text-decoration: underline;
}
.admin-footer-links {
	justify-self: end;
	display: flex;
	gap: 16px;
	align-items: center;
}

@media (max-width: 960px) {
	.staff-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	main { padding: 0 12px 48px; margin-top: 12px; }
	.toolbar .count { margin-left: 0; width: 100%; }
	.staff-list { grid-template-columns: 1fr; }
	form.bar label {
		display: block;
		width: auto;
		padding-top: 0;
		margin-bottom: 4px;
	}
	form.bar input[type=text], form.bar input[type=password], form.bar select, form.bar textarea {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.admin-footer {
		grid-template-columns: 1fr;
		justify-items: start;
	}
	.admin-footer-meta,
	.admin-footer-credit,
	.admin-footer-links { justify-self: start; }
}