/* Hello Tutor — Frontend Styles */

/* Tutor 4.0 "Learning Area" content column — Tutor caps this deliberately
   (760px / 860px / 944px at increasing breakpoints, centered) so text/video
   stays a readable width, but it leaves a very large empty gap on wide
   monitors. Widened here (not removed) at matching breakpoints; same
   specificity as Tutor's own rule (.tutor-learning-area .tutor-learning-area-container)
   so it wins on cascade order alone, !important added as a safety margin since
   Tutor's own bundle has proven unpredictable across this feature already. */
.tutor-learning-area .tutor-learning-area-container { max-width: 1100px !important; }
@media (min-width: 1400px) {
	.tutor-learning-area .tutor-learning-area-container { max-width: 1300px !important; }
}
@media (min-width: 1920px) {
	.tutor-learning-area .tutor-learning-area-container { max-width: 1500px !important; }
}

/* Same issue, same fix, different Tutor page: the frontend Instructor Dashboard
   ("My Courses" etc.) caps its content column via .tutor-dashboard-page — no
   base rule at all (unconstrained 768–1400px), then 860px at >=1400px and
   944px at >=1920px, leaving the same large empty gap on wide monitors.
   Widened here at matching breakpoints, same values as the Learning Area fix
   above for visual consistency between the two pages. */
.tutor-dashboard-layout .tutor-dashboard-page { max-width: 1100px !important; }
@media (min-width: 1400px) {
	.tutor-dashboard-layout .tutor-dashboard-page { max-width: 1300px !important; }
}
@media (min-width: 1920px) {
	.tutor-dashboard-layout .tutor-dashboard-page { max-width: 1500px !important; }
}

/* .tutor-dashboard-header-inner ("Hi, Name" greeting row) caps at the same
   760/860/944px breakpoints as .tutor-dashboard-page above but was missed
   when that one was widened — left it centered narrower than the content
   below, so the greeting appeared shifted right relative to page content on
   wide monitors. Widened here with the exact same values for alignment. */
.tutor-dashboard-header-inner { max-width: 1100px !important; }
@media (min-width: 1400px) {
	.tutor-dashboard-header-inner { max-width: 1300px !important; }
}
@media (min-width: 1920px) {
	.tutor-dashboard-header-inner { max-width: 1500px !important; }
}

/* Department badge on course pages and leaderboard */
.ht-department-badge {
	display: inline-block;
	font-size: 11px;
	color: #646970;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	padding: 1px 6px;
	margin-left: 6px;
	vertical-align: middle;
}

/* Content drip — locked lesson tooltip */
.ht-drip-tooltip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #1d2327;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 9999;
	pointer-events: none;
}
.ht-drip-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1d2327;
}

/* Job Title field — read-only on Dashboard > Settings > Profile */
[name="tutor_profile_job_title"] {
	background-color: #f0f0f1 !important;
	cursor: not-allowed !important;
	opacity: 0.8 !important;
}

/* Monetization hide rules — hides price/cart/buy elements from Tutor LMS */
.tutor-course-price,
.tutor-course-card-price,
.tutor-single-course-price,
.tutor-price-tag,
.price-tag,
.tutor-course-purchase-box .tutor-btn[data-is-paid],
.tutor-cart-btn,
.tutor-course-add-to-cart,
.tutor-woocommerce-notice,
/* Total Earnings stat card on /dashboard (dashboard.php:227–238).
   :has() is safe here — server-rendered PHP, not a React tree. */
.tutor-col-lg-6:has(.tutor-icon-coins) {
	display: none !important;
}

/* Registration pending-approval page */
.ht-pending-page {
	max-width: 600px;
	margin: 80px auto;
	padding: 40px;
	text-align: center;
	font-family: sans-serif;
}
.ht-pending-page h1    { font-size: 1.6em; margin-bottom: 16px; }
.ht-pending-lead       { font-size: 1.1em; color: #444; margin-bottom: 12px; }
.ht-pending-info       { color: #666; margin-bottom: 24px; }
.ht-pending-contact    { font-size: 0.9em; color: #999; }
.ht-pending-btn {
	display: inline-block;
	margin-top: 24px;
	padding: 10px 24px;
	background: #2271b1;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
}
.ht-pending-btn:hover { background: #135e96; color: #fff; text-decoration: none; }

/* Assignment status badges */
.ht-assignment-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
}
.ht-assignment-status.pending    { background: #fff8e5; color: #996800; }
.ht-assignment-status.evaluated  { background: #edfaef; color: #008a20; }

/* ── Department profile display ── */
.ht-dept-field-readonly   { background: #f9f9f9; cursor: default; }
.ht-profile-dept-badge    { text-align: center; padding: 8px 0 4px; }
.ht-badge                 { display: inline-block; padding: 4px 12px; border-radius: 12px; background: #e8f0fe; color: #1a56db; font-size: 13px; font-weight: 500; }

/* ── Assignment submission page ──
   Self-contained on purpose: this markup reuses several `tutor-*` utility/
   component classes (tutor-fs-*, tutor-fw-*, tutor-d-block, tutor-form-control,
   tutor-color-muted, tutor-icon-*, tutor-px-32/tutor-py-24, tutor-mb-24, ...) that
   only exist in Tutor's legacy CSS bundle. Tutor 4.0's "Learning Area" page loads
   a different bundle (tutor-core/tutor-learning-area) that's missing most of them,
   so those classes silently do nothing there — text falls back to browser
   defaults and expected margins collapse to 0. Rather than chase each missing
   utility class one by one, everything below overrides at the element level
   scoped under .ht-assignment-wrap / .ht-assignment-form, so it renders
   correctly regardless of which Tutor bundle happens to be loaded. */
.ht-assignment-wrap { max-width: 800px; padding: 24px 32px; box-sizing: border-box; }
.ht-assignment-wrap h1 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 16px; }
.ht-assignment-wrap h3 { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
.ht-assignment-wrap hr { border: none; border-top: 1px solid #e0e0e0; margin: 24px 0; }

/* Submission review (past submission summary + evaluation result). Tutor's new
   bundle doesn't just omit these utility classes — it *redefines* them on a
   different scale (`.tutor-mb-20` = 120px, `.tutor-mb-16` = 88px, `.tutor-mb-8`
   = 24px there, not their old literal-pixel meaning), so leaving the old
   classes in place would silently blow up spacing instead of collapsing it. */
.ht-assignment-wrap .ht-assignment-result { margin-bottom: 24px; }
.ht-assignment-wrap .ht-submission-meta { font-size: 14px; margin: 0 0 12px; }
.ht-assignment-wrap .ht-submission-meta span:last-child { margin-left: 8px; }
.ht-assignment-wrap .ht-submission-block { margin-bottom: 16px; }
.ht-assignment-wrap .ht-submission-block-label { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.ht-assignment-wrap .ht-submission-block .tutor-icon-download { margin-right: 8px; }
.ht-assignment-wrap .ht-assignment-instructions { margin-bottom: 28px; }
.ht-assignment-wrap .tutor-alert .tutor-icon-warning-filled { margin-right: 8px; }
.ht-assignment-wrap .ht-attempt-list { margin-top: 16px; }

/* Instructor attachments */
.ht-instructor-attachments { padding: 16px; background: #f6f7f7; border-radius: 6px; border: 1px solid #dcdcde; margin-bottom: 24px; }
.ht-attachment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ht-attachment-link { display: inline-flex; align-items: center; gap: 4px; color: #2271b1; text-decoration: none; font-size: 14px; }
.ht-attachment-link:hover { text-decoration: underline; }
.ht-attachment-link .tutor-icon-attach { margin-right: 4px; }
.ht-attachment-ext { color: #646970; font-size: 12px; }

.ht-assignment-meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	width: fit-content;
	margin-bottom: 24px;
}
.ht-assignment-meta .ht-meta-item { padding: 0 16px; }
.ht-assignment-meta .ht-meta-item:not(:last-child) { border-right: 1px solid #e0e0e0; }

/* Score / status cards */
.ht-score-cards { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ht-score-card {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px 24px;
	min-width: 120px;
	text-align: center;
}
.ht-score-card__label { font-size: 12px; color: #888; margin-bottom: 6px; }
.ht-score-card__value { font-size: 28px; font-weight: 700; }
.ht-score-card__value--pass   { color: #00a32a; }
.ht-score-card__value--fail   { color: #d63638; }
.ht-score-card__status        { font-size: 18px; font-weight: 600; }
.ht-score-total               { font-size: 16px; font-weight: 400; color: #888; }

/* Feedback and answer blocks */
.ht-feedback-label  { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ht-feedback-block  { background: #f5f6fa; border-radius: 6px; padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.ht-answer-review-block { background: #f5f6fa; border-radius: 6px; font-size: 0.9em; padding: 16px; }

/* Previous attempt cards — same tutor-p-16/tutor-mb-12 mismatch as above, scoped here instead. */
.ht-attempt-card { border: 1px solid #ddd; border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.ht-attempt-card > div:first-child { margin-bottom: 8px; }

/* Form */
.ht-assignment-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.ht-assignment-form > div { margin-bottom: 20px; }
.ht-assignment-form textarea,
.ht-assignment-form input[type="file"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
}
.ht-assignment-textarea { resize: vertical; min-height: 140px; }
.ht-assignment-form button[type="submit"] { margin-top: 4px; }
.ht-file-label-hint     { font-weight: normal; font-size: 12px; }

/* Submit/resubmit button state — deliberately not using Tutor's own `tutor-d-none`:
   that class only exists in Tutor's legacy CSS bundle (tutor.min.css), which isn't
   loaded on the 4.0 "Learning Area" page (only tutor-core/tutor-learning-area are). */
.ht-btn-spinner        { display: none; align-items: center; }
.ht-btn-spinner.is-active { display: inline-flex; }
.ht-btn-text.is-hidden  { display: none; }

/* Spinner icon — drawn as a pure CSS ring rather than relying on Tutor's icon
   font (`tutor-icon-spinner`), which lives in tutor-icon.min.css and, like the
   utility classes above, is only enqueued on Tutor's legacy pages. */
.ht-btn-spinner .tutor-icon-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 8px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -2px;
	animation: ht-btn-spin 0.7s linear infinite;
}
@keyframes ht-btn-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================
   Instructor Assignment Dashboard (ht-instructor-assignments)
   ========================================================= */

.ht-ia-wrap { max-width: 900px; }

/* Assignment list table */
.ht-ia-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ht-ia-table th,
.ht-ia-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #e8eaed; }
.ht-ia-table th  { font-weight: 600; color: #444; background: #f8f9fa; }
.ht-ia-table tbody tr:hover { background: #fafbfc; }

/* Submission card */
.ht-ia-card {
	border: 1px solid #e0e4ea;
	border-radius: 8px;
	margin-bottom: 20px;
	overflow: hidden;
}
.ht-ia-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid #e0e4ea;
	flex-wrap: wrap;
	gap: 8px;
}
.ht-ia-section {
	padding: 14px 20px;
	border-bottom: 1px solid #f0f2f5;
}
.ht-ia-section:last-child { border-bottom: none; }
.ht-ia-eval-section { background: #fafbfc; }

/* Eval form layout */
.ht-ia-fields { display: flex; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; }
.ht-ia-fields > div { flex: 1; min-width: 180px; }
.ht-ia-feedback textarea { width: 100%; resize: vertical; font-size: 13px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.ht-ia-eval-btn { margin-top: 4px; }

/* Reuse eval-badge + file-link from admin context */
.ht-ia-wrap .ht-eval-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}
.ht-ia-wrap .ht-eval-badge--pending  { background: #fff3cd; color: #856404; }
.ht-ia-wrap .ht-eval-badge--passed   { background: #d1e7dd; color: #0a5c36; }
.ht-ia-wrap .ht-eval-badge--failed   { background: #f8d7da; color: #842029; }
.ht-ia-wrap .ht-file-link { font-size: 13px; color: #1a56db; text-decoration: none; }
.ht-ia-wrap .ht-file-link:hover { text-decoration: underline; }
.ht-ia-wrap .ht-eval-note { font-size: 12px; color: #666; margin: 0 0 10px; }
.ht-ia-wrap .ht-field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ht-ia-wrap .ht-field-hint  { font-size: 12px; color: #888; margin: 4px 0 0; }
.ht-ia-wrap .ht-score-input { width: 90px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.ht-ia-wrap .ht-section-label { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; display: block; }
.ht-ia-wrap .ht-answer-block { background: #f5f6fa; border-radius: 6px; padding: 10px 14px; font-size: 13px; line-height: 1.6; margin-top: 4px; }
.ht-ia-wrap .ht-eval-message { padding: 10px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }
.ht-ia-wrap .ht-eval-message--success { background: #d1e7dd; color: #0a5c36; }
.ht-ia-wrap .ht-eval-message--error   { background: #f8d7da; color: #842029; }
.ht-ia-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 4px;
}
.ht-ia-history-table th,
.ht-ia-history-table td {
	padding: 8px 10px;
	border: 1px solid #e0e4ea;
	vertical-align: top;
	text-align: left;
}
.ht-ia-history-table th { background: #f0f2f5; font-weight: 600; }
.ht-ia-history-table td:nth-child(2) { max-width: 220px; word-break: break-word; }

/* ── Lesson Notes ── */

/* "Take Note" button — inline item di dalam pill nav */
.ht-take-note-nav-item {
	list-style: none;
	border-left: 1px solid #c3c5cb;
	margin-left: 4px;
	padding-left: 8px;
	display: flex;
	align-items: center;
}
.ht-take-note-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	color: #3e64de;
	font-size: 13px;
	font-weight: 500;
	padding: 4px 6px;
	white-space: nowrap;
	transition: opacity .15s;
}
.ht-take-note-btn:hover { opacity: .75; }

/* Notes column spacing */
.ht-notes-col { padding-top: 24px; }

/* Note count */
.ht-notes-count { margin-bottom: 12px; font-size: 12px; }

/* Add/Edit form */
.ht-note-form-wrapper {
	background: #f9f9f9;
	border: 1px solid #e0e2ea;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 20px;
}
.ht-note-textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
	font-family: inherit;
}
.ht-note-textarea:focus {
	outline: none;
	border-color: #3e64de;
	box-shadow: 0 0 0 2px rgba(62, 100, 222, .15);
}
.ht-note-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	flex-wrap: wrap;
	gap: 8px;
}
.ht-note-hint {
	font-size: 12px;
	color: #888;
	margin: 0;
}
.ht-note-hint kbd {
	font-family: inherit;
	background: #e8eaed;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	padding: 1px 4px;
	font-size: 11px;
}
.ht-note-form-actions {
	display: flex;
	gap: 8px;
}

/* Note items */
.ht-note-item {
	margin-bottom: 12px;
	text-align: left;
}
.ht-note-card {
	display: flex;
	gap: 0;
	background: #f8f9fa;
	border: 1px solid #e0e2ea;
	border-radius: 8px;
	overflow: hidden;
}

/* Video thumbnail area (left side) */
.ht-note-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 140px;
	min-width: 140px;
	background: #e0e4ea;
	cursor: pointer;
	padding: 16px 12px;
	transition: background .15s;
}
.ht-note-thumb:hover { background: #d0d6e0; }
.ht-note-thumb-play {
	font-size: 28px;
	color: #666;
}
.ht-note-thumb-ts {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #1a7340;
	font-size: 12px;
	font-weight: 600;
}
.ht-note-thumb-ts .tutor-icon-play { font-size: 10px; }

/* Note content (right side) */
.ht-note-content {
	flex: 1;
	padding: 12px 14px;
	min-width: 0;
}
.ht-note-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.ht-note-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity .15s;
}
.ht-note-item:hover .ht-note-actions,
.ht-note-item:focus-within .ht-note-actions {
	opacity: 1;
}
.ht-note-body { line-height: 1.7; }

/* -------------------------------------------------------------------------
 * Instructor Course Tools (Dept Access / Content Drip / Certificate) —
 * quick-action row on "My Courses" cards + frontend settings page.
 * ---------------------------------------------------------------------- */
.ht-course-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.ht-course-quick-actions__item {
	font-size: 11px;
	line-height: 1.4;
	padding: 3px 9px;
	border-radius: 999px;
	background: #f1f2f6;
	color: #4b5675;
	text-decoration: none;
	white-space: nowrap;
}
.ht-course-quick-actions__item:hover {
	background: #e4e6f0;
	color: #23255a;
}

.ht-course-settings-frontend {
	max-width: 640px;
}
.ht-course-settings-frontend__title {
	margin-bottom: 4px;
}
.ht-course-settings-frontend__course {
	font-weight: 400;
	color: #6b7280;
}
.ht-course-settings-frontend__notice {
	margin-bottom: 20px;
}
.ht-course-settings-frontend__back {
	margin-top: 20px;
}

.ht-course-settings-form .ht-course-settings-field {
	margin-bottom: 20px;
}
.ht-course-settings-form .ht-course-settings-field.is-hidden {
	display: none;
}
.ht-course-settings-form .ht-dept-checkbox-label {
	display: block;
	margin-bottom: 6px;
}

/* Certificate template grid — same rules as assets/css/admin.css (wp-admin only
   loads that file), needed here too since Certificate settings now also render
   on the frontend dashboard (render_frontend_settings()). */
.ht-cert-grid { display: flex; flex-wrap: wrap; gap: 20px; margin: 16px 0 24px; }
.ht-cert-card {
	position: relative;
	width: 220px;
	cursor: pointer;
	border: 3px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #f9f9f9;
	transition: border-color .15s;
}
.ht-cert-card:hover     { border-color: #aaa; }
.ht-cert-card.is-selected { border-color: #2271b1; box-shadow: 0 0 0 2px #2271b1; }
.ht-cert-card input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.ht-cert-card img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-bottom: 1px solid #ddd;
}
.ht-cert-card .ht-cert-no-thumb {
	width: 100%;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e8e8e8;
	border-bottom: 1px solid #ddd;
	color: #888;
	font-size: 13px;
}
.ht-cert-card .ht-cert-label {
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
}
.ht-cert-card .ht-cert-check {
	position: absolute;
	top: 8px; right: 8px;
	width: 22px; height: 22px;
	background: #2271b1;
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
}
.ht-cert-card.is-selected .ht-cert-check { display: flex; }
.ht-cert-check::after   { content: '✓'; color: #fff; font-size: 13px; line-height: 1; }
.ht-cert-default-star   { color: #f0a500; }
.ht-cert-default-label  { color: #888; font-weight: 400; }

/* "Earn a certificate" block — Course Info tab, single course page (below Course Curriculum). */
.ht-earn-cert {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 24px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fafafa;
}
.ht-earn-cert-text { flex: 1 1 260px; }
.ht-earn-cert-text h4 { margin: 0 0 8px; }
.ht-earn-cert-text p { margin: 0; }
.ht-earn-cert-thumb {
	flex: 0 0 180px;
	width: 180px;
}
.ht-earn-cert-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}
.ht-earn-cert-no-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 120px;
	border: 1px dashed #ccc;
	border-radius: 4px;
	background: #e8e8e8;
	color: #888;
	font-size: 13px;
	text-align: center;
}