/* Стилі плагіна "Проста LMS — Roxy EDU" */

/* Контейнер кабінету (студента та інструктора) */
.slms-dashboard {
	max-width: 900px; /* обмеження ширини вмісту кабінету */
	margin: 0 auto;   /* центрування контейнера */
}

/* Заголовок кабінету */
.slms-dashboard__title {
	margin-bottom: 24px; /* відступ під заголовком */
}

/* Сітка карток курсів у кабінеті студента */
.slms-course-list {
	display: grid;                                        /* сітка карток */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* адаптивні колонки */
	gap: 20px;                                            /* відстань між картками */
}

/* Картка курсу */
.slms-course-card {
	border: 1px solid #e0e0e0;   /* тонка рамка картки */
	border-radius: 10px;         /* заокруглені кути */
	padding: 20px;               /* внутрішні відступи */
	background: #fff;            /* білий фон */
}

/* Назва курсу в картці */
.slms-course-card__title {
	margin: 0 0 12px;   /* відступ під назвою */
	font-size: 18px;    /* розмір шрифту назви */
}

/* Текст відсотка проходження */
.slms-course-card__percent {
	font-size: 13px;  /* дрібний текст */
	color: #666;      /* сірий колір */
	margin: 6px 0 14px; /* вертикальні відступи */
}

/* Рядок умов доступу на картці курсу (п.25) */
.slms-course-card__term {
	display: flex;     /* бейдж і термін в один рядок */
	align-items: center; /* вертикальне вирівнювання */
	gap: 8px;          /* проміжок між бейджем і терміном */
	flex-wrap: wrap;   /* перенесення на вузьких картках */
	margin: 0 0 12px;  /* відступ до кнопки */
	font-size: 12px;   /* дрібний службовий текст */
}

/* Бейдж стану доступу */
.slms-access-badge {
	padding: 2px 8px;    /* компактні відступи */
	border-radius: 999px; /* капсульна форма */
	font-weight: 600;    /* напівжирний */
	white-space: nowrap; /* підпис не переноситься */
	background: #eef1f4; /* нейтральне тло за замовчуванням */
	color: #4a5464;      /* нейтральний текст */
}

/* Доступ активний */
.slms-access-badge--active {
	background: #e7f5ea; /* світло-зелене тло */
	color: #1a7a2e;      /* зелений текст */
}

/* Повний доступ власника платформи */
.slms-access-badge--owner {
	background: #eef2fb; /* світло-синє тло */
	color: #2c4a8a;      /* синій текст */
}

/* Курс ще не стартував */
.slms-access-badge--not_started {
	background: #fdf3e0; /* тепле світле тло */
	color: #8a6116;      /* бурштиновий текст */
}

/* Доступ завершився або закритий */
.slms-access-badge--expired,
.slms-access-badge--revoked {
	background: #fdecec; /* світло-червоне тло */
	color: #a02a2c;      /* червоний текст */
}

/* Термін поруч із бейджем */
.slms-access-term {
	color: #666; /* приглушений сірий */
}

/* Смуга прогресу (контейнер) */
.slms-progress-bar {
	height: 8px;              /* висота смуги */
	background: #f0f0f0;      /* фон незаповненої частини */
	border-radius: 4px;       /* заокруглення смуги */
	overflow: hidden;         /* обрізаємо заповнення по радіусу */
}

/* Зменшена смуга прогресу для таблиць */
.slms-progress-bar--small {
	width: 100px;             /* фіксована ширина в таблиці */
	display: inline-block;    /* в один рядок з відсотком */
	vertical-align: middle;   /* вирівнювання по центру рядка */
}

/* Заповнена частина смуги прогресу */
.slms-progress-bar__fill {
	height: 100%;             /* на всю висоту смуги */
	background: #4caf50;      /* зелений колір прогресу */
	transition: width 0.3s;   /* плавна анімація зміни ширини */
}

/* Кнопка (основна дія) */
.slms-button {
	display: inline-block;    /* блокова поведінка для посилання */
	padding: 10px 18px;       /* внутрішні відступи кнопки */
	background: #2271b1;      /* синій фон (WP-стиль) */
	color: #fff;              /* білий текст */
	border-radius: 6px;       /* заокруглені кути */
	text-decoration: none;    /* без підкреслення */
	font-size: 14px;          /* розмір тексту кнопки */
}

/* Кнопка при наведенні */
.slms-button:hover {
	background: #135e96;      /* темніший синій */
	color: #fff;              /* текст лишається білим */
}

/* Інформаційне повідомлення */
.slms-notice {
	padding: 12px 16px;       /* внутрішні відступи */
	background: #f6f7f7;      /* світло-сірий фон */
	border-left: 4px solid #2271b1; /* синя смуга зліва */
	border-radius: 4px;       /* легке заокруглення */
}

/* Повідомлення-попередження (доступ закрито) */
.slms-notice--warning {
	border-left-color: #d63638; /* червона смуга зліва */
}

/* Повідомлення-успіх (курс завершено) */
.slms-notice--success {
	border-left-color: #4caf50; /* зелена смуга зліва */
}

/* ==========================================================
   Особисті дані (п.3, ТЗ 1.2.9)
   ========================================================== */

/* Поле вводу в кабінетах (той самий вигляд, що й на сторінці навчання) */
.slms-dashboard .slms-input {
	width: 100%;               /* на всю ширину колонки форми */
	padding: 9px 12px;         /* внутрішні відступи */
	border: 1px solid #dcdcde; /* тонка рамка поля */
	border-radius: 6px;        /* легке заокруглення */
	box-sizing: border-box;    /* відступи всередині ширини */
	font-size: 14px;           /* розмір тексту */
	font-family: inherit;      /* шрифт сторінки, а не системний для textarea */
}

/* Обгортка форми профілю */
.slms-profile {
	max-width: 620px; /* вужча колонка — форму зручніше читати */
}

/* Смисловий блок форми (особисті дані, соцмережі, пароль) */
.slms-profile__section {
	margin-bottom: 28px;               /* відступ між блоками */
	padding-bottom: 20px;              /* відступ до лінії */
	border-bottom: 1px solid #e0e0e0;  /* роздільник між блоками */
}

/* Останній блок без роздільника */
.slms-profile__section:last-of-type {
	border-bottom: none; /* прибираємо зайву лінію перед кнопкою */
}

/* Заголовок блоку форми */
.slms-profile__title {
	margin: 0 0 14px; /* відступ під заголовком */
	font-size: 16px;  /* трохи менший за заголовки кабінету */
}

/* Рядок форми: підпис + поле */
.slms-profile__row {
	margin-bottom: 14px; /* відступ між полями */
}

/* Підпис поля */
.slms-profile__label {
	display: block;      /* підпис над полем */
	margin-bottom: 4px;  /* відступ до поля */
	font-size: 13px;     /* дрібніший за основний текст */
	font-weight: 600;    /* напівжирний */
}

/* Пояснення під полем */
.slms-profile__hint {
	margin: 4px 0 0;  /* відступ від поля */
	font-size: 12px;  /* дрібний службовий текст */
	color: #666;      /* сірий колір */
}

/* Рядок з чекбоксом (видалити фото) */
.slms-profile__checkbox {
	display: block;   /* з нового рядка */
	margin-top: 8px;  /* відступ від поля вибору файлу */
	font-size: 13px;  /* дрібніший текст */
}

/* Блок фото профілю: прев'ю + керування */
.slms-profile__avatar {
	display: flex;        /* прев'ю і керування в рядок */
	align-items: center;  /* вертикальне вирівнювання */
	gap: 16px;            /* відстань між прев'ю і полем */
	margin-bottom: 18px;  /* відступ до полів імені */
	flex-wrap: wrap;      /* перенесення на вузьких екранах */
}

/* Прев'ю завантаженого фото */
.slms-profile__avatar-img {
	width: 84px;         /* фіксований розмір прев'ю */
	height: 84px;        /* квадрат */
	object-fit: cover;   /* кадруємо, а не розтягуємо */
	border-radius: 50%;  /* кругле фото */
	flex-shrink: 0;      /* не стискається */
}

/* Заглушка, коли фото ще не завантажено */
.slms-profile__avatar-empty {
	display: flex;             /* текст по центру кола */
	align-items: center;       /* вертикальне вирівнювання */
	justify-content: center;   /* горизонтальне вирівнювання */
	width: 84px;               /* той самий розмір, що й прев'ю */
	height: 84px;              /* квадрат */
	border-radius: 50%;        /* коло */
	background: #f0f0f1;       /* сіре тло */
	color: #8a8f94;            /* приглушений текст */
	font-size: 11px;           /* дрібний підпис */
	text-align: center;        /* по центру */
	flex-shrink: 0;            /* не стискається */
}

/* Колонка керування фото */
.slms-profile__avatar-controls {
	flex: 1 1 220px; /* займає решту ширини, переноситься на вузьких екранах */
}

/* Блок курсу в кабінеті інструктора */
.slms-instructor-course {
	border: 1px solid #e0e0e0; /* рамка блоку */
	border-radius: 10px;       /* заокруглені кути */
	padding: 20px;             /* внутрішні відступи */
	margin-bottom: 24px;       /* відступ між курсами */
	background: #fff;          /* білий фон */
}

/* Службовий рядок курсу (кількість уроків, студентів) */
.slms-instructor-course__meta {
	font-size: 13px; /* дрібний текст */
	color: #666;     /* сірий колір */
}

/* Бейдж статусу (Опубліковано / Чернетка) */
.slms-badge {
	display: inline-block;  /* в рядок із заголовком */
	font-size: 11px;        /* дрібний текст бейджа */
	padding: 2px 8px;       /* компактні відступи */
	background: #f0f0f1;    /* сірий фон */
	border-radius: 10px;    /* овальна форма */
	vertical-align: middle; /* вирівнювання по центру */
	font-weight: normal;    /* без жирності */
}

/* Таблиця студентів */
.slms-table {
	width: 100%;              /* на всю ширину блоку */
	border-collapse: collapse; /* без подвійних рамок */
	font-size: 14px;          /* розмір тексту таблиці */
}

/* Список груп студента */
.slms-group-list {
	list-style: none; /* без маркерів списку */
	padding: 0;       /* без відступу зліва */
	margin: 0;        /* без зовнішніх відступів */
}

/* Елемент списку груп */
.slms-group-list__item {
	display: inline-block;   /* групи в рядок */
	padding: 6px 14px;       /* внутрішні відступи "чіпа" */
	background: #f0f0f1;     /* сірий фон */
	border-radius: 14px;     /* овальна форма */
	margin: 0 8px 8px 0;     /* відступи між чіпами */
	font-size: 14px;         /* розмір тексту */
}

/* Комірки таблиці */
.slms-table th,
.slms-table td {
	padding: 8px 10px;             /* відступи в комірках */
	border-bottom: 1px solid #eee; /* розділювальна лінія рядків */
	text-align: left;              /* вирівнювання по лівому краю */
}

/* ==========================================================
   Кнопки входу через Google і Telegram (п.53, п.54)
   ========================================================== */

/* Блок під стандартною формою входу */
.slms-social-login {
	margin-top: 16px;      /* відступ від полів входу */
	padding-top: 16px;     /* відступ до лінії */
	border-top: 1px solid #e0e0e0; /* роздільник від основної форми */
	text-align: center;    /* кнопки по центру */
}

/* Підпис над кнопками */
.slms-social-login__label {
	margin: 0 0 10px;  /* відступ до кнопок */
	font-size: 13px;   /* дрібний службовий текст */
	color: #666;       /* приглушений колір */
}

/* Кнопка Google */
.slms-social-login__google {
	display: inline-block;      /* поводиться як кнопка */
	padding: 9px 20px;          /* внутрішні відступи */
	border: 1px solid #dcdcde;  /* тонка рамка */
	border-radius: 6px;         /* заокруглення */
	background: #fff;           /* білий фон, як у фірмової кнопки Google */
	color: #3c4043;             /* темно-сірий текст */
	text-decoration: none;      /* без підкреслення */
	font-weight: 600;           /* напівжирний */
}

/* Кнопка Google при наведенні */
.slms-social-login__google:hover {
	background: #f7f8f8; /* трохи темніший фон */
	color: #3c4043;      /* колір тексту не змінюється */
}