/* ==========================================================================
   Traffic Light Training Matrix — Stylesheet
   Compatible with WordPress 6.9 admin and front-end themes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrap & layout
   -------------------------------------------------------------------------- */

.tltm-wrap,
.tltm-frontend-wrap {
	max-width: 100%;
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */

.tltm-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
}

.tltm-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

.tltm-badge.tltm-green { background-color: #2e7d32; }
.tltm-badge.tltm-amber { background-color: #e65100; }
.tltm-badge.tltm-red   { background-color: #c62828; }
.tltm-badge.tltm-grey  { background-color: #546e7a; }

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.tltm-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
}

.tltm-search-bar {
	margin-bottom: 10px;
}

#tltm-learner-search,
.tltm-learner-search {
	padding: 5px 10px;
	border: 1px solid #bbb;
	border-radius: 4px;
	font-size: 13px;
	width: 260px;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Summary cards
   -------------------------------------------------------------------------- */

.tltm-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 16px 0 20px;
}

.tltm-summary-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	min-width: 100px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.tltm-summary-card span {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 4px;
}

.tltm-summary-card.tltm-green { background: linear-gradient(135deg, #2e7d32, #43a047); }
.tltm-summary-card.tltm-amber { background: linear-gradient(135deg, #e65100, #f57c00); }
.tltm-summary-card.tltm-red   { background: linear-gradient(135deg, #c62828, #e53935); }
.tltm-summary-card.tltm-grey  { background: linear-gradient(135deg, #546e7a, #78909c); }

/* --------------------------------------------------------------------------
   Matrix table wrapper (enables horizontal scroll on small screens)
   -------------------------------------------------------------------------- */

.tltm-table-wrapper {
	overflow-x: auto;
	margin-top: 12px;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* --------------------------------------------------------------------------
   Matrix table
   -------------------------------------------------------------------------- */

.tltm-matrix-table {
	border-collapse: collapse;
	min-width: 600px;
	width: 100%;
	font-size: 13px;
	background: #fff;
}

.tltm-matrix-table th,
.tltm-matrix-table td {
	border: 1px solid #e0e0e0;
	padding: 7px 9px;
	vertical-align: middle;
	text-align: center;
}

/* Sticky learner column header */
.tltm-learner-col {
	text-align: left !important;
	min-width: 190px;
	background: #f5f5f5;
	font-weight: 700;
	position: sticky;
	left: 0;
	z-index: 2;
	border-right: 2px solid #ddd;
}

/* Course column headers */
.tltm-course-col {
	max-width: 130px;
	background: #f9f9f9;
	padding: 6px 8px;
	vertical-align: bottom;
}

/* Higher specificity needed to override WP admin's th { text-align: left } */
.tltm-matrix-table th.tltm-course-col {
	text-align: center;
}

.tltm-course-col.tltm-required-col {
	background: #fff8e1;
}

.tltm-course-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-break: break-word;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.tltm-renewal-label {
	display: block;
	text-align: center;
}

.tltm-renewal-label {
	display: block;
	font-size: 10px;
	color: #888;
	font-style: italic;
	margin-top: 3px;
	font-weight: 400;
}

.tltm-required-star {
	color: #c62828;
	font-weight: 700;
	margin-left: 2px;
}

/* --------------------------------------------------------------------------
   Learner name cell (sticky)
   -------------------------------------------------------------------------- */

.tltm-learner-name {
	text-align: left !important;
	padding: 7px 12px !important;
	white-space: nowrap;
	background: #fff;
	position: sticky;
	left: 0;
	z-index: 1;
	border-right: 2px solid #e0e0e0;
}

.tltm-learner-name strong {
	display: block;
	font-size: 13px;
}

.tltm-learner-name small {
	display: block;
	color: #777;
	font-size: 11px;
	margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Traffic light cells
   -------------------------------------------------------------------------- */

.tltm-cell {
	transition: filter 0.15s ease;
	min-width: 56px;
}

.tltm-cell.tltm-green { background-color: #e8f5e9; }
.tltm-cell.tltm-amber { background-color: #fff8e1; }
.tltm-cell.tltm-red   { background-color: #ffebee; }
.tltm-cell.tltm-grey  { background-color: #f5f5f5; }

.tltm-indicator {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.tltm-cell.tltm-green .tltm-indicator { color: #2e7d32; }
.tltm-cell.tltm-amber .tltm-indicator { color: #e65100; }
.tltm-cell.tltm-red   .tltm-indicator { color: #c62828; }
.tltm-cell.tltm-grey  .tltm-indicator { color: #b0bec5; }

.tltm-expiry-date {
	display: block;
	font-size: 10px;
	color: #bf360c;
	margin-top: 2px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hover / highlight effects
   -------------------------------------------------------------------------- */

.tltm-matrix-table tbody tr:hover .tltm-learner-name {
	background: #f0f4ff;
}

.tltm-matrix-table tbody tr:hover .tltm-cell {
	filter: brightness(0.93);
}

/* Column highlight on header hover (via JS class) */
.tltm-col-hover {
	filter: brightness(0.88) !important;
}

/* Alternating row shading for the sticky learner column */
.tltm-matrix-table tbody tr:nth-child(even) .tltm-learner-name {
	background-color: #fafafa;
}

/* --------------------------------------------------------------------------
   Footer note
   -------------------------------------------------------------------------- */

.tltm-footer-note {
	margin-top: 10px;
	font-size: 12px;
	color: #777;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Personal dashboard ([tltm_my_training])
   -------------------------------------------------------------------------- */

.tltm-personal-dashboard {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.10);
	max-width: 760px;
}

.tltm-course-list {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.tltm-course-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 10px;
	border-radius: 8px;
	border-left: 5px solid transparent;
}

.tltm-course-item.tltm-green { background: #e8f5e9; border-color: #2e7d32; }
.tltm-course-item.tltm-amber { background: #fff8e1; border-color: #e65100; }
.tltm-course-item.tltm-red   { background: #ffebee; border-color: #c62828; }
.tltm-course-item.tltm-grey  { background: #f5f5f5; border-color: #90a4ae; }

.tltm-course-item-title {
	font-weight: 600;
	font-size: 14px;
}

.tltm-course-item-meta {
	font-size: 12px;
	color: #666;
	margin-top: 4px;
}

.tltm-status-badge {
	padding: 4px 12px;
	border-radius: 14px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	flex-shrink: 0;
}

.tltm-status-badge.tltm-green { background: #2e7d32; }
.tltm-status-badge.tltm-amber { background: #e65100; }
.tltm-status-badge.tltm-red   { background: #c62828; }
.tltm-status-badge.tltm-grey  { background: #546e7a; }

/* Progress bar inside course item */
.tltm-progress-bar-wrap {
	display: inline-block;
	vertical-align: middle;
	width: 100px;
	height: 8px;
	background: #ddd;
	border-radius: 4px;
	overflow: hidden;
	margin-left: 6px;
}

.tltm-progress-bar {
	display: block;
	height: 100%;
	background: #1976d2;
	border-radius: 4px;
	transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   Notice (not-logged-in message etc.)
   -------------------------------------------------------------------------- */

.tltm-notice {
	background: #f0f0f0;
	border-left: 4px solid #bbb;
	padding: 12px 16px;
	border-radius: 4px;
	color: #444;
}

/* --------------------------------------------------------------------------
   Manual record badge and editable cell cursor
   -------------------------------------------------------------------------- */

td[data-editable="1"] {
	cursor: pointer;
	position: relative;
}

td[data-editable="1"]:hover {
	outline: 2px solid #1976d2;
	outline-offset: -2px;
}

.tltm-manual-badge {
	display: inline-block;
	background: #1565c0;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 3px;
	vertical-align: super;
	margin-left: 2px;
	letter-spacing: 0.02em;
}

.tltm-cell.tltm-manual {
	/* Slightly richer shade to indicate manually entered data */
}

.tltm-cell.tltm-green.tltm-manual  { background-color: #c8e6c9; }
.tltm-cell.tltm-amber.tltm-manual  { background-color: #ffe0b2; }

/* --------------------------------------------------------------------------
   Manual completion modal
   -------------------------------------------------------------------------- */

#tltm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

#tltm-modal {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.tltm-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 12px;
	border-bottom: 1px solid #e0e0e0;
}

.tltm-modal-header h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
}

.tltm-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	padding: 0 4px;
}

.tltm-modal-close:hover {
	color: #c62828;
}

.tltm-modal-body {
	padding: 16px 20px;
	flex: 1;
}

.tltm-modal-context {
	background: #f5f5f5;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: 13px;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.tltm-modal-context span {
	color: #666;
}

.tltm-ld-notice {
	background: #e8f5e9;
	border-left: 4px solid #2e7d32;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	color: #1b5e20;
	margin-bottom: 14px;
}

.tltm-field {
	margin-bottom: 14px;
}

.tltm-field label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 5px;
	color: #333;
}

.tltm-field label small {
	font-weight: 400;
	color: #777;
}

.tltm-field input[type="text"],
.tltm-field input[type="date"],
.tltm-field textarea {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid #bbb;
	border-radius: 5px;
	font-size: 13px;
	box-sizing: border-box;
}

.tltm-field input[type="date"] {
	width: auto;
	min-width: 180px;
}

.tltm-field textarea {
	resize: vertical;
}

.tltm-required {
	color: #c62828;
}

.tltm-renewal-hint {
	display: block;
	color: #1565c0;
	font-size: 12px;
	margin-top: 4px;
}

#tltm-existing-cert {
	font-size: 13px;
	margin-bottom: 6px;
}

#tltm-existing-cert a {
	color: #1565c0;
}

.tltm-modal-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 16px;
	border-top: 1px solid #e0e0e0;
	flex-wrap: wrap;
}

.tltm-delete-btn {
	color: #c62828 !important;
	border-color: #c62828 !important;
}

.tltm-delete-btn:hover {
	background: #ffebee !important;
}

.tltm-modal-error {
	color: #c62828;
	font-size: 13px;
	flex: 1;
}

/* --------------------------------------------------------------------------
   Category group header row
   -------------------------------------------------------------------------- */

.tltm-cat-header-row th {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 5px 8px;
	border-bottom: 2px solid #fff;
}

/* Spacer cell for the sticky learner column */
.tltm-cat-spacer {
	background: #f5f5f5 !important;
	border-right: 2px solid #ddd;
}

/* --------------------------------------------------------------------------
   Category group headers — accessible colour palette
   All colours verified at WCAG AA (≥ 4.5:1) contrast against #ffffff.
   PHP assigns tltm-cat-color-1…8 cycling, so up to 8 categories get a
   distinct colour; further categories repeat the cycle gracefully.
   -------------------------------------------------------------------------- */

.tltm-cat-group-header {
	color: #fff;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 10px;
	/* Fallback for any header that hasn't been assigned a colour class */
	background-color: #37474f; /* dark blue-grey, 10.9:1 on white */
}

/* 8-colour accessible palette — all > 4.5:1 contrast ratio with white */
.tltm-cat-group-header.tltm-cat-color-1 { background-color: #1565c0; } /* dark blue    7.1:1  */
.tltm-cat-group-header.tltm-cat-color-2 { background-color: #2e7d32; } /* dark green   7.8:1  */
.tltm-cat-group-header.tltm-cat-color-3 { background-color: #6a1b9a; } /* dark purple  9.2:1  */
.tltm-cat-group-header.tltm-cat-color-4 { background-color: #bf360c; } /* dark orange  6.5:1  */
.tltm-cat-group-header.tltm-cat-color-5 { background-color: #00695c; } /* dark teal    7.1:1  */
.tltm-cat-group-header.tltm-cat-color-6 { background-color: #283593; } /* dark indigo  9.4:1  */
.tltm-cat-group-header.tltm-cat-color-7 { background-color: #558b2f; } /* dark olive   5.2:1  */
.tltm-cat-group-header.tltm-cat-color-8 { background-color: #37474f; } /* dark slate   10.9:1 */

.tltm-cat-count {
	font-weight: 400;
	opacity: 0.8;
	margin-left: 4px;
}

/* Separator line between category groups */
.tltm-matrix-table tbody tr td.tltm-cat-boundary-left {
	border-left: 3px solid #bbb;
}

/* Active filter pill */
.tltm-active-filter-pill {
	display: inline-block;
	background: #e3f2fd;
	border: 1px solid #90caf9;
	border-radius: 6px;
	padding: 5px 14px;
	font-size: 13px;
	margin: 6px 0 12px;
	color: #0d47a1;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.tltm-pagination {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.tltm-page-info {
	font-size: 13px;
	color: #555;
}

/* --------------------------------------------------------------------------
   Summary cards — active state + filter hint
   -------------------------------------------------------------------------- */

.tltm-summary-card.tltm-active-filter {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.2);
}

.tltm-summary-hint {
	font-size: 12px;
	color: #888;
	font-style: italic;
	margin: -8px 0 14px;
}

/* --------------------------------------------------------------------------
   Quick filter buttons
   -------------------------------------------------------------------------- */

.tltm-qf-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 14px;
	flex-wrap: wrap;
}

.tltm-qf-label {
	font-size: 13px;
	color: #555;
	font-weight: 600;
}

.tltm-qf-btn {
	font-size: 12px !important;
	padding: 3px 10px !important;
	height: auto !important;
	line-height: 1.4 !important;
}

.tltm-qf-btn.tltm-qf-active {
	background: #1565c0 !important;
	border-color: #1565c0 !important;
	color: #fff !important;
}

.tltm-qf-clear {
	font-size: 12px !important;
	padding: 3px 10px !important;
	height: auto !important;
	line-height: 1.4 !important;
	color: #c62828 !important;
	border-color: #c62828 !important;
}

/* --------------------------------------------------------------------------
   Compliance score column
   -------------------------------------------------------------------------- */

.tltm-score-col {
	min-width: 72px;
	max-width: 88px;
	background: #f5f5f5;
	font-weight: 700;
	text-align: center !important;
	border-left: 2px solid #ddd;
	position: sticky;
	right: 0;
	z-index: 2;
}

.tltm-score-cell {
	text-align: center !important;
	border-left: 2px solid #ddd;
	position: sticky;
	right: 0;
	z-index: 1;
	white-space: nowrap;
	padding: 5px 8px;
}

.tltm-score-fraction {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.tltm-score-pct {
	display: block;
	font-size: 11px;
	opacity: 0.75;
	margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Role-mandatory gap indicator
   -------------------------------------------------------------------------- */

.tltm-cell.tltm-role-req-gap {
	outline: 2px solid #f57c00;
	outline-offset: -2px;
}

.tltm-role-req-marker {
	display: inline-block;
	font-size: 10px;
	color: #e65100;
	vertical-align: super;
	margin-left: 2px;
	line-height: 1;
}

.tltm-badge.tltm-role-req-badge {
	background-color: #e65100;
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */

@media ( max-width: 768px ) {
	.tltm-summary-card {
		padding: 10px 16px;
		min-width: 80px;
	}
	.tltm-summary-card span {
		font-size: 24px;
	}
	.tltm-course-item {
		flex-direction: column;
		align-items: flex-start;
	}
	.tltm-status-badge {
		align-self: flex-start;
	}
	.tltm-qf-wrap {
		margin-left: 0;
		margin-top: 8px;
	}
}

/* --------------------------------------------------------------------------
   Print stylesheet — for CQC inspection packs (Print / Save as PDF)
   -------------------------------------------------------------------------- */

@media print {

	/* Hide non-essential UI */
	#wpadminbar,
	#adminmenuwrap,
	#adminmenuback,
	#wpfooter,
	#screen-meta,
	.wp-header-end,
	.page-title-action,
	.tltm-filters,
	.tltm-search-bar,
	.tltm-qf-wrap,
	.tltm-summary-hint,
	.tltm-active-filter-pill,
	.tltm-pagination,
	.tltm-footer-note,
	#tltm-modal-overlay,
	.notice,
	.updated,
	.error {
		display: none !important;
	}

	/* Remove WP admin margins so content fills the page */
	#wpcontent,
	#wpbody-content,
	.wrap.tltm-wrap {
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}

	body {
		background: #fff !important;
		font-size: 11pt;
		color: #000;
	}

	/* Page heading */
	.tltm-wrap h1 {
		font-size: 16pt;
		margin: 0 0 10pt;
	}

	/* Print date in footer area */
	.tltm-wrap::after {
		content: 'Printed: ' attr(data-print-date);
		display: block;
		font-size: 9pt;
		color: #888;
		margin-top: 8pt;
	}

	/* Summary cards — compact row for print */
	.tltm-summary {
		flex-wrap: nowrap;
		gap: 6pt;
		margin-bottom: 10pt;
	}

	.tltm-summary-card {
		padding: 6pt 10pt;
		min-width: 60pt;
		box-shadow: none;
		border: 1pt solid rgba(0,0,0,0.15);
	}

	.tltm-summary-card span {
		font-size: 18pt;
	}

	/* Table wrapper — no scroll, full width */
	.tltm-table-wrapper {
		overflow: visible !important;
		box-shadow: none;
		margin-top: 6pt;
	}

	/* Force traffic light colours to print */
	.tltm-cell.tltm-green { background-color: #c8e6c9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.tltm-cell.tltm-amber { background-color: #ffe0b2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.tltm-cell.tltm-red   { background-color: #ffcdd2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.tltm-cell.tltm-grey  { background-color: #eeeeee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

	.tltm-cell.tltm-green .tltm-indicator { color: #1b5e20 !important; }
	.tltm-cell.tltm-amber .tltm-indicator { color: #bf360c !important; }
	.tltm-cell.tltm-red   .tltm-indicator { color: #b71c1c !important; }

	.tltm-score-cell {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Category header colours — force print */
	.tltm-cat-group-header,
	.tltm-cat-group-header.tltm-cat-color-1,
	.tltm-cat-group-header.tltm-cat-color-2,
	.tltm-cat-group-header.tltm-cat-color-3,
	.tltm-cat-group-header.tltm-cat-color-4,
	.tltm-cat-group-header.tltm-cat-color-5,
	.tltm-cat-group-header.tltm-cat-color-6,
	.tltm-cat-group-header.tltm-cat-color-7,
	.tltm-cat-group-header.tltm-cat-color-8 {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Sticky positioning doesn't work in print — reset it */
	.tltm-learner-col,
	.tltm-learner-name,
	.tltm-score-col,
	.tltm-score-cell {
		position: static !important;
	}

	/* Keep rows together across page breaks */
	.tltm-matrix-table { page-break-inside: auto; }
	.tltm-matrix-table thead { display: table-header-group; }
	.tltm-matrix-table tbody tr { page-break-inside: avoid; }

	/* Legend */
	.tltm-legend {
		margin-bottom: 8pt;
	}
	.tltm-badge {
		font-size: 9pt;
		padding: 3pt 8pt;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Smaller text in table for more columns per page */
	.tltm-matrix-table th,
	.tltm-matrix-table td {
		font-size: 9pt;
		padding: 4pt 5pt;
	}

	.tltm-course-title {
		font-size: 8pt;
		max-width: none;
	}

	.tltm-renewal-label,
	.tltm-expiry-date {
		font-size: 7pt;
	}

	.tltm-indicator {
		font-size: 13pt;
	}
}

/* ==========================================================================
   Course set / view manager
   ========================================================================== */

.tltm-set-manager {
	margin: 12px 0 16px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fafafa;
}

.tltm-set-manager-toggle {
	cursor: pointer;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 13px;
	user-select: none;
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
}

.tltm-set-manager-toggle::-webkit-details-marker { display: none; }

.tltm-set-manager-toggle small {
	font-weight: 400;
	color: #888;
	font-size: 12px;
}

.tltm-set-manager-body {
	padding: 14px 16px 16px;
	border-top: 1px solid #e0e0e0;
}

.tltm-sets-table th,
.tltm-sets-table td {
	font-size: 13px;
	padding: 7px 12px;
}

.tltm-set-scope-global {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 11px;
	background: #e3f2fd;
	color: #0d47a1;
	font-weight: 600;
}

.tltm-set-scope-group {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 11px;
	background: #f3e5f5;
	color: #4a148c;
	font-weight: 600;
}

.tltm-set-form-wrap {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 14px 16px;
}

.tltm-set-form-wrap h4 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
}

.tltm-set-form-fields {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.tltm-set-course-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.tltm-set-course-list {
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 10px;
	background: #fafafa;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 3px 12px;
}

.tltm-set-course-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	cursor: pointer;
	padding: 2px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tltm-set-course-item:hover {
	color: #2271b1;
}

.tltm-set-form-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.tltm-set-msg {
	font-size: 13px;
	font-weight: 600;
}

.tltm-set-msg-success { color: #2e7d32; }
.tltm-set-msg-error   { color: #c62828; }

.tltm-set-pill {
	background: #ede7f6;
	border-color: #b39ddb;
	color: #4a148c;
}

/* ==========================================================================
   Bulk log training modal
   ========================================================================== */

#tltm-bulk-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 100100;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 60px 16px 16px;
	overflow-y: auto;
}

#tltm-bulk-modal {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
	width: 100%;
	max-width: 600px;
	display: flex;
	flex-direction: column;
}

.tltm-bulk-intro {
	margin: 0 0 16px;
	color: #555;
	font-size: 13px;
}

/* Learner selection area */
.tltm-bulk-learners-field {
	margin-top: 4px;
}

.tltm-bulk-learner-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.tltm-bulk-select-all {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-weight: 600;
	cursor: pointer;
}

.tltm-bulk-learner-list {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 10px;
	background: #fafafa;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 12px;
}

.tltm-bulk-learner-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	cursor: pointer;
	padding: 2px 0;
}

.tltm-bulk-learner-item:hover {
	color: #2271b1;
}

.tltm-bulk-selected-count {
	display: block;
	margin-top: 5px;
	color: #888;
	font-size: 12px;
}

.tltm-bulk-result {
	padding: 10px 14px;
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
	border-radius: 4px;
	color: #1b5e20;
	font-size: 13px;
	margin-top: 10px;
}

/* ==========================================================================
   Single-cell modal — change history section
   ========================================================================== */

.tltm-history-wrap {
	margin-top: 20px;
	border-top: 1px solid #e0e0e0;
	padding-top: 14px;
}

.tltm-history-heading {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #444;
}

.tltm-history-table {
	font-size: 12px;
}

.tltm-history-table th,
.tltm-history-table td {
	padding: 6px 10px;
}

/* ==========================================================================
   Audit log admin page
   ========================================================================== */

.tltm-audit-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 16px 0;
}

.tltm-audit-table .tltm-audit-col-when    { width: 160px; }
.tltm-audit-table .tltm-audit-col-action  { width: 110px; }
.tltm-audit-table .tltm-audit-col-learner { width: 140px; }
.tltm-audit-table .tltm-audit-col-course  { min-width: 160px; }
.tltm-audit-table .tltm-audit-col-done,
.tltm-audit-table .tltm-audit-col-renewal { width: 100px; }
.tltm-audit-table .tltm-audit-col-by      { width: 130px; }

.tltm-audit-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
}

.tltm-audit-action-created      { background: #2e7d32; }
.tltm-audit-action-updated      { background: #1565c0; }
.tltm-audit-action-deleted      { background: #c62828; }
.tltm-audit-action-bulk_created { background: #558b2f; }
.tltm-audit-action-bulk_updated { background: #1976d2; }

.tltm-audit-count {
	color: #666;
	font-size: 13px;
	margin: 0 0 12px;
}