/* ==========================================================================
   Personal Learner Record — Frontend Dashboard Styles
   ========================================================================== */

/* ── Wrap ───────────────────────────────────────────────────────────────── */
.plr-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	color: #1a1a1a;
	max-width: 960px;
	margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.plr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.plr-heading {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: #1a1a1a;
}
.plr-subheading {
	margin: 0;
	font-size: 13px;
	color: #666;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.plr-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	line-height: 1.4;
	transition: filter 0.15s;
}
.plr-btn:hover { filter: brightness(0.9); }
.plr-btn-primary   { background: #1565c0; color: #fff; }
.plr-btn-secondary { background: #f1f3f4; color: #333; border: 1px solid #ccc; }

.plr-btn-icon {
	background: none;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: background 0.15s;
	text-decoration: none;
	color: #555;
}
.plr-btn-icon:hover { background: #f0f2f5; }
.plr-btn-delete:hover { background: #fdecea; border-color: #e53935; color: #c62828; }

/* ── Summary cards ──────────────────────────────────────────────────────── */
.plr-summary-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}
.plr-summary-card {
	flex: 1 1 120px;
	min-width: 100px;
	text-align: center;
	padding: 16px 12px;
	border-radius: 10px;
	background: #f8f9fa;
	border-top: 4px solid #ccc;
}
.plr-summary-card.plr-green  { border-color: #2e7d32; }
.plr-summary-card.plr-amber  { border-color: #f57c00; }
.plr-summary-card.plr-red    { border-color: #c62828; }
.plr-summary-card.plr-grey   { border-color: #78909c; }
.plr-summary-card.plr-blue   { border-color: #1565c0; }
.plr-summary-card.plr-purple { border-color: #6a1b9a; }

.plr-summary-num {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}
.plr-summary-card.plr-green  .plr-summary-num { color: #2e7d32; }
.plr-summary-card.plr-amber  .plr-summary-num { color: #f57c00; }
.plr-summary-card.plr-red    .plr-summary-num { color: #c62828; }
.plr-summary-card.plr-grey   .plr-summary-num { color: #546e7a; }
.plr-summary-card.plr-blue   .plr-summary-num { color: #1565c0; }
.plr-summary-card.plr-purple .plr-summary-num { color: #6a1b9a; }

.plr-summary-label {
	display: block;
	font-size: 12px;
	color: #666;
	margin-top: 4px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.plr-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #e0e0e0;
	margin-bottom: 24px;
}
.plr-tab {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color 0.15s, border-color 0.15s;
}
.plr-tab:hover        { color: #1565c0; }
.plr-tab-active       { color: #1565c0; border-bottom-color: #1565c0; }
.plr-tab-count {
	background: #1565c0;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 10px;
	line-height: 1.5;
}

/* ── Tab panels ─────────────────────────────────────────────────────────── */
.plr-tab-panel         { display: none; }
.plr-tab-panel-active  { display: block; }

/* ── Course search ──────────────────────────────────────────────────────── */
.plr-search-bar {
	margin-bottom: 18px;
}
.plr-search-bar input {
	width: 100%;
	max-width: 340px;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
}

/* ── Category headers ───────────────────────────────────────────────────── */
.plr-category-section  { margin-bottom: 24px; }
.plr-category-header {
	background: #37474f;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 8px 14px;
	border-radius: 5px;
	margin: 0 0 10px;
}

/* ── Course list ────────────────────────────────────────────────────────── */
.plr-course-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.plr-course-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 7px;
	border-left: 5px solid #ccc;
	background: #fafafa;
	gap: 12px;
}
.plr-course-item.plr-green  { border-left-color: #2e7d32; background: #f1f8f2; }
.plr-course-item.plr-amber  { border-left-color: #f57c00; background: #fff8f0; }
.plr-course-item.plr-red    { border-left-color: #c62828; background: #fdf2f2; }
.plr-course-item.plr-grey   { border-left-color: #90a4ae; background: #f5f6f7; }

.plr-course-item-body { flex: 1; min-width: 0; }

.plr-course-item-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}
.plr-course-item-title a {
	color: #1a1a1a;
	text-decoration: none;
}
.plr-course-item-title a:hover { text-decoration: underline; color: #1565c0; }

.plr-course-item-meta {
	font-size: 12px;
	color: #666;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.plr-progress-bar-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 160px;
	max-width: 100%;
	background: #e0e0e0;
	border-radius: 3px;
	height: 8px;
	position: relative;
}
.plr-progress-bar {
	background: #1565c0;
	height: 100%;
	border-radius: 3px;
	transition: width 0.3s;
}
.plr-progress-bar-wrap span {
	position: absolute;
	right: -32px;
	font-size: 11px;
	color: #555;
}

/* ── Status badge ───────────────────────────────────────────────────────── */
.plr-status-badge {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 12px;
	white-space: nowrap;
}
.plr-badge-green  { background: #e8f5e9; color: #2e7d32; }
.plr-badge-amber  { background: #fff3e0; color: #e65100; }
.plr-badge-red    { background: #ffebee; color: #c62828; }
.plr-badge-grey   { background: #eceff1; color: #546e7a; }

/* ── Coloured meta text ─────────────────────────────────────────────────── */
.plr-green-text { color: #2e7d32; }
.plr-amber-text { color: #e65100; }
.plr-red-text   { color: #c62828; }

/* ── Tab toolbar ────────────────────────────────────────────────────────── */
.plr-tab-toolbar {
	margin-bottom: 18px;
}

/* ── Record cards ───────────────────────────────────────────────────────── */
.plr-records-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.plr-record-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: #fafafa;
	border-radius: 8px;
	border-left: 5px solid #ccc;
}
.plr-border-green { border-left-color: #2e7d32; }
.plr-border-amber { border-left-color: #f57c00; }
.plr-border-red   { border-left-color: #c62828; }

.plr-record-card-body { flex: 1; min-width: 0; }
.plr-record-card-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.plr-record-card-meta {
	font-size: 12px;
	color: #666;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.plr-record-notes {
	font-style: italic;
	color: #888;
}
.plr-record-card-actions {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

/* ── Qualification type badge ───────────────────────────────────────────── */
.plr-qual-type-badge {
	font-size: 11px;
	font-weight: 600;
	background: #ede7f6;
	color: #6a1b9a;
	padding: 2px 8px;
	border-radius: 10px;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.plr-empty {
	color: #888;
	font-style: italic;
	padding: 24px 0;
}
.plr-notice {
	padding: 12px 16px;
	background: #f0f2f5;
	border-radius: 6px;
	color: #555;
}

/* ── Modal overlay ──────────────────────────────────────────────────────── */
.plr-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: 20px;
}
.plr-modal {
	background: #fff;
	border-radius: 10px;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.plr-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid #e0e0e0;
}
.plr-modal-header h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}
.plr-modal-close {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	color: #888;
	line-height: 1;
	padding: 0 4px;
}
.plr-modal-close:hover { color: #333; }
.plr-modal-body { padding: 24px; }

/* ── Form rows ──────────────────────────────────────────────────────────── */
.plr-form-row {
	margin-bottom: 18px;
}
.plr-form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
	color: #444;
}
.plr-form-row input[type="text"],
.plr-form-row input[type="date"],
.plr-form-row select,
.plr-form-row textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	box-sizing: border-box;
}
.plr-form-row textarea { resize: vertical; }
.plr-form-row small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #888;
}
.plr-required { color: #c62828; }

/* Certificate preview */
.plr-cert-preview {
	margin-top: 8px;
	font-size: 13px;
}
.plr-cert-preview a { margin-left: 10px; color: #1565c0; }

/* Form actions */
.plr-form-actions {
	display: flex;
	gap: 10px;
	padding-top: 8px;
	border-top: 1px solid #eee;
	margin-top: 8px;
}

/* ── Toast/flash messages ───────────────────────────────────────────────── */
.plr-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #1a1a1a;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	z-index: 999999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s;
}
.plr-toast.plr-toast-visible { opacity: 1; }
.plr-toast.plr-toast-error   { background: #c62828; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.plr-header { flex-direction: column; align-items: flex-start; }
	.plr-summary-row { gap: 8px; }
	.plr-summary-card { min-width: 80px; padding: 12px 8px; }
	.plr-summary-num { font-size: 22px; }
	.plr-tabs { flex-wrap: wrap; }
	.plr-course-item { flex-direction: column; align-items: flex-start; }
	.plr-record-card { flex-direction: column; }
	.plr-record-card-actions { flex-direction: row; }
}

@media print {
	.plr-header-actions,
	.plr-tab-toolbar,
	.plr-btn-edit,
	.plr-btn-delete,
	.plr-modal-overlay { display: none !important; }
	.plr-tabs { border: none; }
	.plr-tab-panel { display: block !important; }
}