/**
 * CorpoLMS — style frontendu 1.0
 * Estetyka wzorowana na Tutor LMS: czyste karty, indygo jako akcent,
 * miękkie promienie, subtelne cienie, pełne RWD + dark mode.
 *
 * White-label: nadpisz zmienne w motywie lub w Dodatkowy CSS, np.
 * :root { --clms-primary: #0e7a5f; }
 */

:root {
	--clms-primary: #3e64de;
	--clms-primary-dark: #2b4bb5;
	--clms-primary-soft: #eef2ff;
	--clms-success: #24a148;
	--clms-success-soft: #e6f6ec;
	--clms-warning: #b57e10;
	--clms-warning-soft: #fdf3dd;
	--clms-danger: #d7263d;
	--clms-danger-soft: #fdeaed;
	--clms-text: #212327;
	--clms-text-soft: #5b616e;
	--clms-border: #e4e6eb;
	--clms-bg: #ffffff;
	--clms-bg-soft: #f7f8fa;
	--clms-radius: 10px;
	--clms-radius-lg: 14px;
	--clms-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
	--clms-font: inherit;
}

@media (prefers-color-scheme: dark) {
	.clms-auto-dark {
		--clms-primary-soft: #232a45;
		--clms-success-soft: #17301f;
		--clms-warning-soft: #33290f;
		--clms-danger-soft: #371318;
		--clms-text: #e8eaef;
		--clms-text-soft: #9aa1ad;
		--clms-border: #32363f;
		--clms-bg: #1d1f24;
		--clms-bg-soft: #16181c;
	}
}

/* ------------------------------------------------------------- Baza */

.clms-my-courses, .clms-group-panel, .clms-quiz, .clms-assignment,
.clms-materials, .clms-outline, .clms-course-grid, .clms-locked,
.clms-course-progress, .clms-cert-box, .clms-player, .clms-invite-form {
	font-family: var(--clms-font);
	color: var(--clms-text);
	line-height: 1.6;
	box-sizing: border-box;
}

.clms-my-courses *, .clms-group-panel *, .clms-quiz *, .clms-assignment *,
.clms-materials *, .clms-course-grid * {
	box-sizing: border-box;
}

/* -------------------------------------------------------- Przyciski */

.clms-btn,
.clms-quiz button[type="submit"],
.clms-assignment button[type="submit"],
.clms-invite-form button[type="submit"] {
	display: inline-block;
	background: var(--clms-primary);
	color: #fff !important;
	border: none;
	border-radius: var(--clms-radius);
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none !important;
	transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

.clms-btn:hover,
.clms-quiz button[type="submit"]:hover,
.clms-assignment button[type="submit"]:hover,
.clms-invite-form button[type="submit"]:hover {
	background: var(--clms-primary-dark);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(62, 100, 222, .3);
}

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

.clms-btn--ghost {
	background: transparent;
	color: var(--clms-primary) !important;
	border: 1.5px solid var(--clms-primary);
	box-shadow: none;
}

.clms-btn--ghost:hover { background: var(--clms-primary-soft); color: var(--clms-primary) !important; }

/* ---------------------------------------------------------- Tabele */

.clms-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	overflow: hidden;
	font-size: 14.5px;
	box-shadow: var(--clms-shadow);
	margin: 12px 0 20px;
}

.clms-table thead th {
	background: var(--clms-bg-soft);
	color: var(--clms-text-soft);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--clms-border);
}

.clms-table tbody td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--clms-border);
	vertical-align: middle;
}

.clms-table tbody tr:last-child td { border-bottom: none; }
.clms-table tbody tr:hover td { background: var(--clms-bg-soft); }
.clms-table a { color: var(--clms-primary); font-weight: 500; text-decoration: none; }
.clms-table a:hover { text-decoration: underline; }
.clms-table small { color: var(--clms-text-soft); }

/* --------------------------------------------------- Pasek postępu */

.clms-course-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	padding: 16px 20px;
	margin: 16px 0;
	font-weight: 600;
	box-shadow: var(--clms-shadow);
}

progress[value] {
	-webkit-appearance: none;
	appearance: none;
	height: 10px;
	border: none;
	border-radius: 6px;
	background: var(--clms-bg-soft);
	overflow: hidden;
	flex: 1;
}

progress[value]::-webkit-progress-bar { background: var(--clms-border); border-radius: 6px; }
progress[value]::-webkit-progress-value {
	background: linear-gradient(90deg, var(--clms-primary), #6d8cff);
	border-radius: 6px;
	transition: width .4s ease;
}
progress[value]::-moz-progress-bar { background: var(--clms-primary); border-radius: 6px; }

/* ----------------------------------------------------- Program kursu */

.clms-outline {
	list-style: none;
	counter-reset: clms-step;
	margin: 12px 0 24px;
	padding: 0;
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	overflow: hidden;
	box-shadow: var(--clms-shadow);
}

.clms-outline li {
	counter-increment: clms-step;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--clms-border);
	font-size: 15px;
	transition: background .15s ease;
}

.clms-outline li:last-child { border-bottom: none; }
.clms-outline li:hover { background: var(--clms-primary-soft); }

.clms-outline li::before {
	content: counter(clms-step);
	flex: 0 0 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clms-bg-soft);
	border: 1px solid var(--clms-border);
	border-radius: 50%;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--clms-text-soft);
}

.clms-outline li a {
	color: var(--clms-text);
	text-decoration: none;
	font-weight: 500;
	flex: 1;
}

.clms-outline li a:hover { color: var(--clms-primary); }

/* --------------------------------------------------------- Blokady */

.clms-locked {
	background: var(--clms-warning-soft);
	border: 1px solid rgba(181, 126, 16, .35);
	border-radius: var(--clms-radius-lg);
	padding: 18px 22px;
	margin: 16px 0;
	color: var(--clms-warning);
	font-weight: 500;
}

.clms-locked p { margin: 0; }

/* ------------------------------------------------ Karta certyfikatu */

.clms-cert-box { box-shadow: var(--clms-shadow); background: var(--clms-bg); }

/* -------------------------------------------------------- Materiały */

.clms-materials {
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	padding: 18px 22px;
	margin: 20px 0;
	box-shadow: var(--clms-shadow);
}

.clms-materials h3 { margin: 0 0 10px; font-size: 17px; }
.clms-materials ul { list-style: none; margin: 0; padding: 0; }

.clms-materials li {
	padding: 9px 0;
	border-bottom: 1px dashed var(--clms-border);
	font-size: 14.5px;
}

.clms-materials li:last-child { border-bottom: none; }
.clms-materials a { color: var(--clms-primary); font-weight: 500; text-decoration: none; }
.clms-materials a:hover { text-decoration: underline; }
.clms-materials small { color: var(--clms-text-soft); }

/* ------------------------------------------------------------- Quiz */

.clms-quiz { margin: 20px 0; }

.clms-question {
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	padding: 20px 22px;
	margin: 0 0 16px;
	box-shadow: var(--clms-shadow);
}

.clms-question legend {
	font-size: 16px;
	padding: 0 4px;
	color: var(--clms-text);
}

.clms-question label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: var(--clms-bg-soft);
	border: 1.5px solid var(--clms-border);
	border-radius: var(--clms-radius);
	padding: 12px 16px !important;
	margin: 8px 0 !important;
	font-size: 15px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.clms-question label:hover {
	border-color: var(--clms-primary);
	background: var(--clms-primary-soft);
}

.clms-question input[type="radio"],
.clms-question input[type="checkbox"] {
	accent-color: var(--clms-primary);
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

.clms-question label:has(input:checked) {
	border-color: var(--clms-primary);
	background: var(--clms-primary-soft);
	font-weight: 500;
}

.clms-quiz-result p { margin: 12px 0; }

.clms-quiz-result strong { font-size: 1.15em; }

/* ---------------------------------------------------------- Zadania */

.clms-assignment textarea,
.clms-invite-form textarea,
.clms-invite-form input[type="email"],
.clms-invite-form input[type="text"] {
	width: 100%;
	background: var(--clms-bg);
	border: 1.5px solid var(--clms-border);
	border-radius: var(--clms-radius);
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--clms-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.clms-assignment textarea:focus,
.clms-invite-form textarea:focus,
.clms-invite-form input:focus {
	outline: none;
	border-color: var(--clms-primary);
	box-shadow: 0 0 0 3px var(--clms-primary-soft);
}

.clms-invite-form input[type="email"],
.clms-invite-form input[type="text"] { width: auto; min-width: 220px; }

.clms-invite-form {
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	padding: 20px 22px;
	margin: 20px 0;
	box-shadow: var(--clms-shadow);
}

.clms-invite-form h3 { margin: 0 0 12px; font-size: 17px; }

/* ------------------------------------------------------ Panel firmy */

.clms-group-panel h2 { margin: 0 0 6px; }

.clms-group-panel > p:first-of-type strong { color: var(--clms-primary); }

.clms-group-switch a {
	display: inline-block;
	background: var(--clms-bg-soft);
	border: 1px solid var(--clms-border);
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 13.5px;
	color: var(--clms-text-soft);
	text-decoration: none;
}

.clms-group-switch a[style*="bold"],
.clms-group-switch a:hover {
	background: var(--clms-primary-soft);
	border-color: var(--clms-primary);
	color: var(--clms-primary);
}

/* ----------------------------------------------------- Siatka kursów */

.clms-course-card {
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: var(--clms-shadow);
	border-color: var(--clms-border) !important;
	background: var(--clms-bg) !important;
}

.clms-course-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.clms-course-card h3 a { color: var(--clms-text); }
.clms-course-card h3 a:hover { color: var(--clms-primary); }

/* ----------------------------------------------------------- Player */

.clms-player {
	position: relative;
	border-radius: var(--clms-radius-lg);
	overflow: hidden;
	background: #000;
	margin: 0 0 20px;
	aspect-ratio: 16 / 9;
	box-shadow: var(--clms-shadow);
}

.clms-player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------- Notatki */

.clms-notes {
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	padding: 20px 22px;
	margin: 24px 0;
	box-shadow: var(--clms-shadow);
}

.clms-notes h3 { margin: 0 0 12px; font-size: 17px; }

.clms-notes-input {
	width: 100%;
	background: var(--clms-bg-soft);
	border: 1.5px solid var(--clms-border);
	border-radius: var(--clms-radius);
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--clms-text);
	resize: vertical;
}

.clms-notes-input:focus {
	outline: none;
	border-color: var(--clms-primary);
	box-shadow: 0 0 0 3px var(--clms-primary-soft);
}

.clms-note-card {
	background: var(--clms-bg-soft);
	border-left: 3px solid var(--clms-primary);
	border-radius: 0 var(--clms-radius) var(--clms-radius) 0;
	padding: 10px 14px;
	margin: 0 0 10px;
}

.clms-note-content { margin: 0 0 4px; font-size: 14.5px; white-space: pre-wrap; }
.clms-note-meta { margin: 0; font-size: 12.5px; color: var(--clms-text-soft); }
.clms-note-meta a { color: var(--clms-primary); text-decoration: none; }
.clms-note-ts {
	background: var(--clms-primary-soft);
	color: var(--clms-primary);
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 12px;
	font-weight: 600;
}
.clms-note-del { color: var(--clms-danger) !important; }
.clms-notes-status { color: var(--clms-success); font-size: 13.5px; }

/* ------------------------------------------- Przegląd quizu / próby */

.clms-q-correct { border-color: var(--clms-success) !important; }
.clms-q-incorrect { border-color: var(--clms-danger) !important; }

.clms-question .clms-a-correct {
	border-color: var(--clms-success) !important;
	background: var(--clms-success-soft) !important;
}

.clms-question .clms-a-wrong {
	border-color: var(--clms-danger) !important;
	background: var(--clms-danger-soft) !important;
}

.clms-score { font-weight: 600; padding: 2px 10px; border-radius: 12px; }
.clms-score--pass { background: var(--clms-success-soft); color: var(--clms-success); }
.clms-score--fail { background: var(--clms-danger-soft); color: var(--clms-danger); }

.clms-attempts summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--clms-text-soft);
	margin: 8px 0;
}

/* ------------------------------------------------ Nadchodzące terminy */

.clms-upcoming {
	list-style: none;
	margin: 8px 0 24px;
	padding: 0;
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-radius: var(--clms-radius-lg);
	overflow: hidden;
	box-shadow: var(--clms-shadow);
}

.clms-upcoming li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--clms-border);
	font-size: 14.5px;
}

.clms-upcoming li:last-child { border-bottom: none; }
.clms-upcoming li small { color: var(--clms-text-soft); }

.clms-upcoming-date {
	flex: 0 0 auto;
	background: var(--clms-primary-soft);
	color: var(--clms-primary);
	border-radius: var(--clms-radius);
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* -------------------------------------------------------- Ogłoszenia */

.clms-announcements { margin: 16px 0; }

.clms-announcement {
	background: var(--clms-bg);
	border: 1px solid var(--clms-border);
	border-left: 3px solid var(--clms-primary);
	border-radius: 0 var(--clms-radius-lg) var(--clms-radius-lg) 0;
	padding: 14px 18px;
	margin-bottom: 10px;
	box-shadow: var(--clms-shadow);
}

.clms-announcement-title { margin: 0 0 4px; font-size: 15px; }
.clms-announcement-body { font-size: 14px; color: var(--clms-text-soft); }
.clms-announcement-body p { margin: 4px 0; }

/* --------------------------------------------- Podgląd / odznaki */

.clms-preview-badge {
	background: var(--clms-primary-soft);
	color: var(--clms-primary);
	border-radius: var(--clms-radius);
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 12px;
}

.clms-badge-preview {
	background: var(--clms-success-soft);
	color: var(--clms-success);
	border-radius: 10px;
	padding: 1px 9px;
	font-size: 12px;
	font-weight: 600;
	margin-left: 6px;
}

.clms-open-answer {
	background: var(--clms-bg-soft);
	border: 1.5px solid var(--clms-border);
	border-radius: var(--clms-radius);
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--clms-text);
	resize: vertical;
}

.clms-open-answer:focus {
	outline: none;
	border-color: var(--clms-primary);
	box-shadow: 0 0 0 3px var(--clms-primary-soft);
}

/* ------------------------------------------------------------- RWD */

@media (max-width: 640px) {
	.clms-invite-form input[type="email"],
	.clms-invite-form input[type="text"] { width: 100%; min-width: 0; margin-bottom: 8px; }
	.clms-table { display: block; overflow-x: auto; }
	.clms-course-progress { flex-direction: column; align-items: stretch; text-align: center; }
	.clms-cert-box { flex-direction: column !important; text-align: center; }
	.clms-btn, .clms-quiz button[type="submit"], .clms-assignment button[type="submit"] { width: 100%; text-align: center; }
	.clms-outline li { padding: 12px 14px; }
}