:root {
	--bg-color: #121212;
	--text-color: #e0e0e0;
	--accent-color: #38bdf8; /* Modern Blue */
	--card-bg: #1e1e1e;
	--border-color: #333;
	--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--font-main);
	margin: 0;
	padding: 20px;
	line-height: 1.6;
}

.container {
	max-width: 1300px;
	margin: 0 auto;
}

header {
	text-align: center;
	margin-bottom: 40px;
	padding: 20px;
	background-color: var(--card-bg);
	border-radius: 12px;
	border: 1px solid var(--border-color);
}

h1 {
	color: var(--accent-color);
	margin-bottom: 5px;
	font-weight: 800;
}

.subtitle {
	font-size: 1.1rem;
	color: #aaa;
	max-width: 700px;
	margin: 0 auto;
}

/* --- Input Field --- */
.controls {
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-end;
}

#searchInput {
	padding: 12px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	background-color: var(--card-bg);
	color: var(--text-color);
	font-size: 1rem;
	width: 100%;
	max-width: 400px;
}

/* --- Table Styling --- */
.table-container {
	overflow-x: auto; /* Responsive overflow */
	background-color: var(--card-bg);
	border-radius: 12px;
	border: 1px solid var(--border-color);
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

thead {
	background-color: #1a1a1a;
}

th, td {
	text-align: left;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-color);
}

th {
	color: var(--accent-color);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	cursor: pointer; /* Clickable headers */
	user-select: none;
}

tr:hover td {
	background-color: rgba(56, 189, 248, 0.03);
}

tr:last-child td {
	border-bottom: none;
}

/* --- Data Specific Styling --- */
.os-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block; /* Prevents tiny gaps below the image */
    margin: 0 auto; /* Centers it in the 50px column */
}

.os-name { font-weight: bold; font-size: 1rem; color: #fff; }
.family { color: #aaa; }
.purpose { font-size: 0.85rem; color: #ddd; }
.license { font-size: 0.8rem; padding: 4px 8px; background: #333; border-radius: 4px; color: #eee;}

.cost-free { color: #a3e635; font-weight: bold;} /* Green */
.cost-limited { color: #f87171; font-weight: bold; } /* Red */

/* Cost link styling */
.cost-link {
    color: inherit;
	font-weight: bold;
    text-decoration: underline;
}

.cost-link:hover {
    cursor: pointer;
}

.release-date { font-family: var(--font-mono); color: #ccc;}
.release { font-family: var(--font-mono); color: #fff; }

/* Release version link styling */
.release-link {
    color: inherit;
    font-weight: bold;
    text-decoration: underline;
}

.release-link:hover {
    cursor: pointer;
}

.links-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem;}
.links-list li { margin-bottom: 4px; }
.links-list a { color: var(--accent-color); text-decoration: none; }
.links-list a:hover { text-decoration: underline; }

/* Mobile View (Stacking) */
@media (max-width: 900px) {
	.container { padding: 10px; }
	table, thead, tbody, th, td, tr { display: block; }
	thead tr { position: absolute; top: -9999px; left: -9999px; }
	tr { border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 15px; padding: 10px; }
	td { border: none; position: relative; padding-left: 45%; }
	td:before {
		position: absolute; left: 15px; top: 15px;
		width: 40%; padding-right: 10px; white-space: nowrap;
		color: var(--accent-color); font-weight: 600; text-transform: uppercase; font-size: 0.75rem;
	}
	/* Map data labels to columns for mobile */
	td:nth-of-type(1):before { content: "OS Name"; }
	td:nth-of-type(2):before { content: "Family"; }
	td:nth-of-type(3):before { content: "Usage"; }
	td:nth-of-type(4):before { content: "Latest Vers."; }
	td:nth-of-type(5):before { content: "Rel. Date"; }
	td:nth-of-type(6):before { content: "License"; }
	td:nth-of-type(7):before { content: "Cost"; }
	td:nth-of-type(8):before { content: "Links"; }
}