/* Body Styling & Background */
body {
	font-family: 'ff-dax-pro', sans-serif;
	background-color: #01132b; 
	background-image: url('https://www.iblsoft.com/wp-content/uploads/ibl-img-header-bg.jpeg');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-blend-mode: lighten;
	color: #97aac4;
	margin: 0;
	padding: 50px 20px; /* Provides breathing room on top and sides */
	display: flex;
	justify-content: center; /* Centers the main wrapper on large screens */
	min-height: 100vh;
	box-sizing: border-box;
}

/* --- NEW: Main Page Wrapper --- */
/* This container holds everything and controls the stacking order/spacing */
.page-wrapper {
	width: 100%;
	max-width: 1400px; /* Limits maximum width so it doesn't stretch too far on big monitors */
	display: flex;
	flex-direction: column;
	gap: 35px; /* Creates perfect, even spacing between the Header, Powered By, and Catalogue */
}

/* --- Header Div Positioning --- */
.oxy-header-left {
	display: flex;
	align-items: center;
	/* Removed absolute positioning so it flows naturally */
}

/* Vertical line divider and text spacing */
#div_block-9-15 {
	margin-left: 30px;
	padding-left: 30px;
	border-left-color: #97aac4;
	border-left-width: 1px;
	border-left-style: solid;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* IBL Logo image sizing */
.ct-image {
	max-width: 90px;
	height: auto;
}

/* Text next to the logo */
.logo-text {
	font-size: 14px;
	line-height: 1.4;
	color: #97aac4;
}

/* --- Powered By Styling --- */
.powered-by-footer {
	display: flex;
	align-items: center;
	gap: 15px; 
	/* Removed absolute positioning */
}

.powered-by-footer span {
	font-size: 14px;
	color: #97aac4; 
}

.powered-by-footer img {
	height: 35px; 
	width: auto;
	transition: opacity 0.3s ease; 
}

.powered-by-footer a:hover img {
	opacity: 0.7; 
}

/* --- Catalogue Container Styles --- */
.catalogue-container {
	background-color: rgba(1, 19, 43, 0.9); 
	padding: 40px;
	border-radius: 12px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
	width: 100%;
	border: 1px solid #1a365d;
	box-sizing: border-box;
}

.catalogue-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
	flex-wrap: wrap;
	gap: 20px;
}

.catalogue-header h1 {
	color: #ffffff;
	margin: 0;
	font-size: 28px;
}

.catalogue-header p {
	font-size: 16px;
	margin: 5px 0 0 0;
}

/* --- Search Bar Styling --- */
.search-container {
	flex-grow: 1;
	max-width: 400px;
}

#searchInput {
	width: 100%;
	padding: 12px 16px;
	background-color: #0a1c32;
	border: 1px solid #1a365d;
	border-radius: 8px;
	color: #ffffff;
	font-size: 15px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
}

#searchInput::placeholder {
	color: #5a7391;
}

#searchInput:focus {
	border-color: #63b3ed;
	box-shadow: 0 0 8px rgba(99, 179, 237, 0.2);
}

/* --- Table Formatting --- */
.table-responsive {
	overflow-x: auto; 
}

table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 14px;
}

th, td {
	padding: 14px 18px;
	border-bottom: 1px solid #1a365d;
	vertical-align: top; 
}

th {
	background-color: #0d233a;
	color: #ffffff;
	font-weight: 600;
}

tr:hover {
	background-color: #0a1c32; 
}

/* Column Wrapping Logic (Data | Description | EDR Endpoint | Sources) */
.data-table {
	table-layout: fixed;
	min-width: 1100px;
}

.data-table .col-data { width: 22%; }
.data-table .col-desc { width: 30%; }
.data-table .col-endpoint { width: 27%; }
.data-table .col-source { width: 21%; }

.data-table td {
	white-space: normal;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.data-table td code {
	display: inline-block;
	line-height: 1.4;
}

/* --- Category Sections --- */
.category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.category-nav a {
	padding: 6px 14px;
	border: 1px solid #1a365d;
	border-radius: 999px;
	background-color: #0a1c32;
	font-size: 14px;
}

.category-nav a:hover {
	border-color: #63b3ed;
	text-decoration: none;
}

.category-section {
	margin-bottom: 40px;
	scroll-margin-top: 20px;
}

.category-section:last-of-type {
	margin-bottom: 0;
}

.category-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 12px 0;
	padding-left: 12px;
	border-left: 3px solid #63b3ed;
}

.category-count {
	font-size: 12px;
	font-weight: 600;
	color: #97aac4;
	background-color: #1a365d;
	border-radius: 999px;
	padding: 2px 9px;
}

.no-results {
	text-align: center;
	padding: 30px 0;
	margin: 0;
}

/* Code & Links */
code {
	background-color: #1a365d;
	color: #e2e8f0;
	padding: 4px 8px;
	border-radius: 4px;
	font-family: monospace;
	font-size: 13px;
}

a {
	color: #63b3ed;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}
/* --- Clickable Group Styling --- */

/* Changes the cursor to a pointer so users know it's a link */
.clickable-cell {
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Highlights the first 3 columns with a soft blue when the row is hovered */
tr:hover .clickable-cell {
	background-color: rgba(23, 203, 140, 0.567); /* Soft highlight color */
	color: #ffffff; /* Brightens the text slightly on hover */
}

/* Optional: Gives the code block inside the clickable cell a subtle boost on hover */
tr:hover .clickable-cell code {
	background-color: #2a4a7f;
}