/* ==========================================================================
   HIREHOP MODERN DEVELOPER THEME (FULL WIDTH, RESPONSIVE, NATIVE MOBILE APP)
   ========================================================================== */

/* Full Width Fluid Canvas */
.mw-page-container {
	max-width: 100% !important;
	padding: 0 24px !important;
	background-color: #f7f9fc !important;
}

.mw-content-container {
	max-width: 100% !important;
	margin: 0 !important;
}

/* Header Navbar */
.mw-header, header.mw-header {
	background: #ffffff !important;
	border-bottom: 2px solid #e2e8f0 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
	padding: 8px 24px !important;
	max-width: 100% !important;
}

.mw-header a, .mw-header .vector-icon, .mw-header .vector-user-links-main {
	color: #0f3b70 !important;
}

.mw-logo-icon, .mw-logo-container img {
	max-height: 40px !important;
	width: auto !important;
}

/* Hide redundant text wordmark next to logo image */
.mw-logo-wordmark, .mw-logo-tagline, .mw-logo-title {
	display: none !important;
}

/* Modern Elevated Card Styling for Content & Sidebar Panels */
.mw-body,
.vector-main-menu,
#vector-main-menu,
.vector-toc-pinned-container,
.mw-table-of-contents-container,
.vector-column-end .vector-menu,
#p-tb {
	background: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
	border: 1px solid #e2e8f0 !important;
}

.mw-body {
	padding: 32px 40px !important;
	margin-top: 16px !important;
	margin-bottom: 32px !important;
}

.vector-main-menu,
#vector-main-menu,
.vector-toc-pinned-container,
.mw-table-of-contents-container,
.vector-column-end .vector-menu,
#p-tb {
	padding: 16px 20px !important;
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}

/* Remove background and borders from wrapper containers */
.vector-main-menu-pinned-container,
#vector-main-menu-pinned-container,
.vector-main-menu-container,
.vector-column-start,
.vector-column-end,
#mw-navigation,
#mw-panel,
.vector-main-menu-wrap {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Developer Code Block Styling */
pre, code, .mw-code, .mw-highlight {
	font-family: "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace !important;
	border-radius: 8px !important;
}

pre, .mw-highlight {
	background: #1e293b !important;
	color: #f8fafc !important;
	padding: 16px 20px !important;
	border: 1px solid #334155 !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
	overflow-x: auto !important;
}

code {
	background: #edf2f7 !important;
	color: #0f3b70 !important;
	padding: 2px 6px !important;
	font-size: 0.9em !important;
	border-radius: 4px !important;
}

/* Sidebar Navigation */
.vector-main-menu {
	background: transparent !important;
}

.vector-main-menu-heading {
	color: #0f3b70 !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-bottom: 12px !important;
}

/* Primary Buttons */
.cdx-button--weight-primary, button[type="submit"], .mw-ui-button.mw-ui-progressive {
	background-color: #52b1e4 !important;
	border-color: #3ba3dc !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	padding: 8px 16px !important;
	box-shadow: 0 2px 6px rgba(82, 177, 228, 0.3) !important;
	transition: all 0.2s ease !important;
}

.cdx-button--weight-primary:hover, button[type="submit"]:hover {
	background-color: #0f3b70 !important;
	border-color: #0f3b70 !important;
	transform: translateY(-1px) !important;
}

/* Native Mobile Web App UI (No Zoomed-Out View) */
@media screen and (max-width: 768px) {
	html, body {
		width: 100% !important;
		overflow-x: hidden !important;
		font-size: 16px !important;
	}
	.mw-page-container {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
	}
	.mw-header, header.mw-header {
		position: sticky !important;
		top: 0 !important;
		z-index: 1000 !important;
		height: 52px !important;
		padding: 4px 12px !important;
	}
	.mw-logo-icon, .mw-logo-container img {
		max-height: 28px !important;
	}
	.mw-body {
		margin: 8px !important;
		padding: 16px 14px !important;
		border-radius: 8px !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
	}
	input[type="text"], input[type="password"], select, textarea {
		font-size: 16px !important;
		padding: 10px 12px !important;
	}
	.cdx-button, button, .mw-ui-button {
		min-height: 44px !important;
		font-size: 15px !important;
	}
	.wikitable, table.mw-datatable {
		display: block !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
	}
}