/**
 * HRC Dev Fixes
 * 
 * Consolidated styles previously inline in header.php.
 * These are production-ready styles that have been tested and confirmed.
 * 
 * @package Verimus
 * @since 2.0.0
 */

/* Logo max-width */
.verimus-icon { max-width: 160px; }
@media (max-width: 767px) { .verimus-icon { max-width: 130px !important; } }

/* Stats tabs responsive */
@media (max-width: 1280px) {
	.search-tabs-front-page { flex-wrap: wrap; padding: 15px 20px; gap: 8px; }
	.search-tabs-front-page .search-tab { flex: 1 1 auto; min-width: 120px; max-width: 200px; font-size: var(--font-size-2xs); }
	.search-tabs-front-page .divider { display: none; }
}
@media (max-width: 1199px) {
	.search-tabs-front-page { overflow-x: auto; flex-wrap: nowrap; gap: 0; }
	.search-tabs-front-page .search-tab { flex: 0 0 auto; max-width: none; white-space: nowrap; }
	.search-tabs-front-page .count { font-size: 26px; }
	.search-tabs-front-page .divider { height: 50px; margin-inline: 20px; }
}
@media (max-width: 991px) {
	.search-tabs-front-page { padding: 12px 15px; }
	.search-tabs-front-page .search-tab { min-width: 100px; font-size: var(--font-size-2xs); }
	.search-tabs-front-page .count { font-size: 22px; }
	.search-tabs-front-page .divider { height: 40px; margin-inline: 12px; }
}
@media (max-width: 767px) {
	.search-tabs-front-page { padding: 10px 12px; }
	.search-tabs-front-page .search-tab { min-width: 85px; font-size: 9px; }
	.search-tabs-front-page .count { font-size: var(--font-size-lg); }
	.search-tabs-front-page .divider { height: 35px; margin-inline: 8px; }
}

/* Tasks full width on tablet */
@media (max-width: 991px) {
	.quick-actions__main .col-md-6 { flex: 0 0 100%; max-width: 100%; }
	.my-task__container { border-right: 0; border-bottom: 1px solid var(--grayscale-150); padding-bottom: 20px; margin-bottom: 20px; }
}

/* Task cards bottom margin */
#my-tasks .task__item,
#employee-tasks .task__item { margin-bottom: 12px; }

/* Task tags - rounded with padding */
.task__tag .tag-div,
.task__tag .tag-author,
.task__tag .author-name,
.dashboard-task-item .tag-div { 
	border-radius: var(--radius-full) !important;
	padding: 4px 12px !important;
	display: inline-block;
	margin-bottom: 6px;
}

/* Keep created and due on same line */
.task__tag {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Force mobile card view for DataTables */
@media screen and (max-width: 991px) {
	/* Hide horizontal scroll wrapper */
	.dt-scroll-body { overflow-x: visible !important; }
	.dt-scroll { overflow: visible !important; }

	/* Show mobile card column */
	#templates-table .dt-mobile,
	#documents-table .dt-mobile,
	.dataTable .dt-mobile { display: table-cell !important; }

	/* Hide desktop columns on mobile */
	#templates-table thead,
	#documents-table thead,
	.dataTable thead { display: none !important; }

	#templates-table tbody tr td:not(.dt-mobile),
	#documents-table tbody tr td:not(.dt-mobile),
	.dataTable tbody tr td:not(.dt-mobile) { display: none !important; }

	/* Style the mobile card */
	#templates-table tbody tr,
	#documents-table tbody tr {
		display: block !important;
		margin-bottom: 16px;
		border: 1px solid #e0e0e0;
		border-radius: var(--radius-input);
		padding: 12px;
		background: #fff;
	}

	#templates-table .dt-mobile,
	#documents-table .dt-mobile,
	.dataTable .dt-mobile {
		display: block !important;
		border: none !important;
		padding: 0 !important;
	}

	/* Bold labels on mobile cards */
	.dt-mobile .td-label { font-weight: 700; }

	/* Tags styling on mobile cards */
	.dt-mobile .td-tags,
	.dt-mobile .tag-div {
		border-radius: var(--radius-full) !important;
		width: auto !important;
		display: inline-block !important;
	}

	/* Category tags smaller and inline */
	.dt-mobile .td-categories .td-tags,
	.dt-mobile .td-category .td-tags {
		font-size: var(--font-size-xs) !important;
		padding: 4px 10px !important;
	}

	/* Category row - label and tag inline */
	.dt-mobile .td-categories,
	.dt-mobile .td-category {
		display: block !important;
	}

	.dt-mobile .td-categories .td-label,
	.dt-mobile .td-category .td-label {
		display: inline;
		margin-right: 8px;
	}

	.dt-mobile .td-categories .td-tags,
	.dt-mobile .td-category .td-tags {
		display: inline-block !important;
		width: auto !important;
	}

	.dt-mobile .td-categories .td-tags,
	.dt-mobile .td-category .td-tags,
	td.dt-mobile .td-categories .td-tags,
	td.dt-mobile .td-category .td-tags,
	.td-categories .td-tags,
	.td-category .td-tags {
		width: auto !important;
		max-width: fit-content !important;
		display: inline-block !important;
		flex-shrink: 0;
	}
}