/* Header for the file table (Last Commit Info) */
.last_commit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background-color: #f6f8fa;
	border: 1px solid #e1e4e8;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom: none;
	font-size: 13px;
	color: #24292e;

	.last_commit_message {
		color: #586069;
		margin-left: 8px;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.last_commit_hash {
		font-family: monospace;
		color: #24292e;
		background-color: transparent;
		margin: 0 10px;
		font-size: 12px;
	}

	.time {
		color: #6a737d;
		white-space: nowrap;
	}
}

/* The File List Container */
.files {
	border: 1px solid #e1e4e8;
	border-radius: 6px;
	margin-bottom: 20px;
}

/* Individual File Row */
.file {
	display: grid;
	/* Grid: Icon | Name | Message | Date */
	grid-template-columns: 20px minmax(150px, 25%) 1fr 140px;
	align-items: center;
	padding: 8px 16px;
	border-top: 1px solid #e1e4e8;
	font-size: 14px;
	line-height: 20px;
	color: #24292e;
	background-color: #fff;
	transition: background-color 0.1s;

	&:hover {
		background-color: #f6f8fa;
	}

	/* Adjustments for first item if not using the last_commit header div
	   but assuming .files contains .last_commit followed by divs
	*/
	&:last-child {
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
	}
}

.files--with-size .file {
	grid-template-columns: 20px minmax(150px, 25%) 1fr 140px 90px;
}

.files--with-size .file-size {
	grid-column: 5;
}

.file.file-total {
	grid-template-columns: 1fr auto;

	&:hover {
		background-color: #fff;
		cursor: default;
	}

	.file-size {
		grid-column: 2;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: #24292e !important;
		font-size: 14px;

		svg {
			fill: currentColor;
			color: #6a737d;
			width: 14px;
			height: 14px;
		}

		b {
			font-weight: 600;
		}
	}
}

.files--with-size .file.file-total {
	grid-template-columns: 1fr auto;

	.file-size {
		grid-column: 2;
	}
}

.files--top-files .file {
	grid-template-columns: 20px minmax(0, 1fr) 110px;
}

.top-files-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background-color: #f6f8fa;
	border-bottom: 1px solid #e1e4e8;
	font-size: 13px;
	color: #24292e;

	span {
		color: #6a737d;
	}
}

.top-files-empty {
	padding: 16px;
	color: #6a737d;
	background: #fff;
}

/* Responsive Grid for Mobile */
@media (max-width: 768px) {
	.file {
		grid-template-columns: 20px 1fr;
		gap: 5px;
	}
	.files--with-size .file {
		grid-template-columns: 20px 1fr;
	}
	.files--top-files .file {
		grid-template-columns: 20px 1fr;
	}
	.file-msg, .file-size, .file-time { display: none; }
}

/* Icon */
.file-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #79b8ff; /* Folder blue */

	svg {
		fill: currentColor;
		width: 14px;
		height: 14px;
	}
}

/* File Name */
.file-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 10px;

	a {
		color: #24292e !important;
		font-weight: 400;

		&:hover {
			color: #0366d6 !important;
			text-decoration: underline;
		}
	}
}

/* Commit Message */
.file-msg {
	color: #6a737d !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 10px;

	a {
		color: #6a737d;
		&:hover { color: #0366d6; }
	}
}

/* Folder size */
.file-size {
	color: #6a737d !important;
	text-align: right;
	font-size: 13px;
	white-space: nowrap;
}

/* Time */
.file-time {
	color: #6a737d !important;
	text-align: right;
	font-size: 13px;
	padding-right: 10px;
}