/* ============================================================================
   ScapeTime Onboarding System - Consolidated CSS
   ============================================================================
   Generated: Wed Oct  8 09:51:27 CDT 2025
   All CSS consolidated from view files into single stylesheet
   ============================================================================ */

/* ============================================================================
   Global Base Styles
   ============================================================================ */
body {
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}

* {
	box-sizing: border-box;
}

/* Base Button Styles */
.btn {
	display: inline-block;
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
	line-height: 1.5;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn-primary {
	background: #0099cc;
	color: white;
}
#create-new-person-btn{
	font-size:1em;
	background:deepskyblue;
	color:#fff;
	margin-left:5px;
	
	
}
.btn-primary:hover {
	background: #007aa3;
}

.btn-secondary {
	background: #6c757d;
	color: white;
}

.btn-secondary:hover {
	background: #5a6268;
}

.btn-success {
	background: #4CAF50;
	color: white;
}

.btn-success:hover {
	background: #45a049;
}

.btn-danger {
	background: #dc3545;
	color: white;
}

.btn-danger:hover {
	background: #c82333;
}

.btn-back {
	background: #6c757d;
	color: white;
}

.btn-back:hover {
	background: #5a6268;
}

.btn-sm {
	padding: 4px 12px;
	font-size: 13px;
}

.btn-lg {
	padding: 12px 24px;
	font-size: 16px;
}

.hires-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.hires-table thead {
    background: #bbb;
}

.hires-table thead th {
    color: #333;
    font-weight: 600;
    text-align: left;
    padding: 15px;
    font-size: 0.9375em;
    border-bottom: 2px solid #999;
}

.hires-table tbody tr {
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s;
}

.hires-table tbody tr:hover {
    background-color: #f8f9fa;
}

.hires-table tbody tr:last-child {
    border-bottom: none;
}

.hires-table tbody td {
    padding: 15px;
    vertical-align: middle;
    color: #333;
    font-size: 0.875em;
}

.hires-table tbody td.no-data {
    text-align: center;
    padding: 40px;
    color: #666;
    font-style: italic;
}
.onboarding-dashboard{
	margin:10px;
}
/* ============================================================================
   CSS from: v_admin_devices.php
   ============================================================================ */
	.admin-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.header-left h1 {
		margin: 0;
	}

	.header-right {
		display: flex;
		gap: 10px;
	}

	.devices-list {
		padding: 0 20px 20px 20px;
	}

	.device-category-section {
		margin-bottom: 30px;
	}

	.category-title {
		color: #2c5530;
		margin: 0 0 20px 0;
		padding-bottom: 10px;
		border-bottom: 2px solid #4CAF50;
		font-size: 1.3em;
	}

	.devices-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	.device-card {
		background: white;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		padding: 20px;
		flex: 0 0 calc(33.333% - 14px);
		display: flex;
		flex-direction: column;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: box-shadow 0.2s, transform 0.2s;
	}

	.device-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		transform: translateY(-2px);
	}

	.device-card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 15px;
		padding-bottom: 12px;
		border-bottom: 1px solid #f0f0f0;
	}

	.device-name {
		font-size: 1.1em;
		font-weight: 600;
		color: #2c5530;
		flex: 1;
		margin-right: 10px;
	}

	.device-card-body {
		flex: 1;
		margin-bottom: 15px;
	}

	.device-info-row {
		display: flex;
		justify-content: space-between;
		padding: 6px 0;
		border-bottom: 1px solid #f8f8f8;
	}

	.device-info-row:last-child {
		border-bottom: none;
	}

	.info-label {
		font-weight: 600;
		color: #666;
		font-size: 0.85em;
	}

	.info-value {
		color: #333;
		font-size: 0.9em;
		text-align: right;
	}

	.device-card-footer {
		display: flex;
		gap: 10px;
		padding-top: 12px;
		border-top: 1px solid #f0f0f0;
	}

	.device-card-footer button {
		flex: 1;
	}

/*	.status-badge {
		padding: 4px 12px;
		border-radius: 12px;
		font-size: 0.75em;
		font-weight: 600;
		min-width: 80px;
		text-align: center;
		display: inline-block;
	}*/

	.hire-type-badge {
		padding: 4px 12px;
		border-radius: 12px;
		font-size: 0.75em;
		font-weight: 600;
		min-width: 80px;
		text-align: center;
		display: inline-block;
	}

	.hire-type-badge.team_member {
		background: #cfe2ff;
		color: #084298;
	}

	.hire-type-badge.manager {
		background: #d1e7dd;
		color: #0a3622;
	}

	.status-badge.available {
		background-color: #d4edda;
		color: #155724;
	}

	.status-badge.in_use {
		background-color: #cce5ff;
		color: #004085;
	}

	.status-badge.needs_reconfig {
		background-color: #fff3cd;
		color: #856404;
	}

	.status-badge.ordered {
		background-color: #e2e3e5;
		color: #383d41;
	}

	.status-badge.retired {
		background-color: #f8d7da;
		color: #721c24;
	}

	.form-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
	}

	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: 600;
		color: #333;
	}

	.form-group input,
	.form-group select,
	.form-group textarea {
		width: 100%;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 0.875em;
	}

	.required {
		color: red;
	}

	.device-detail-view {
		padding: 20px;
	}

	/* Responsive Design */
	@media (max-width: 1200px) {
		.device-card {
			flex: 0 0 calc(50% - 10px);
		}
	}

	@media (max-width: 768px) {
		.device-card {
			flex: 0 0 100%;
		}

		.admin-header {
			flex-direction: column;
			gap: 15px;
		}

		.header-left {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

		.header-right {
			width: 100%;
		}

		.header-right button {
			width: 100%;
		}
	}

/* ============================================================================
   CSS from: v_admin_person_connections.php
   ============================================================================ */
	.admin-header {
		margin-bottom: 20px;
	}

	.header-title-row {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 10px;
	}

	.admin-header h1 {
		margin: 0;
		font-size:1.3em;
	}

	.help-text {
		margin: 5px;
		color: #666;
		font-size: 0.875em;
	}

	.person-connection-grid {
		display: grid;
		grid-template-columns: 500px 1fr;
		gap: 30px;
		margin-top: 20px;
		height: calc(100vh - 180px);
	}

	.people-list-panel,
	.person-editor-panel {
		background: white;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		display: flex;
		flex-direction: column;
	}

	.panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.panel-header h3 {
		margin: 0;
		color: #2c5530;
	
		flex: 1;
	}

	.search-box {
		width: 100%;
		padding: 10px;
		border: 2px solid #ddd;
		border-radius: 4px;
		margin-bottom: 15px;
		font-size: 0.875em;
	}

	.people-scroll-list {
		overflow-y: auto;
		flex: 1;
	}

	.person-list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		margin-bottom: 10px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.person-list-item:hover {
		background: #f9f9f9;
		border-color: #4CAF50;
	}

	.person-info {
		flex: 1;
	}

	.person-name {
		font-weight: 600;
		font-size: 0.9375em;
		color: #333;
		margin-bottom: 5px;
	}

	.person-meta {
		font-size: 0.75em;
		color: #666;
	}

	.person-actions {
		display: flex;
		gap: 5px;
	}

	.person-editor-panel h3 {
		margin: 0 0 20px 0;
		color: #2c5530;
		border-bottom: 2px solid #4CAF50;
		padding-bottom: 10px;
	}

	.form-section {
		margin-bottom: 25px;
		padding: 15px;
		background: #f9f9f9;
		border-radius: 4px;
	}

	.form-section h4 {
		margin: 0 0 15px 0;
		color: #2c5530;
		font-size: 0.875em;
		font-weight: 600;
	}

	.search-container {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
	}

	.search-container .search-box {
		flex: 1;
		margin-bottom: 0;
	}

	.search-results {
		max-height: 300px;
		overflow-y: auto;
		margin-top: 10px;
	}

	.search-results-table,
	.selected-users-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.8125em;
	}

	.search-results-table th,
	.selected-users-table th {
		background: #f5f5f5;
		padding: 8px;
		text-align: left;
		border-bottom: 2px solid #ddd;
		font-weight: 600;
	}

	.search-results-table td,
	.selected-users-table td {
		padding: 8px;
		border-bottom: 1px solid #eee;
	}

	.search-results-table tr:hover,
	.selected-users-table tr:hover {
		background: #f9f9f9;
	}

	.selected-users-list {
		max-height: 300px;
		overflow-y: auto;
	}

	.form-actions {
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #ddd;
	}

	.btn-remove-user {
		background-color: #f44336;
		color: white;
	}

	.no-data {
		text-align: center;
		padding: 30px;
		color: #999;
		font-style: italic;
	}

	.person-list-item.selected {
		background: #e8f5e9;
		border-color: #4CAF50;
		border-width: 2px;
	}

	.connections-list {
		max-height: 250px;
		overflow-y: auto;
	}

	.connections-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.8125em;
	}

	.connections-table th {
		background: #f5f5f5;
		padding: 8px;
		text-align: left;
		border-bottom: 2px solid #ddd;
		font-weight: 600;
	}

	.connections-table td {
		padding: 8px;
		border-bottom: 1px solid #eee;
	}

	.connections-table tr:hover {
		background: #f9f9f9;
	}

	.btn-remove-connection,
	.btn-add-connection {
		padding: 4px 10px;
		font-size: 0.75em;
	}

	.btn-remove-connection {
		background-color: #f44336;
		color: white;
	}

	.btn-add-connection {
		background-color: #4CAF50;
		color: white;
	}

	.already-connected {
		color: #999;
		font-style: italic;
		font-size: 0.75em;
	}

	/* Connection Cards (Mobile) */
	.connections-cards-mobile,
	.search-results-cards-mobile {
		display: none;
	}

	.connection-card,
	.search-result-card {
		background: white;
		border: 1px solid #dee2e6;
		border-radius: 6px;
		padding: 12px;
		margin-bottom: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.connection-card-header,
	.search-result-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		padding-bottom: 8px;
		border-bottom: 1px solid #dee2e6;
	}

	.connection-card-header h4,
	.search-result-card-header h4 {
		margin: 0;
		font-size: 0.9375em;
		color: #333;
	}

	.connection-card-body,
	.search-result-card-body {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.connection-card-row,
	.search-result-card-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.8125em;
	}

	.connection-card-row .label,
	.search-result-card-row .label {
		font-weight: 600;
		color: #666;
	}

	.connection-card-row .value,
	.search-result-card-row .value {
		color: #333;
		text-align: right;
	}

	/* Create Person Dialog Styling */
	#create-person-dialog {
		font-size: 0.875em;
	}

	#create-person-dialog .form-group {
		margin-bottom: 15px;
	}

	#create-person-dialog label {
		display: block;
		font-weight: 600;
		margin-bottom: 6px;
		color: #333;
		font-size: 0.875em;
	}

	#create-person-dialog input[type="text"] {
		width: 100%;
		padding: 8px 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 0.875em;
		box-sizing: border-box;
	}

	#create-person-dialog .help-text-dialog {
		margin: 10px 0 0 0;
		color: #666;
		font-size: 0.75em;
		font-style: italic;
	}

	#create-person-dialog .required {
		color: #d32f2f;
	}

	/* Person Editor Dialog Styling */
	#person-editor-dialog-content {
		font-size: 0.75em;
	}

	#person-editor-dialog-content .form-group {
		margin-bottom: 12px;
	}

	#person-editor-dialog-content label {
		display: block;
		font-weight: 600;
		margin-bottom: 4px;
		color: #333;
		font-size: 0.875em;
	}

	#person-editor-dialog-content input[type="text"] {
		width: 100%;
		padding: 6px 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 0.875em;
	}

	#person-editor-dialog-content .form-section {
		margin-bottom: 15px;
	}

	#person-editor-dialog-content .form-section h4 {
		font-size: 1em;
		margin-bottom: 8px;
	}

	#person-editor-dialog-content .help-text {
		font-size: 0.875em;
	}

	#person-editor-dialog-content .connections-table,
	#person-editor-dialog-content .search-results-table {
		font-size: 0.875em;
	}

	#person-editor-dialog-content .connections-table th,
	#person-editor-dialog-content .connections-table td,
	#person-editor-dialog-content .search-results-table th,
	#person-editor-dialog-content .search-results-table td {
		padding: 5px;
		font-size: 0.875em;
	}

	#person-editor-dialog-content .connection-card-header h4,
	#person-editor-dialog-content .search-result-card-header h4 {
		font-size: 0.875em;
	}

	#person-editor-dialog-content .connection-card-row,
	#person-editor-dialog-content .search-result-card-row {
		font-size: 0.75em;
	}

	#person-editor-dialog-content .search-container .btn {
		font-size: 0.8125em;
		padding: 6px 10px;
	}

	#person-editor-dialog-content .search-box {
		font-size: 0.8125em;
		padding: 6px 8px;
	}

	#person-editor-dialog-content .btn-sm {
		font-size: 0.75em;
		padding: 4px 8px;
	}

	/* Prevent body scroll when dialog is open */
	body.dialog-open {
		overflow: hidden;
		position: fixed;
		width: 100%;
	}

	/* Dialog positioning */
	.ui-dialog {
		position: fixed !important;
	}

	/* Make dialog content scrollable */
	.ui-dialog .ui-dialog-content {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	/* Mobile Responsive Design */
	@media (max-width: 768px) {
		/* Fix container to prevent horizontal scroll */
		.onboarding-admin-container {
			padding: 10px;
			margin: 0;
			max-width: 100%;
			overflow-x: hidden;
		}

		.admin-header {
			margin-bottom: 10px;
			padding: 0;
		}

		.person-connection-grid {
			grid-template-columns: 1fr;
			gap: 0;
			height: auto;
			margin-top: 10px;
		}

		/* Hide the right panel in mobile - it becomes a dialog */
		.person-editor-panel {
			display: none !important;
		}

		/* People list takes full width with no overflow */
		.people-list-panel {
			width: 100%;
			max-width: 100%;
			height: calc(100vh - 150px);
			padding: 10px;
			margin: 0;
			box-sizing: border-box;
		}

		/* Adjust panel header for mobile */
		.panel-header {
			flex-direction: column;
			align-items: stretch;
			gap: 10px;
			margin-bottom: 10px;
		}

		.panel-header h3 {
			font-size: 1em;
			padding-bottom: 8px;
		}

		.panel-header .btn {
			width: 100%;
		}

		/* Adjust header for mobile */
		.header-title-row {
			flex-direction: column;
			align-items: flex-start;
			gap: 8px;
			margin-bottom: 8px;
		}

		.header-title-row .btn {
			width: 100%;
		}

		.admin-header h1 {
			font-size: 1.3em;
			margin: 5px 0;
		}

		.help-text {
			font-size: 0.75em;
			line-height: 1.3;
		}

		/* Make person list items more touch-friendly */
		.person-list-item {
			padding: 10px;
			margin-bottom: 8px;
			flex-wrap: wrap;
		}

		.person-info {
			flex: 1 1 100%;
			margin-bottom: 8px;
		}

		.person-actions {
			flex: 1 1 100%;
			justify-content: flex-end;
		}

		.person-name {
			font-size: 0.9375em;
		}

		.person-meta {
			font-size: 0.6875em;
			word-break: break-word;
		}

		/* Search box adjustments */
		.search-box {
			padding: 8px;
			font-size: 0.8125em;
			margin-bottom: 10px;
			box-sizing: border-box;
		}

		/* Dialog styling for mobile */
		.ui-dialog {
			max-width: 95% !important;
			width: 95% !important;
			max-height: 90vh !important;
			top: 5vh !important;
			position: fixed !important;
		}

		.ui-dialog .ui-dialog-content {
			max-height: calc(90vh - 100px) !important;
			overflow-y: auto !important;
		}

		/* Create person dialog mobile adjustments */
		#create-person-dialog {
			font-size: 0.75em;
		}

		#create-person-dialog input[type="text"] {
			font-size: 0.875em;
		}

		#person-editor-dialog-content {
			max-width: 100%;
			overflow-x: hidden;
			font-size: 0.6875em;
		}

		#person-editor-dialog-content .search-box {
			font-size: 0.875em;
		}

		#person-editor-dialog-content .btn {
			font-size: 0.8125em;
		}

		#person-editor-dialog-content .form-group {
			margin-bottom: 12px;
		}

		#person-editor-dialog-content .form-actions {
			display: none; /* Hide the form actions in dialog - buttons are in dialog footer */
		}

		#person-editor-dialog-content .search-container {
			flex-direction: column;
			gap: 8px;
		}

		#person-editor-dialog-content .search-container .btn {
			width: 100%;
		}

		/* Hide desktop tables and show mobile cards */
		.connections-table-desktop,
		.search-results-table-desktop {
			display: none;
		}

		.connections-cards-mobile,
		.search-results-cards-mobile {
			display: block;
		}

		/* Make tables scrollable if they appear (fallback) */
		#person-editor-dialog-content .connections-list,
		#person-editor-dialog-content .search-results {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}

		/* Adjust dialog button font size */
		.ui-dialog .ui-dialog-buttonpane button {
			font-size: 0.75em;
			padding: 6px 12px;
		}
	}

/* ============================================================================
   CSS from: v_admin_step_assignments.php
   ============================================================================ */
	:root {
		/* Primary Brand Colors */
		--color-primary-dark: #2c5530;
		--color-primary: #4CAF50;
		--color-primary-darker: #388E3C;

		/* Text Colors */
		--color-text-primary: #333;
		--color-text-secondary: #666;
		--color-text-white: #ffffff;

		/* Background Colors */
		--color-bg-white: #ffffff;
		--color-bg-light: #f5f5f5;
		--color-bg-lighter: #f9f9f9;
		--color-bg-hover: #f0f0f0;
		--color-bg-selected: #e8f5e9;

		/* Border Colors */
		--color-border-light: #e0e0e0;
		--color-border-lighter: #ddd;

		/* Status Colors */
		--color-success: #4CAF50;
		--color-warning: #ff9800;
		--color-warning-darker: #F57C00;

		/* Category Colors - HR */
		--color-category-hr: #2196F3;
		--color-category-hr-dark: #1976D2;

		/* Category Colors - IT */
		--color-category-it: #9C27B0;
		--color-category-it-dark: #7B1FA2;

		/* Category Colors - Finance */
		--color-category-finance: #4CAF50;
		--color-category-finance-dark: #388E3C;

		/* Category Colors - Marketing */
		--color-category-marketing: #FF9800;
		--color-category-marketing-dark: #F57C00;

		/* Category Colors - Operations */
		--color-category-operations: #607D8B;
		--color-category-operations-dark: #455A64;

		/* Shadow */
		--shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.onboarding-admin-container {
		padding: 20px;
		max-width: 1600px;
		margin: 0 auto;
	}

	.admin-header {
		margin-bottom: 30px;
	}

	.header-title-row {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 10px;
	}

	.admin-header h1 {
		margin: 0;
		color: var(--color-primary-dark);
		font-size:1.3em;
	}

	.admin-header .help-text {
		color: var(--color-text-secondary);
		font-size: 0.875em;
		margin: 0;
	}

	.hidden {
		display: none;
	}

	.step-assignments-grid {
		display: grid;
		grid-template-columns: 600px 1fr;
		gap: 30px;
		height: calc(100vh - 200px);
	}

	.step-templates-panel,
	.user-selection-panel {
		background: var(--color-bg-white);
		border-radius: 8px;
		padding: 20px;
		box-shadow: var(--shadow-light);
		display: flex;
		flex-direction: column;
	}

	.step-templates-panel h3,
	.user-selection-panel h3 {
		margin: 0 0 15px 0;
		color: var(--color-primary-dark);
		border-bottom: 2px solid var(--color-primary);
		padding-bottom: 10px;
	}

	.step-templates-list {
		overflow-y: auto;
		height: calc(100vh - 270px);
	}

	.category-group {
		margin-bottom: 20px;
	}

	.category-header {
		position: sticky;
		top: 0;
		z-index: 10;
		font-weight: 600;
		font-size: 0.8125em;
		color: var(--color-text-white);
		text-transform: uppercase;
		padding: 8px 12px;
		background: var(--color-bg-light);
		border-left: 3px solid var(--color-primary);
		margin-bottom: 5px;
	}

	/* Category-specific colors */
	.category-header.category-hr {
		background: var(--color-category-hr);
		border-left-color: var(--color-category-hr-dark);
	}

	.category-header.category-it {
		background: var(--color-category-it);
		border-left-color: var(--color-category-it-dark);
	}

	.category-header.category-finance {
		background: var(--color-category-finance);
		border-left-color: var(--color-category-finance-dark);
	}

	.category-header.category-marketing {
		background: var(--color-category-marketing);
		border-left-color: var(--color-category-marketing-dark);
	}

	.category-header.category-operations {
		background: var(--color-category-operations);
		border-left-color: var(--color-category-operations-dark);
	}

	.step-template-item {
		padding: 12px 15px;
		border: 1px solid var(--color-border-light);
		border-radius: 4px;
		margin-bottom: 5px;
		cursor: pointer;
		transition: all 0.2s;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 15px;
	}

	.step-template-item:hover {
		background: var(--color-bg-lighter);
		border-color: var(--color-primary);
	}

	.step-template-item.selected {
		background: var(--color-bg-selected);
		border-color: var(--color-primary);
		border-width: 2px;
	}

	.step-template-item.has-assignment {
		border-left: 4px solid var(--color-success);
	}

	.step-template-item.no-assignment {
		border-left: 4px solid var(--color-warning);
	}

	.step-template-title {
		font-weight: 600;
		color: var(--color-text-primary);
		flex: 1;
	}

	.step-icon-svg {
		width: 18px;
		height: 18px;
		margin-right: 5px;
		vertical-align: middle;
	}

	.step-template-assigned {
		font-size: 0.75em;
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.assigned-user {
		color: var(--color-success);
		font-weight: 500;
	}

	.no-assignment-text {
		color: var(--color-warning);
		font-style: italic;
	}

	.selected-step-name {
		padding: 15px;
		background: var(--color-bg-light);
		border-radius: 4px;
		margin-bottom: 15px;
		min-height: 50px;
		color: var(--color-text-primary);
	}

	.user-actions {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
	}

	#user-search {
		flex: 1;
		padding: 8px 12px;
		border: 2px solid var(--color-border-lighter);
		border-radius: 4px;
		font-size: 0.875em;
	}

	.users-scroll-list {
		overflow-y: auto;
		height: calc(100vh - 450px);
		border: 1px solid var(--color-border-light);
		border-radius: 4px;
		padding: 10px;
	}

	.user-list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		border: 1px solid var(--color-border-light);
		border-radius: 4px;
		margin-bottom: 5px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.user-list-item:hover {
		background: var(--color-bg-hover);
		border-color: var(--color-primary);
	}

	.user-list-item.selected {
		background: var(--color-bg-selected);
		border-color: var(--color-primary);
		border-width: 2px;
	}

	.user-name {
		font-weight: 500;
		color: var(--color-text-primary);
	}

	.current-badge {
		background: var(--color-success);
		color: var(--color-text-white);
		padding: 3px 10px;
		border-radius: 12px;
		font-size: 0.6875em;
		font-weight: 600;
		text-transform: uppercase;
	}

	/* Responsive Layout for Portrait/Narrow Screens */
	@media (max-width: 1300px) {
		.onboarding-admin-container {
			padding: 2px;
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
		}

		.admin-header {
			padding: 2px;
			margin-bottom: 2px;
		}

		.header-title-row {
			flex-direction: column;
			gap: 0;
			align-items: flex-start;
		}

		.header-title-row h1 {
			font-size: 0.9em;
			margin: 2px 0;
		}

		.header-title-row .btn {
			margin: 2px 0;
		}

		.help-text {
			font-size: 0.7em;
			margin: 2px 0;
		}

		.step-assignments-grid {
			grid-template-columns: 1fr;
			gap: 2px;
			padding: 2px;
		}

		.step-templates-panel {
			padding: 2px;
			min-width: 0;
			width: 100%;
			box-sizing: border-box;
		}

		.user-selection-panel {
			display: none;
		}

		.step-templates-panel h3,
		.user-selection-panel h3 {
			font-size: 0.8em;
			margin: 2px 0;
			padding: 2px;
		}

		.step-templates-list {
			padding: 2px;
			max-height: auto;
			height: calc(100vh - 275px);
		}

		.category-header {
			font-size: 0.65em;
			padding: 2px;
			margin: 2px 0;
		}

		.step-template-item {
			padding: 2px;
			margin-bottom: 2px;
			flex-direction: column;
			align-items: flex-start;
		}

		.step-template-title {
			font-size: 0.7em;
			margin-bottom: 2px;
		}

		.step-template-assigned {
			font-size: 0.6em;
			margin: 2px 0;
		}

		.selected-step-name {
			font-size: 0.7em;
			padding: 2px;
			margin: 2px 0;
		}

		.user-actions {
			flex-direction: column;
			gap: 2px;
			margin: 2px 0;
			padding: 2px;
		}

		.user-actions .btn,
		#user-search {
			width: 100%;
			font-size: 0.7em;
			padding: 4px;
			margin: 2px 0;
			box-sizing: border-box;
		}

		.users-scroll-list {
			padding: 2px;
			max-height: 300px;
		}

		.user-item {
			padding: 2px;
			margin-bottom: 2px;
			flex-direction: column;
			align-items: flex-start;
		}

		.user-name {
			font-size: 0.7em;
		}

		.current-badge {
			font-size: 0.55em;
			padding: 2px 6px;
			margin: 2px 0;
		}

		.no-assignment-text,
		.assigned-user {
			font-size: 0.6em;
		}
	}

/* ============================================================================
   CSS from: v_admin_workflows.php
   ============================================================================ */
	.onboarding-admin-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

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

	.header-left {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.header-left h1 {
		margin: 0;
	}

	.header-right {
		display: flex;
		gap: 10px;
	}

	.workflows-list {
		background: white;
		padding: 20px;
		border-radius: 8px;
		margin-bottom: 30px;
	}

	.admin-table {
		width: 100%;
		border-collapse: collapse;
	}

	.admin-table th {
		background-color: #f5f5f5;
		padding: 12px;
		text-align: left;
		border-bottom: 2px solid #ddd;
	}

	.admin-table td {
		padding: 12px;
		border-bottom: 1px solid #eee;
	}


	.status-yes {
		color: #4CAF50;
		font-weight: 600;
	}

	.status-no {
		color: #757575;
	}

	.btn-edit {
		background-color: #2196F3;
		color: white;
	}

	.btn-delete {
		background-color: #f44336;
		color: white;
	}

	.steps-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875em;
	}

	.steps-table th {
		background-color: #f5f5f5;
		padding: 10px;
		text-align: left;
		border-bottom: 2px solid #ddd;
	}

	.steps-table td {
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.step-icon-svg {
		width: 18px;
		height: 18px;
		margin-right: 5px;
		vertical-align: middle;
	}

	/* Mobile Card Styling */
	.workflows-cards-mobile {
		display: none;
	}

	.workflow-card {
		background: white;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.workflow-card-header {
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #dee2e6;
	}

	.workflow-card-header h3 {
		margin: 0;
		font-size: 1.125em;
		color: #333;
	}

	.workflow-card-body {
		margin-bottom: 15px;
	}

	.workflow-card-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10px;
		gap: 10px;
	}

	.workflow-card-row .label {
		font-weight: 600;
		color: #666;
		font-size: 0.875em;
		flex-shrink: 0;
	}

	.workflow-card-row .value {
		color: #333;
		font-size: 0.875em;
		text-align: right;
	}

	.workflow-card-actions {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	.workflow-card-actions button {
		flex: 1;
		min-width: 80px;
	}

	.no-data-card {
		background: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 20px;
		text-align: center;
		color: #666;
	}

	/* Step Dialog Card Styling */
	.steps-cards-mobile {
		display: none;
	}

	.step-card {
		background: white;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 12px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.step-card-header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
		padding-bottom: 10px;
		border-bottom: 1px solid #dee2e6;
	}

	.step-order-badge {
		background: #2196F3;
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-weight: 600;
		font-size: 0.75em;
		flex-shrink: 0;
	}

	.step-card-header h4 {
		margin: 0;
		font-size: 1em;
		color: #333;
		display: flex;
		align-items: center;
	}

	.step-card-body {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.step-card-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.875em;
	}

	.step-card-row .label {
		font-weight: 600;
		color: #666;
	}

	.step-card-row .value {
		color: #333;
	}

	/* Responsive Layout for Portrait/Narrow Screens */
	@media (max-width: 1300px) {
		.onboarding-admin-container {
			padding: 2px;
		}

		.admin-header {
			flex-direction: column;
			gap: 0;
			margin-bottom: 2px;
			justify-content: center;
		}

		.header-left {
			flex-direction: column;
			gap: 0;
			width: 100%;
			text-align: center;
		}

		.header-left h1 {
			font-size: 0.9em;
			margin: 2px 0;
		}

		.header-left .btn {
			margin: 2px;
		}

		.header-right {
			flex-direction: column;
			gap: 0;
			width: 100%;
		}

		.header-right .btn {
			margin: 2px;
		}

		.workflows-list {
			padding: 2px;
			margin-bottom: 2px;
		}

		.workflows-list h2 {
			font-size: 0.8em;
			margin: 2px 0;
		}

		.admin-table {
			font-size: 0.6em;
		}

		.admin-table th,
		.admin-table td {
			padding: 2px;
		}
	}

	/* Mobile Card Layout */
	@media (max-width: 768px) {
		/* Hide desktop table */
		.workflows-table-desktop {
			display: none;
		}

		/* Show mobile cards */
		.workflows-cards-mobile {
			display: block;
		}

		/* Hide desktop steps table in dialog */
		.steps-table-desktop {
			display: none;
		}

		/* Show mobile steps cards in dialog */
		.steps-cards-mobile {
			display: block;
		}

		/* Adjust dialog width for mobile */
		.ui-dialog {
			max-width: 95% !important;
			width: 95% !important;
		}

		/* Adjust header buttons to stack */
		.header-right {
			width: 100%;
		}

		.header-right .btn {
			width: 100%;
		}
	}

/* ============================================================================
   CSS from: v_dashboard.php
   ============================================================================ */
	/* Dashboard Stats */
	.dashboard-stats {
		display: flex;
		gap: 20px;
		margin-bottom: 30px;
		justify-content: space-between;
	}

	.stat-card {
		flex: 1;
		background: white;
		border: 2px solid #4CAF50;
		border-radius: 8px;
		padding: 20px;
		text-align: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		min-width: 0;
	}

	.stat-value {
		font-size: 2.5em;
		font-weight: 700;
		color: #4CAF50;
		margin-bottom: 8px;
	}

	.stat-label {
		font-size: 0.875em;
		color: #666;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	/* Mobile Card Styling */
	.hires-cards-mobile {
		display: none;
	}

	.hire-card {
		background: white;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.hire-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #dee2e6;
	}

	.hire-card-header h3 {
		margin: 0;
		font-size: 1.125em;
		color: #333;
	}

	.hire-card-body {
		margin-bottom: 15px;
	}

	.hire-card-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.hire-card-row .label {
		font-weight: 600;
		color: #666;
		font-size: 0.875em;
	}

	.hire-card-row .value {
		color: #333;
		font-size: 0.875em;
	}

	.hire-card-row .progress-container {
		flex: 1;
		margin-left: 10px;
	}

	.hire-card-actions {
		display: flex;
		gap: 10px;
	}

	.hire-card-actions button {
		flex: 1;
	}

	.no-data-card {
		background: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		padding: 20px;
		text-align: center;
		color: #666;
	}

	/* Responsive Breakpoint */
	@media (max-width: 768px) {
		/* Hide desktop table */
		.hires-table-desktop {
			display: none;
		}

		/* Show mobile cards */
		.hires-cards-mobile {
			display: block;
		}

		/* Adjust dashboard stats for mobile */
		.dashboard-stats {
			gap: 12px;
			margin-bottom: 20px;
		}

		.stat-card {
			width: 100%;
			padding: 15px;
			box-sizing: border-box;
		}

		.stat-value {
			font-size: 2em;
		}

		.stat-label {
			font-size: 0.8125em;
		}
	}

/* ============================================================================
   CSS from: v_edit_workflow.php
   ============================================================================ */
	/* Compact Container */
	.onboarding-admin-container-compact {
		padding: 15px 20px;
		max-width: 1600px;
		margin: 0 auto;
	}

	/* Compact Header Row */
	.compact-header-row {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 2px solid #4CAF50;
	}

	.compact-header-row h1 {
		margin: 0;
		font-size: 1.25em;
		flex: 1;
	}

	.btn-back-compact {
		padding: 6px 12px;
		font-size: 0.8125em;
		background: #f5f5f5;
		border: 1px solid #ddd;
		border-radius: 4px;
		cursor: pointer;
	}

	.auto-save-msg {
		color: #666;
		font-size: 0.75em;
		font-style: italic;
	}

	/* Two Column Layout */
	.workflow-two-column {
		display: grid;
		grid-template-columns: 350px 1fr;
		gap: 20px;
		height: calc(100vh - 180px);
	}

	.workflow-left-column {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.workflow-right-column {
		display: flex;
		flex-direction: column;
		border: 1px solid #ddd;
		border-radius: 6px;
		background: #f9f9f9;
		overflow: hidden;
	}

	.section-title-compact {
		margin: 0 0 10px 0;
		font-size: 1em;
		font-weight: 600;
		color: #2c5530;
	}

	.form-group-compact {
		margin-bottom: 12px;
	}

	.form-group-compact label {
		display: block;
		font-size: 0.8125em;
		font-weight: 600;
		margin-bottom: 4px;
		color: #333;
	}

	.form-group-compact input[type="text"],
	.form-group-compact textarea {
		width: 100%;
		padding: 6px 10px;
		font-size: 0.8125em;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.form-group-compact textarea {
		resize: vertical;
	}

	.required {
		color: #d32f2f;
	}

	/* Steps Header */
	.steps-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		background: #4CAF50;
		color: white;
		border-radius: 6px 6px 0 0;
	}

	.steps-header h3 {
		margin: 0;
		color: white;
	}

	.steps-header .btn {
		padding: 4px 12px;
		font-size: 0.75em;
	}

	/* Steps Scrollable Area */
	.steps-scrollable-area {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
		background: white;
	}

	/* Compact Step Cards */
	.step-builder-card-compact {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 10px;
		background: white;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		margin-bottom: 6px;
		transition: all 0.2s;
	}

	.step-builder-card-compact:hover {
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}

	.step-handle {
		cursor: move;
		font-size: 1em;
		color: #999;
		padding: 0 5px;
	}

	.step-details-compact {
		flex: 1;
		min-width: 0;
	}

	.step-title-compact {
		font-weight: 600;
		font-size: 0.8125em;
		margin-bottom: 2px;
		color: #333;
	}

	.step-icon {
		font-size: 1.2em;
		margin-right: 5px;
		display: inline-block;
		vertical-align: middle;
	}

	.step-icon-svg {
		width: 18px;
		height: 18px;
		margin-right: 5px;
		vertical-align: middle;
	}

	.step-meta-compact {
		font-size: 0.6875em;
		color: #666;
	}

	.step-actions-compact {
		display: flex;
		gap: 4px;
	}

	.btn-icon {
		background: transparent;
		border: 1px solid #ddd;
		border-radius: 3px;
		padding: 4px 8px;
		cursor: pointer;
		font-size: 1em;
		color: #666;
		transition: all 0.2s;
	}

	.btn-icon:hover {
		background: #f5f5f5;
		border-color: #999;
	}

	.step-placeholder {
		height: 40px;
		background: #f0f0f0;
		border: 2px dashed #ccc;
		margin-bottom: 6px;
		border-radius: 4px;
	}

	.no-steps {
		text-align: center;
		padding: 60px 20px;
		color: #999;
		font-size: 0.875em;
		font-style: italic;
	}

	/* Add Step Dialog Styling */
	#add-step-dialog .form-group {
		margin-bottom: 12px;
	}

	#add-step-dialog label {
		display: block;
		font-size: 0.8125em;
		font-weight: 600;
		margin-bottom: 4px;
		color: #333;
	}

	#add-step-dialog select,
	#add-step-dialog input[type="number"] {
		width: 100%;
		padding: 6px 10px;
		font-size: 0.8125em;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	#add-step-dialog input[type="checkbox"] {
		margin-right: 6px;
	}

	/* Responsive Layout for Portrait/Narrow Screens */
	@media (max-width: 1300px) {
		.compact-header-row {
			flex-direction: column;
			gap: 0;
			justify-content: center;
		}

		.compact-header-row > * {
			text-align: center;
		}

		.compact-header-row h1 {
			flex-basis: 100%;
			font-size: 0.9em;
			margin: 2px 0;
		}

		.btn-back-compact,
		.auto-save-msg {
			flex: 1 1 auto;
			margin: 2px;
		}

		.workflow-two-column {
			grid-template-columns: 1fr;
			gap: 0;
			height: auto;
		}

		.workflow-left-column {
			margin-bottom: 2px;
			gap: 0;
		}

		.workflow-right-column {
			height: calc(100vh - 400px);
			min-height: 400px;
		}

		.onboarding-admin-container-compact {
			padding: 2px;
		}

		.form-group-compact {
			margin-bottom: 2px;
		}

		.form-group-compact label {
			margin-bottom: 2px;
			font-size: 0.7em;
		}

		.form-group-compact input[type="text"],
		.form-group-compact textarea {
			padding: 2px;
			font-size: 0.7em;
		}

		.steps-header {
			flex-direction: column;
			gap: 0;
			padding: 2px;
		}

		.steps-header h3 {
			font-size: 0.8em;
		}

		.steps-scrollable-area {
			padding: 2px;
		}

		.step-builder-card-compact {
			padding: 2px;
			margin-bottom: 2px;
		}

		.step-builder-card-compact .step-title-input {
			font-size: 0.65em;
		}

		.step-builder-card-compact select {
			font-size: 0.6em;
		}
	}

	/* Mobile Responsive Dialog */
	@media (max-width: 768px) {
		/* Adjust dialog width for mobile */
		.ui-dialog {
			max-width: 95% !important;
			width: 95% !important;
		}

		/* Smaller font sizes in add step dialog */
		#add-step-dialog label {
			font-size: 0.75em;
		}

		#add-step-dialog select,
		#add-step-dialog input[type="number"] {
			font-size: 0.75em;
			padding: 5px 8px;
		}

		#add-step-dialog .form-group {
			margin-bottom: 10px;
		}

		/* Dialog buttons */
		.ui-dialog .ui-dialog-buttonpane button {
			font-size: 0.75em;
			padding: 6px 12px;
		}
	}

/* ============================================================================
   CSS from: v_edit_workflow_step.php
   ============================================================================ */
	.help-text {
		font-size: 0.75em;
		color: #666;
		margin: 5px 0 5px 0;
		font-style: italic;
	}

	.dependency-checkboxes {
		max-height: 300px;
		overflow-y: auto;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 10px;
		background: #f9f9f9;
	}

	.checkbox-label {
		display: block;
		padding: 8px 10px;
		margin: 4px 0;
		background: white;
		border: 1px solid #e0e0e0;
		border-radius: 3px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.checkbox-label:hover {
		background: #f0f7ff;
		border-color: #4CAF50;
	}

	.checkbox-label input[type="checkbox"] {
		margin-right: 10px;
		cursor: pointer;
	}

	.step-order-badge {
		float: right;
		background: #e0e0e0;
		color: #666;
		padding: 2px 8px;
		border-radius: 10px;
		font-size: 0.8em;
		font-weight: 600;
	}

/* ============================================================================
   CSS from: v_hire_detail.php
   ============================================================================ */
	/* Step icon styling */
	.step-icon-svg {
		width: 18px;
		height: 18px;
		vertical-align: middle;
		margin-right: 5px;
	}

	/* 100% width container */
	.hire-detail-container-wide {
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	/* Info Row - flex with centered items */
	.hire-info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 4px;
		padding: 10px 15px;
		margin-bottom: 10px;
	}

	.hire-info-row .info-item {
		flex: 1;
		text-align: center;
		font-size: 1em;
	}

	.hire-info-row .info-item:first-child {
		text-align: left;
		flex: 0 0 auto;
	}

	.btn-back-compact {
		padding: 6px 12px;
		background: #6c757d;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 0.8125em;
	}

	.btn-back-compact:hover {
		background: #5a6268;
	}

	/* Progress Row - flex with centered items */
	.progress-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #e7f3ff;
		border: 1px solid #b3d9ff;
		border-radius: 4px;
		padding: 10px 15px;
		margin-bottom: 10px;
	}

	.progress-row .progress-item {
		flex: 1;
		text-align: center;
		font-size: 1em;
	}

	.progress-row .progress-item:first-child {
		text-align: left;
	}

	.progress-row .progress-label {
		font-weight: 600;
		font-size: 1em;
	}

	.progress-bar-compact {
		flex: 2 !important;
		background: #e9ecef;
		border-radius: 10px;
		height: 20px;
		overflow: hidden;
		position: relative;
	}

	.progress-bar-fill-compact {
		background: linear-gradient(to right, #28a745, #20c997);
		height: 100%;
		transition: width 0.3s;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 0.6875em;
		font-weight: 600;
	}

	/* Tabs container */
	.tabs-container {
		margin-top: 10px;
	}

	.tabs {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0 0 10px 0;
		border-bottom: 1px solid #dee2e6;
	}

	.tabs .tab-link {
		
		padding: 10px 20px;
		cursor: pointer;
		background: transparent;
		border: none;
		border-bottom: 3px solid transparent;
		font-size: 0.875em;
		color: #666;
		transition: all 0.2s;
		text-align: center;
	}

	.tabs .tab-link:hover {
		color: #333;
	}

	.tabs .tab-link.active {
		color: #007bff;
		border-bottom-color: #007bff;
		font-weight: 500;
	}

	.tab-content {
		display: none;
	}

	.tab-content.active {
		display: block;
	}

	/* Scrollable steps list */
	.steps-list-scrollable {
		max-height: 500px;
		overflow-y: auto;
		border: 1px solid #dee2e6;
		border-radius: 4px;
	}
	.steps-list-scrollable .step-row-2{
		display:flex;
		align-items:center;
	}
	.steps-list-scrollable .step-title{
		display:flex;
	}
	.steps-list-scrollable .step-title-icon{
		width:50%;
		text-align:right;
		padding-right:10px;
	}	
	.steps-list-scrollable .step-title-text{
		display:flex;
		
		align-items:flex-start;
	}
	/* Step Row - flex layout 100% width */
	.step-row {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e9ecef;
		background: white;
		transition: background 0.2s;
		width:100%;
	}

	.step-row:hover {
		background: #f8f9fa;
	}

	.step-row:last-child {
		border-bottom: none;
	}

	/* Status colors */
	.step-row.completed {
		background: #d4edda;
	}

	.step-row.in_progress {
		background: #fff3cd;
	}

	.step-row.blocked {
		background: #f8d7da;
	}

	/* Step columns */
	.step-col {
		text-align: center;
		font-size: 0.75em;
		padding: 8px;
		flex-grow:1;
	}

	.step-num {
		flex: 0 0 40px;
		font-weight: 600;
		flex-grow:initial;
	}

	.step-title {
		flex: 1 0 200px;
		text-align: left;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.step-title-text {
		font-weight: 500;
		display:flex;
		align-items:center;
	}

	.step-category {
		flex: 1 0 120px;
	}

	.cat-badge {
		display: inline-block;
		padding: 3px 8px;
		border-radius: 3px;
		font-size: 1em;
		font-weight: 500;
		background: #e9ecef;
		color: #495057;
		min-width: 80px;
		text-align: center;
	}

	.cat-badge.technology {
		background: #cfe2ff;
		color: #084298;
	}

	.cat-badge.access {
		background: #d1e7dd;
		color: #0a3622;
	}

	.cat-badge.hr {
		background: #f8d7da;
		color: #842029;
	}

	.cat-badge.training {
		background: #fff3cd;
		color: #664d03;
	}

	.step-assigned {
		flex: 1 0 150px;
	}

	.step-due {
		flex: 1 0 80px;
		font-size: .8em;
	}

	.step-completed {
		flex: 1 0 80px;
		font-size: 0.6875em;
	}

	.step-dropdown {
		flex: 1 0 140px;
		text-align: right;
	}

	.status-dropdown-compact {
		width: 130px;
		padding: 4px 6px;
		font-size: 1em;
		border: 1px solid #ced4da;
		border-radius: 4px;
		background: white;
	}

	/* Other tabs styling */
	#devices, #timeline, #details {
		padding: 15px;
		max-height: 500px;
		overflow-y: auto;
	}

	#devices h3, #timeline h3, #details h3 {
		margin-top: 0;
		font-size: 1em;
	}

	.no-data {
		color: #999;
		font-style: italic;
		padding: 20px;
		text-align: center;
	}

	.devices-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 15px;
	}

	.device-card {
		border: 1px solid #dee2e6;
		border-radius: 4px;
		padding: 12px;
		background: #f8f9fa;
	}

	.device-card h4 {
		margin: 0 0 8px 0;
		font-size: 0.875em;
	}

	.device-card p {
		margin: 0 0 8px 0;
		font-size: 0.75em;
	}

	.device-meta {
		font-size: 0.6875em;
		color: #666;
	}

	.device-meta .badge {
		background: #ffc107;
		color: #000;
		padding: 2px 6px;
		border-radius: 3px;
		margin-left: 5px;
		font-size: 0.625em;
	}

	.timeline {
		border-left: 2px solid #dee2e6;
		padding-left: 20px;
	}

	.timeline-item {
		position: relative;
		margin-bottom: 20px;
	}

	.timeline-marker {
		position: absolute;
		left: -26px;
		top: 5px;
		width: 10px;
		height: 10px;
		background: #28a745;
		border-radius: 50%;
		border: 2px solid white;
	}

	.timeline-content strong {
		font-size: 0.8125em;
	}

	.timeline-content p {
		margin: 4px 0 0 0;
		font-size: 0.75em;
		color: #666;
	}

	.details-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 15px;
	}

	.detail-item {
		padding: 10px;
		background: #f8f9fa;
		border-radius: 4px;
	}

	.detail-item label {
		font-weight: 600;
		font-size: 0.6875em;
		color: #666;
		display: block;
		margin-bottom: 4px;
	}

	.detail-item span {
		font-size: 0.8125em;
	}

	/* Edit Dialog Styles */
	.form-section-compact {
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid #e0e0e0;
	}

	.form-section-compact:last-child {
		border-bottom: none;
	}

	.form-section-compact h3 {
		margin: 0 0 15px 0;
		font-size: 0.9em;
		color: #2c5530;
	}

	.form-row-compact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		margin-bottom: 10px;
	}

	.form-group-inline {
		margin-bottom: 10px;
	}

	.form-group-inline label {
		display: block;
		margin-bottom: 5px;
		font-weight: 600;
		font-size: 0.75em;
		color: #333;
	}

	.form-group-inline input[type="text"],
	.form-group-inline input[type="email"],
	.form-group-inline input[type="tel"],
	.form-group-inline input[type="date"],
	.form-group-inline select,
	.form-group-inline textarea {
		width: 100%;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 0.75em;
		box-sizing: border-box;
	}

	.form-group-inline input[type="checkbox"] {
		margin-right: 5px;
	}

	#edit-hire-dialog {
		max-height: 500px;
		overflow-y: auto;
	}

	/* Responsive Layout for Portrait/Narrow Screens */
	@media (max-width: 1300px) {
		.hire-info-row {
			flex-direction: column;
			gap: 0;
			justify-content: center;
		}

		.hire-info-row .info-item {
			flex: 1 1 100%;
			margin-bottom: 2px;
			text-align: center;
			font-size: 1em;
		}

		.hire-info-row h1 {
			font-size: 1em;
		}

		.progress-row {
			flex-direction: column;
			gap: 0;
			justify-content: center;
		}

		.progress-row .progress-item {
			flex: 1 1 100%;
			margin-bottom: 2px;
			text-align: center;
			font-size: 1em
		}

		.progress-bar-compact {
			flex: 1 1 100%;
			margin-top: 2px;
		}

		.step-row {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 8px;
			padding: 12px;
			width:100%;
			align-items: center;
			border: 1px solid #dee2e6;
			border-radius: 8px;
			margin-bottom: 12px;
			background: white;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}

		.step-row:hover {
			transform: scale(1.02);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		}

		.step-col {
			padding: 3px;
			font-size: 1em;
		}

		/* Row 1: Title on left, Category on right (no numbers) */
		.step-col.step-num {
			display: none;
		}

		.step-col.step-title {
			flex: 1 1 auto;
			font-size: 1.0625em;
			font-weight: 600;
			text-align: left;
		}

		.step-col.step-category {
			flex: 0 0 auto;
			font-size: 0.9375em;
			text-align: right;
		}

		/* Row 2 wrapper: Person name and due date */
		.step-row-2 {
			flex: 1 1 100%;
			display: flex;
			gap: 8px;
			width: 100%;
		}

		.step-row-2 .step-col.step-assigned {
			flex: 1;
			font-size: 0.8em;
			text-align: center;
		}

		.step-row-2 .step-col.step-due {
			flex: 1;
			font-size: 0.9375em;
			text-align: center;
		}
		.steps-list-scrollable .step-row-2{
			display:flex !important;
			font-size:1em !important;
		}
		/* Row 3 wrapper: Dropdown and completed date */
		.step-row-3 {
			flex: 1 1 100%;
			display: flex;
			gap: 8px;
			width: 100%;
			align-items: center;
			justify-content: center;
		}

		.step-row-3 .step-col.step-dropdown {
			flex: 1;
			text-align: center;
		}

		/* When both dropdown and completed exist, adjust alignment */
		.step-row-3:has(.step-completed) .step-col.step-dropdown {
			text-align: left;
		}

		.step-row-3 .step-col.step-completed {
			flex: 1;
			font-size: 0.9375em;
			text-align: right;
		}

		.step-col.step-dropdown select {
			font-size: 1em;
			padding: 8px;
			width: 100%;
			max-width: 200px;
		}

		.hire-detail-container-wide {
			padding: 5px;
		}

		.steps-list-scrollable {
			max-height: none;
			overflow-y: visible;
			padding: 5px;
			border: none;
			box-shadow: none;
		}
	}

/* ============================================================================
   CSS from: v_hire_progress.php
   ============================================================================ */
	.hire-progress-view {
		padding: 20px;
		max-width: 1600px;
		margin: 0 auto;
		overflow-x: hidden;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40px;
		padding: 20px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.hire-info h1 {
		margin: 0;
		font-size:1.8em;
		color: #2c5530;
	}

	.hire-info p {
		margin: 0;
		font-size:1.4em;
		color: #666;
	}

	.progress-summary {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.progress-stats {
		font-size: 0.875em;
		color: #666;
	}

	/* Horizontal Timeline */
	.timeline-container {
		background: white;
		padding: 30px;
		border-radius: 8px;
		margin-bottom: 30px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.timeline-container h2 {
		text-align: center;
		margin-bottom: 25px;
	}

	.timeline-horizontal {
		display: flex;
		overflow-x: auto;
		padding: 40px 20px;
		gap: 10px;
		place-content:center;
	}

	/* Override flex for step-title and step-assigned inside timeline-horizontal */
	.timeline-horizontal .step-title {
		display: block !important;
		flex: none !important;
	}

	.timeline-horizontal .step-assigned {
		display: block !important;
		flex: none !important;
		text-align: center;
	}

	.timeline-step {
		position: relative;
		min-width: 120px;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: white;
		border-radius: 12px;
		padding: 15px 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		border: 1px solid #e0e0e0;
	}

	.timeline-step:hover {
		transform: translateY(-8px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		border-color: #4CAF50;
	}

	/* State-based card styling */
	.timeline-step.completed {
		background: linear-gradient(to bottom, #ffffff, #f1f8f4);
		border-color: #4CAF50;
	}

	.timeline-step.completed:hover {
		background: linear-gradient(to bottom, #ffffff, #e8f5e9);
	}

	.timeline-step.in_progress {
		background: linear-gradient(to bottom, #ffffff, #fffbf0);
		border-color: #FFC107;
	}

	.timeline-step.in_progress:hover {
		background: linear-gradient(to bottom, #ffffff, #fff8e1);
	}

	.timeline-step.blocked {
		opacity: 0.7;
		background: linear-gradient(to bottom, #ffffff, #fafafa);
	}

	.step-indicator {
		position: relative;
		margin: 0 0 10px 0;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.status-dot {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25em;
		font-weight: bold;
		color: white;
	}

	.status-dot svg {
		width: 24px;
		height: 24px;
		fill: white;
	}

	.status-dot img,
	.status-dot .step-icon-svg {
		width: 24px !important;
		height: 24px !important;
		display: block;
		filter: brightness(0) invert(1);
		margin: 0 !important;
		padding: 0;
		flex-shrink: 0;
	}

	.status-dot.pending {
		background: #2196F3;
	}

	.status-dot.in-progress {
		background: #FFC107;
		animation: pulse 2s infinite;
	}

	.status-dot.completed {
		background: #4CAF50;
	}

	.status-square {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5em;
		font-weight: bold;
		color: white;
	}

	.status-square.blocked {
		background: #F44336;
	}

	.overdue-flag {
		position: absolute;
		top: -8px;
		right: -8px;
		width: 24px;
		height: 24px;
		background: #d32f2f;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.875em;
	}

	@keyframes pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.6; }
	}

	.step-title {
		font-size: 0.8125em;
		font-weight: 600;
		margin-bottom: 5px;
		color: #333;
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step-icon {
		margin-right: 5px;
		display: inline-block;
		vertical-align: middle;
	}

	.step-icon svg {
		width: 18px;
		height: 18px;
		vertical-align: middle;
	}

	.step-icon-svg {
		width: 24px;
		height: 24px;
		display: block;
		margin: 0 auto;
	}

	.step-assigned {
		font-size:.8em;
		color: #666;
		width: 100%;
		font-weight:600;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step-connector {
		position: absolute;
		top: 20px;
		right: -10px;
		width: 10px;
		height: 2px;
		background: #ddd;
	}

	.step-connector.completed {
		background: #4CAF50;
	}

	/* Step Detail Panel */
	#step-detail-panel {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
		padding: 20px;
		z-index: 1000;
	}

	.panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 2px solid #4CAF50;
	}

	.panel-header button {
		background: none;
		border: none;
		font-size: 1.3em;
		cursor: pointer;
		color: #666;
	}

	/* Compact Step Cards - Hidden (redundant with timeline) */
	.steps-by-category {
		display: none;
	}

	.category-section {
		margin-bottom: 30px;
	}

	.category-section h3 {
		color: #2c5530;
		border-bottom: 2px solid #4CAF50;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}

	.category-steps {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 12px;
	}

	.step-card-compact {
		display: grid;
		grid-template-columns: 30px 1fr 120px 100px;
		align-items: center;
		gap: 12px;
		padding: 12px;
		border: 1px solid #e0e0e0;
		border-radius: 6px;
		transition: all 0.2s;
	}

	.step-card-compact:hover {
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

	.step-card-compact.status-completed {
		background: #f1f8f4;
	}

	.compact-indicator .dot {
		font-size: 1.5em;
	}

	.compact-indicator .square {
		font-size: 1.25em;
	}

	.dot.green { color: #4CAF50; }
	.dot.yellow { color: #FFC107; }
	.dot.blue { color: #2196F3; }
	.square.red { color: #F44336; }

	.compact-title {
		font-weight: 600;
		color: #333;
	}

	.compact-assigned {
		font-size: 0.75em;
		color: #666;
	}

	.compact-status {
		font-size: 0.75em;
		text-align: right;
		color: #999;
		text-transform: capitalize;
	}

	/* Dependency styles */
	.timeline-step.dependency-blocked {
		opacity: 0.6;
	}

	.dependency-lock-icon {
		position: absolute;
		bottom: -8px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 0.875em;
		background: #ff9800;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: help;
		box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	}

	.step-card-compact.dependency-blocked {
		opacity: 0.6;
		background: #fff9f0;
		border-left: 3px solid #ff9800;
	}

	/* Responsive Layout for Mobile */
	@media (max-width: 768px) {
		.hire-progress-view {
			padding: 5px;
			overflow-x: hidden;
		}

		/* Header stacks vertically */
		.header {
			flex-direction: column;
			gap: 10px;
			padding: 10px;
			margin-bottom: 15px;
			align-items: flex-start;
		}

		.btn-back {
			align-self: flex-start;
			font-size: 0.875em;
			padding: 6px 10px;
		}

		.hire-info {
			text-align: left;
			width: 100%;
		}

		.hire-info h1 {
			font-size: 1em;
			margin: 0 0 0 0;
		}

		.hire-info p {
			font-size: 1.5em;
			margin: 0;
		}

		.progress-summary {
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			gap: 15px;
			width: 100%;
		}

		.progress-circle {
			flex-shrink: 0;
		}

		.progress-circle svg {
			width: 85px;
			height: 85px;
		}

		.progress-stats {
			font-size: 0.875em;
			text-align: left;
		}

		/* Timeline container - convert to vertical on mobile */
		.timeline-container {
			padding: 15px;
			margin-bottom: 15px;
		}

		.timeline-container h2 {
			font-size: 1.125em;
			margin-bottom: 15px;
			text-align: center;
		}

		.timeline-horizontal {
			display: flex;
			flex-direction: column;
			padding: 10px;
			gap: 0;
			overflow-x: visible;
			position: relative;
		}

		/* Vertical timeline line */
		.timeline-horizontal::before {
			content: '';
			position: absolute;
			left: 27px;
			top: 0;
			bottom: 0;
			width: 3px;
			background: #e0e0e0;
			z-index: 0;
		}

		.timeline-step {
			min-width: auto;
			width: 70%;
			margin: 10px auto;
			display: flex;
			align-items: center;
			gap: 15px;
			padding: 15px;
			position: relative;
			text-align: left;
			background: white;
			border-radius: 12px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
			border: 1px solid #e0e0e0;
			transition: all 0.3s ease;
		}

		.timeline-step:hover {
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
			border-color: #4CAF50;
			background: #fafafa;
		}

		.step-indicator {
			width: 40px;
			height: 40px;
			flex-shrink: 0;
			z-index: 1;
			margin: 0;
		}

		.status-dot,
		.status-square {
			width: 40px;
			height: 40px;
			font-size: 1.125em;
		}

		.status-dot img,
		.status-dot .step-icon-svg {
			width: 22px !important;
			height: 22px !important;
		}

		/* Hide horizontal connectors on mobile */
		.step-connector {
			display: none;
		}

		.step-title {
			font-size: 0.9375em;
			line-height: 1.3;
			margin: 0;
			flex: 1 1 auto;
			min-width: 0;
		}

		.step-assigned {
			font-size: 0.75em;
			margin: 0;
			text-align: right;
		}

		.overdue-flag {
			width: 22px;
			height: 22px;
			font-size: 0.75em;
			top: -6px;
			right: -6px;
		}

		.dependency-lock-icon {
			position: static;
			transform: none;
			margin-left: 8px;
			display: inline-flex;
		}

		/* Steps by category - hide on mobile (timeline already shows everything) */
		.steps-by-category {
			display: none;
		}

		/* Step detail panel */
		#step-detail-panel {
			padding: 15px;
			max-height: 70vh;
			overflow-y: auto;
		}

		.panel-header h3 {
			font-size: 1em;
		}

		.panel-header button {
			font-size: 1.5em;
		}

		.detail-info p {
			font-size: 0.875em;
		}
	}

/* ============================================================================
   CSS from: v_my_tasks.php
   ============================================================================ */
	.onboarding-my-tasks {
		padding: 20px;
		max-width: 1400px;
		margin: 0 auto;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;
	}

	.task-layout {
		display: grid;
		grid-template-columns: 350px 1fr;
		gap: 30px;
		height: calc(100vh - 222px);
	}

	.hire-list-wrapper {
		display: flex;
		flex-direction: column;
		height: 100%;
		border-right: 1px solid #ddd;
		padding-right: 20px;
	}

	.hire-list-title {
		margin: 0 0 10px 0;
		font-size: 1.25em;
		font-weight: 600;
		color: #333;
		flex-shrink: 0;
	}

	.hire-list {
		flex: 1;
		overflow-y: auto;
	}

	.hire-card {
		padding: 18px;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		margin-bottom: 12px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.hire-card:hover {
		border-color: #4CAF50;
		background: #f9f9f9;
	}

	.hire-card.active {
		border-color: #4CAF50;
		background: #e8f5e9;
	}

	.hire-name {
		font-size: 1em;
		font-weight: 600;
		margin-bottom: 5px;
	}

	.hire-info {
		display: flex;
		justify-content: space-between;
		font-size: 0.8125em;
		color: #666;
		margin-bottom: 8px;
		flex-wrap: wrap;
		gap: 8px;
		place-items:baseline;
		place-content:center;
	}
	.hire-company {
		background: #e3f2fd;
		color: #1976d2;
		padding: 2px 8px;
		border-radius: 3px;
		font-size: 0.6875em;
		font-weight: 600;
	}

	.task-summary {
		display: flex;
		gap: 15px;
		font-size: 0.75em;
		flex-wrap: wrap;
	}

	.my-tasks-count {
		color: #2196F3;
		font-weight: 700;
		background: #e3f2fd;
		padding: 2px 6px;
		border-radius: 4px;
	}

	.pending-count {
		color: #ff9800;
		font-weight: 600;
	}

	.completed-count {
		color: #4CAF50;
		font-weight: 600;
	}

	.hire-header {
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 2px solid #4CAF50;
		flex-shrink: 0;
	}

	.hire-header h2 {
		margin: 0 0 5px 0;
		color: #2c5530;
		font-size: 1.125em;
	}

	.hire-header p {
		margin: 0;
		font-size: 0.875em;
	}

	.task-card {
		background: white;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 15px;
		transition: all 0.2s;
	}

	.task-card.status-pending {
		border-left: 4px solid #2196F3;
	}

	.task-card.status-in_progress {
		border-left: 4px solid #FFC107;
	}

	.task-card.status-completed {
		border-left: 4px solid #4CAF50;
		background: #f1f8f4;
	}

	.task-card.status-blocked {
		border-left: 4px solid #F44336;
	}

	.task-main {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20px;
	}

	.task-info {
		flex: 1;
	}

	.task-info h3 {
		margin: 0 0 10px 0;
		color: #333;
	}

	.task-desc {
		color: #666;
		margin: 0 0 10px 0;
		font-size: 0.875em;
	}

	.task-meta {
		display: flex;
		gap: 15px;
		align-items: center;
	}

	.category-tag {
		background: #e3f2fd;
		color: #1976d2;
		padding: 4px 10px;
		border-radius: 12px;
		font-size: 0.75em;
		font-weight: 600;
	}

	.due-date {
		font-size: 0.8125em;
		color: #666;
	}

	.due-date.overdue {
		color: #d32f2f;
		font-weight: 600;
	}

	.task-actions {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
	}

	.status-compact, .status-select {
		padding: 8px 12px;
		border: 2px solid #ddd;
		border-radius: 6px;
		font-size: 0.875em;
		font-weight: 600;
		cursor: pointer;
		min-width: 150px;
	}

	.completed-date {
		font-size: 0.75em;
		color: #4CAF50;
		font-weight: 600;
	}

	.task-notes {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #e0e0e0;
		font-size: 0.875em;
		color: #666;
	}

	.no-selection {
		text-align: center;
		padding: 100px 20px;
		color: #999;
		font-size: 1em;
	}

	/* Dependency styles */
	.task-card.dependency-blocked {
		opacity: 0.7;
		background: #fff9f0;
	}

	.dependency-lock {
		margin-left: 8px;
		font-size: 1em;
		cursor: help;
	}

	.dependency-warning {
		background: #fff3cd;
		border-left: 3px solid #ff9800;
		padding: 8px 12px;
		margin: 10px 0;
		border-radius: 4px;
		font-size: 0.8125em;
		color: #856404;
	}

	.dependency-warning strong {
		color: #000;
	}

	.dep-status {
		font-style: italic;
		color: #666;
	}

	.blocked-indicator {
		background: #ff9800;
		color: white;
		padding: 4px 10px;
		border-radius: 4px;
		font-size: 0.6875em;
		font-weight: 600;
		text-transform: uppercase;
	}

	.status-compact, .status-select:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	/* Task Sections */
	.tasks-section {
		margin-bottom: 30px;
	}

	.section-title {
		font-size: 1em;
		font-weight: bold;
		margin-bottom: 15px;
		padding-bottom: 8px;
		border-bottom: 2px solid #4CAF50;
		color: #2c5530;
	}

	.other-tasks-section {
		margin-top: 40px;
	}

	.other-tasks-section .section-title {
		border-bottom-color: #999;
		color: #666;
	}

	/* Readonly Task Cards */
	.task-card-readonly {
		opacity: 0.9;
		background: #fafafa;
	}

	.task-card-readonly.status-completed {
		background: #f5f5f5;
	}

	.assigned-to {
		font-size: 0.8125em;
		color: #666;
		font-weight: 600;
	}

	.assigned-to.unassigned {
		color: #999;
		font-style: italic;
	}

	.status-display {
		padding: 8px 16px;
		border-radius: 6px;
		font-size: 0.8125em;
		font-weight: 600;
		text-align: center;
		min-width: 120px;
		display: inline-block;
	}

	.status-display.status-pending {
		background: #e3f2fd;
		color: #1976d2;
	}

	.status-display.status-in_progress {
		background: #fff3e0;
		color: #f57c00;
	}

	.status-display.status-completed {
		background: #e8f5e9;
		color: #388e3c;
	}

	.status-display.status-blocked {
		background: #ffebee;
		color: #c62828;
	}

	/* Viewport-fitted layout */
	
	.hire-list {
		height: 100%;
		overflow-y: auto;
	}

	.task-details {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.hire-header {
		flex-shrink: 0;
	}

	/* Compact two-column layout */
	.tasks-columns {
		display: flex;
		gap: 15px;
		flex: 1;
		min-height: 0;
	}

	.tasks-columns.one-column {
		display: flex;
	}

	.tasks-columns.one-column .tasks-column {
		flex: 1;
	}

	.tasks-columns.two-columns .tasks-column {
		flex: 1;
		min-width: 0;
	}

	.tasks-column {
		display: flex;
		flex-direction: column;
		border: 1px solid #ddd;
		border-radius: 6px;
		background: #f9f9f9;
		
	}

	.column-title {
		margin: 0;
		padding: 12px;
		background: #4CAF50;
		color: white;
		font-size: 0.875em;
		font-weight: 600;
		border-radius: 6px 6px 0 0;
		flex-shrink: 0;
	}

	.tasks-scrollable {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
		min-height: 0;
	}

	/* Compact task cards */
	.task-compact {
		background: white;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		padding: 8px;
		margin-bottom: 8px;
		transition: all 0.2s;
	}

	.task-compact:hover {
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}

	.task-compact.status-completed {
		background: #e8f5e9;
		border-left: 3px solid #4CAF50;
	}

	.task-compact.status-in_progress {
		background: #fff8e1;
		border-left: 3px solid #FFC107;
	}

	.task-compact.status-pending {
		background: #e3f2fd;
		border-left: 3px solid #2196F3;
	}

	.task-row {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.task-title-compact {
		flex: 1;
		font-weight: 500;
		font-size: 0.8125em;
		color: #333;
	}

	.step-icon {
		font-size: 1.2em;
		margin-right: 5px;
		display: inline-block;
		vertical-align: middle;
	}

	.step-icon-svg {
		width: 18px;
		height: 18px;
		margin-right: 5px;
		vertical-align: middle;
	}

	.status-compact {
		padding: 4px 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 0.75em;
		background: white;
		min-width: 110px;
	}

	.assigned-compact {
		font-size: 0.6875em;
		color: #666;
		padding: 2px 6px;
		background: #f5f5f5;
		border-radius: 3px;
	}

/*	.status-badge {
		font-size: 0.75em;
		font-weight: 600;
		padding: 3px 8px;
		border-radius: 3px;
		text-transform: uppercase;
		min-width: 80px;
		text-align: center;
		display: inline-block;
	}*/

	.status-badge.status-completed {
		background: #4CAF50;
		color: white;
	}

	.status-badge.status-in_progress {
		background: #FFC107;
		color: #000;
	}

	.status-badge.status-pending {
		background: #2196F3;
		color: white;
	}

	.blocked-msg {
		margin-top: 4px;
		font-size: 0.6875em;
		color: #d32f2f;
		font-weight: 500;
	}

	.task-compact.readonly {
		background: #fafafa;
	}

	/* Responsive Layout for Portrait/Narrow Screens */
	@media (max-width: 1300px) {
		.header {
			flex-direction: column;
			gap: 0;
			justify-content: center;
		}

		.header > * {
			text-align: center;
			margin: 2px;
		}

		.header h1 {
			font-size: 0.9em;
		}

		.task-layout {
			grid-template-columns: 1fr;
			gap: 0;
			height: auto;
		}

		.hire-list-wrapper {
			border-right: none;
			border-bottom: 1px solid #ddd;
			padding-right: 0;
			padding: 2px;
			margin-bottom: 2px;
		}

		.hire-list-title {
			font-size: 0.8em;
			margin-bottom: 8px;
		}

		.hire-list {
			height: 300px;
		}

		.hire-card {
			padding: 10px;
			margin-bottom: 8px;
		}

		.hire-name {
			font-size: 0.8em;
		}

		.hire-info {
			font-size: 1em;
		}

		.hire-company {
			font-size: 0.55em;
		}

		.task-summary {
			font-size: 0.6em;
		}

		.task-details {
			display: none;
		}

		.hire-header {
			margin-bottom: 2px;
			padding-bottom: 2px;
		}

		.hire-header h2 {
			font-size: 0.9em;
		}

		.hire-header p {
			font-size: 0.7em;
		}

		.tasks-columns {
			flex-direction: column;
			gap: 0;
		}

		.tasks-columns.two-columns .tasks-column {
			flex: 1 1 100%;
			margin-bottom: 2px;
		}

		.column-title {
			padding: 6px;
			font-size: 0.7em;
		}

		.tasks-scrollable {
			padding: 2px;
		}

		.task-compact {
			padding: 2px;
			margin-bottom: 2px;
		}

		.task-title-compact {
			font-size: 0.65em;
		}

		.status-compact {
			font-size: 0.65em !important;
			font-weight: normal;
		}

		.assigned-compact {
			font-size: 0.55em;
		}

		.status-badge {
			font-size: 0.65em;
		}

		.blocked-msg {
			font-size: 0.55em;
		}

		.onboarding-my-tasks {
			padding: 2px;
		}

		/* Mobile Tasks Dialog - No padding */
		.mobile-tasks-dialog-wrapper .ui-dialog-content {
			padding: 0;
		}
	}


/* ============================================================================
   CSS from: v_reports.php
   ============================================================================ */
	.onboarding-admin-container {
		max-width: 1600px;
		margin: 0 auto;
		padding: 20px;
	}

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

	.header-left {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.header-left h1 {
		margin: 0;
	}

	.reports-container {
		background: white;
		padding: 20px;
		border-radius: 8px;
		margin-bottom: 30px;
	}

	.reports-container h2 {
		margin: 0 0 20px 0;
		color: #2c5530;
	}

	.admin-table {
		width: 100%;
		border-collapse: collapse;
	}

	.admin-table th {
		background-color: #f5f5f5;
		padding: 12px;
		text-align: left;
		border-bottom: 2px solid #ddd;
		font-size: 0.875em;
	}

	.admin-table td {
		padding: 12px;
		border-bottom: 1px solid #eee;
		font-size: 0.875em;
	}

	.no-data {
		text-align: center;
		color: #999;
		padding: 40px !important;
		font-style: italic;
	}

	.status-active {
		color: #4CAF50;
		font-weight: 600;
	}

	.status-completed {
		color: #2196F3;
		font-weight: 600;
	}

	.status-on-hold {
		color: #ff9800;
		font-weight: 600;
	}

	.status-cancelled {
		color: #f44336;
		font-weight: 600;
	}

	.progress-bar-container {
		width: 100%;
		height: 20px;
		background-color: #f0f0f0;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 5px;
	}

	.progress-bar {
		height: 100%;
		background-color: #4CAF50;
		transition: width 0.3s;
	}

	.progress-text {
		font-size: 0.75em;
		color: #666;
		text-align: center;
	}

	/* Responsive Layout for Portrait/Narrow Screens */
	@media (max-width: 1300px) {
		.onboarding-admin-container {
			padding: 2px;
		}

		.admin-header {
			flex-direction: column;
			gap: 0;
			margin-bottom: 2px;
		}

		.header-left {
			flex-direction: column;
			gap: 0;
			width: 100%;
			text-align: center;
		}

		.header-left h1 {
			font-size: 0.9em;
			margin: 2px 0;
		}

		.header-left .btn {
			margin: 2px;
		}

		.reports-container {
			padding: 2px;
			margin-bottom: 2px;
		}

		.reports-container h2 {
			font-size: 0.8em;
			margin: 2px 0;
		}

		.admin-table {
			font-size: 0.6em;
		}

		.admin-table th,
		.admin-table td {
			padding: 2px;
		}

		.progress-bar-container {
			height: 12px;
		}

		.progress-text {
			font-size: 0.6em;
		}
	}

/* ============================================================================
   CSS from: header.php
   ============================================================================ */
.onboarding-header {
	background: var(--mbgmain);
	border-bottom: 2px solid #0088cc;
	padding: 12px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.onboarding-header .header-left {
	flex: 0 0 auto;
}

.onboarding-header .person-name {
	font-size: 1em;
	color: white;
	font-weight: 600;
	white-space: nowrap;
}

/* Desktop Navigation */
.header-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	justify-content: center;
}

.nav-link {
	color: white;
	text-decoration: none;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 0.875em;
	font-weight: 500;
	transition: all 0.2s;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	white-space: nowrap;
}

.nav-link:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.4);
}

.nav-link-action {
	background: rgba(76, 175, 80, 0.3);
	border-color: rgba(76, 175, 80, 0.5);
}

.nav-link-action:hover {
	background: rgba(76, 175, 80, 0.5);
	border-color: rgba(76, 175, 80, 0.7);
}

.onboarding-header .header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* Mobile Menu Toggle - Hidden on Desktop */
.mobile-menu-toggle {
	display: none;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	padding: 6px 10px;
	cursor: pointer;
	transition: all 0.2s;
	color: white;
}

.mobile-menu-toggle:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.6);
}

.mobile-menu-toggle svg {
	display: block;
	width: 20px;
	height: 20px;
}

.onboarding-header .profile-btn {
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	padding: 6px 10px;
	cursor: pointer;
	transition: all 0.2s;
	color: white;
}

.onboarding-header .profile-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.6);
}

.onboarding-header .profile-btn svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Mobile Navigation - Hidden by Default */
.mobile-nav {
	background: #0088cc;
	border-bottom: 2px solid #006699;
	padding: 10px 0;
	display: none;
}

.mobile-nav-link {
	display: block;
	color: white;
	text-decoration: none;
	padding: 10px 20px;
	font-size: 0.9375em;
	font-weight: 500;
	transition: background 0.2s;
	border-left: 4px solid transparent;
}

.mobile-nav-link:hover {
	background: rgba(255, 255, 255, 0.15);
	border-left-color: white;
}

.mobile-nav-link-action {
	background: rgba(76, 175, 80, 0.2);
}

.mobile-nav-link-action:hover {
	background: rgba(76, 175, 80, 0.35);
}

.mobile-nav-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
	margin: 8px 20px;
}

#profile-dialog {
	padding: 15px;
	font-size: 0.75em;
	max-height: 550px;
	overflow-y: auto;
}

#profile-dialog .profile-section {
	margin-bottom: 15px;
}

#profile-dialog .profile-section:last-child {
	margin-bottom: 0;
}

#profile-dialog .profile-section h3 {
	margin: 0 0 10px 0;
	padding-bottom: 6px;
	border-bottom: 1px solid #ddd;
	font-size: 0.8125em;
	color: #333;
}

#profile-dialog .profile-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.75em;
}

#profile-dialog .profile-table td,
#profile-dialog .profile-table th {
	padding: 4px 8px;
	text-align: left;
	border-bottom: 1px solid #eee;
}

#profile-dialog .profile-table tr:last-child td {
	border-bottom: none;
}

#profile-dialog .connected-users th {
	background: #f5f5f5;
	font-weight: 600;
	color: #333;
	border-bottom: 2px solid #ddd;
	font-size: 0.75em;
}

#profile-dialog .connected-users td {
	font-size: 0.75em;
}


#profile-dialog .no-data {
	padding: 12px;
	text-align: center;
	color: #999;
	font-style: italic;
	font-size: 0.75em;
}

/* Responsive Layout for Mobile/Tablet */
@media (max-width: 1300px) {
	#profile-dialog {
		max-height: 450px;
	}

	.profile-table {
		font-size: 0.6875em;
	}

	.profile-table th,
	.profile-table td {
		padding: 3px 6px;
	}
}

/* ============================================================================
   End of Consolidated CSS
   ============================================================================ */

/* ============================================================================
   Header Layout Updates - System Title and Person Name Positioning
   ============================================================================ */

.system-title {
	margin: 0;
	font-size: 1.25em;
	color: white;
	font-weight: bold;
}

.onboarding-header .header-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.onboarding-header .header-right .person-name {
	font-size: 0.9em;
	color: white;
	font-weight: 500;
	white-space: nowrap;
}

/* Keep person name and profile icon together */
.onboarding-header .header-right .person-name + .profile-btn {
	margin-left: 5px;
}

/* Mobile Header - Hidden by default */
.onboarding-header-mobile {
	display: none;
	background: deepskyblue;
	border-bottom: 2px solid #0088cc;
	padding: 10px 15px;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 20px;
}

.onboarding-header-mobile .mobile-header-title {
	flex: 1 1 auto;
	min-width: 0;
}

.onboarding-header-mobile .system-title {
	font-size: 1em;
	color: white;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.onboarding-header-mobile .mobile-header-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	align-items: center;
}

.onboarding-header-mobile .mobile-menu-toggle,
.onboarding-header-mobile .profile-btn {
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	padding: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
	color: white;
	flex-shrink: 0;
}

.onboarding-header-mobile .mobile-menu-toggle:hover,
.onboarding-header-mobile .profile-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.6);
}

.onboarding-header-mobile .mobile-menu-toggle svg,
.onboarding-header-mobile .profile-btn svg {
	width: 24px;
	height: 24px;
	display: block;
	margin: 0;
}

/* Responsive Header Toggle */
@media (max-width: 1300px) {
	/* Hide desktop header */
	.onboarding-header {
		display: none !important;
	}

	/* Show mobile header */
	.onboarding-header-mobile {
		display: flex;
	}

	/* Hide desktop navigation dropdown */
	.mobile-nav {
		background: #0088cc;
		border-bottom: 2px solid #006699;
		padding: 10px 0;
	}

	/* Smaller button font sizes on mobile */
	.btn {
		font-size: 0.875em;
		padding: 6px 12px;
	}

	.btn-sm {
		font-size: 0.8125em;
		padding: 4px 10px;
	}

	.btn-lg {
		font-size: 1em;
		padding: 10px 20px;
	}
}


/* Mobile Tasks Dialog */
.mobile-tasks-wrapper {
	padding: 10px;
}

.mobile-section-title {
	margin: 15px 0 10px 0;
	font-size: 1em;
	font-weight: 600;
	color: #333;
	border-bottom: 2px solid #4CAF50;
	padding-bottom: 5px;
}

.mobile-section-title:first-child {
	margin-top: 0;
}

.mobile-tasks-list {
	margin-bottom: 15px;
}

/* ============================================================================
   Loading Spinner Overlay
   ============================================================================ */
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner-container {
	text-align: center;
	background: white;
	padding: 40px 50px;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.spinner {
	border: 6px solid #f3f3f3;
	border-top: 6px solid #4CAF50;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.spinner-text {
	color: #333;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
}