/*
 * 0.57.28 · Perbaikan tema gelap modul Learning + form yang melayang.
 * Hanya tampilan. Dimuat paling akhir. Tema terang tidak diubah.
 */

/* ───────── Tema gelap: token modul Learning ───────── */
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning--manager,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning {
	--lm-ink: #e6eef5;
	--lm-muted: #93a7b8;
	--lm-line: #25465a;
	--lm-surface: #10293a;
	--lm-field: #0b1f2c;
	--lm-shadow: none;
	color: #e6eef5;
}

/* Panel yang sebelumnya putih tetap */
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__library-filters,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-empty,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__course-settings,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-checkbox,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create[open],
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-entry,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__library-table {
	background: #10293a !important;
	border-color: #25465a !important;
	color: #e6eef5 !important;
	box-shadow: none !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-empty {
	background: #0d2332 !important;
	border-style: dashed !important;
	color: #93a7b8 !important;
}

/* Label, legend, dan teks bantu */
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__library-filters label,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__course-settings label,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__course-settings legend,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create label,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create h2,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create h3,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-checkbox {
	color: #e6eef5 !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__course-settings p,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__course-settings small,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create p {
	color: #93a7b8 !important;
}

/* Kolom isian di dalam panel */
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__library-filters :is(input, select),
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__course-settings :is(input:not([type="checkbox"]), select),
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create :is(input:not([type="checkbox"]), select, textarea) {
	background: #0b1f2c !important;
	border-color: #2b4f64 !important;
	color: #e6eef5 !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create input[type="checkbox"],
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__course-settings input[type="checkbox"] {
	accent-color: #17bccb;
	color-scheme: dark;
}

/* Tombol "Cari" pada filter dan tombol Buat/Simpan tetap terbaca */
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__library-filters > button {
	background: #17bccb !important;
	color: #06222d !important;
	opacity: 1 !important;
}

/* Kotak pembungkus tombol "Buat Materi/Template" tidak lagi putih */
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__foundation-create:not([open]) {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* ───────── Form "Buat Materi/Template" tidak melayang ───────── */
/* Sebelumnya workspace.css menjadikannya popover absolut yang keluar dari kartu. Sekarang menyatu di bawah header. */
html body.beeang-learning-internal-page .beeang-learning__library-header,
html body.beeang-learning-internal-page .beeang-learning__foundation-header {
	flex-wrap: wrap;
}
html body.beeang-learning-internal-page .beeang-learning__library-header .beeang-learning__foundation-create[open],
html body.beeang-learning-internal-page .beeang-learning__foundation-header .beeang-learning__foundation-create[open] {
	flex: 1 1 100%;
	order: 5;
	position: static;
	width: 100%;
}
html body.beeang-learning-internal-page .beeang-learning__library-header .beeang-learning__foundation-create[open] > .beeang-learning__form,
html body.beeang-learning-internal-page .beeang-learning__foundation-header .beeang-learning__foundation-create[open] > .beeang-learning__form {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	z-index: auto;
	width: 100%;
	max-width: none;
	max-height: none;
	overflow: visible;
	padding: 4px 0 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

/* ───────── Tema gelap: Produk Ebook (.be-* / .bm-*) ───────── */
html body .beeang-hub--workspace[data-theme="dark"] .be-wrap,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning--manager {
	--bs-line: #25465a;
	--bs-ink: #e6eef5;
	--bs-mut: #93a7b8;
}
html body .beeang-hub--workspace[data-theme="dark"] .be-new,
html body .beeang-hub--workspace[data-theme="dark"] .be-item,
html body .beeang-hub--workspace[data-theme="dark"] .bm-fold,
html body .beeang-hub--workspace[data-theme="dark"] .bm-files,
html body .beeang-hub--workspace[data-theme="dark"] .bm-product {
	background: #10293a !important;
	border-color: #25465a !important;
	color: #e6eef5 !important;
	box-shadow: none !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .be-new > summary,
html body .beeang-hub--workspace[data-theme="dark"] .be-new h2,
html body .beeang-hub--workspace[data-theme="dark"] .be-new h3,
html body .beeang-hub--workspace[data-theme="dark"] .be-f label,
html body .beeang-hub--workspace[data-theme="dark"] .be-f legend,
html body .beeang-hub--workspace[data-theme="dark"] .be-new label,
html body .beeang-hub--workspace[data-theme="dark"] .bm-fold > summary,
html body .beeang-hub--workspace[data-theme="dark"] .bm-upload label {
	color: #e6eef5 !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .be-new small,
html body .beeang-hub--workspace[data-theme="dark"] .be-f small,
html body .beeang-hub--workspace[data-theme="dark"] .be-new .description,
html body .beeang-hub--workspace[data-theme="dark"] .bm-fold > summary small {
	color: #93a7b8 !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .be-new[open] > summary {
	border-bottom-color: #25465a !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .be-new :is(input:not([type="checkbox"]):not([type="file"]), select, textarea),
html body .beeang-hub--workspace[data-theme="dark"] .bm-upload :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) {
	background: #0b1f2c !important;
	border-color: #2b4f64 !important;
	color: #e6eef5 !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .be-new input[type="file"],
html body .beeang-hub--workspace[data-theme="dark"] .bm-upload input[type="file"] {
	color-scheme: dark;
	color: #e6eef5;
}
html body .beeang-hub--workspace[data-theme="dark"] .bm-file__thumb {
	background: #0d2332 !important;
	color: #93a7b8 !important;
}

/* ═════════ 0.57.30 · Ringkasan Learning: lebih ringkas dan mudah dibaca ═════════ */
html body .beeang-learning__overview-head { margin: 0 0 4px; }
html body .beeang-learning__overview-head h1 { margin: 0; font-size: 24px; line-height: 1.25; }
html body .beeang-learning__overview-head p { margin: 4px 0 0; font-size: 14px; opacity: .75; }

/* Kartu angka: 4 kartu utama besar, 3 kartu lain ringkas */
html body .beeang-learning--manager .beeang-learning__report-stats {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 12px;
	margin: 14px 0;
}
html body .beeang-learning--manager .beeang-learning__report-stats > div {
	grid-column: span 4;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 2px;
	padding: 10px 14px;
	border: 1px solid #e1ebf0;
	border-radius: 14px;
	background: #f7fafb;
	color: #12384d;
	box-shadow: none;
}
html body .beeang-learning--manager .beeang-learning__report-stats > div.is-primary {
	grid-column: span 3;
	gap: 6px;
	padding: 18px 20px;
	background: #fff;
}
html body .beeang-learning--manager .beeang-learning__report-stats > div > strong { font-size: 18px; line-height: 1.2; color: inherit; }
html body .beeang-learning--manager .beeang-learning__report-stats > div.is-primary > strong { font-size: 26px; }
html body .beeang-learning--manager .beeang-learning__report-stats > div > span { font-size: 12.5px; font-weight: 600; color: #5b7080; }
html body .beeang-learning--manager .beeang-learning__report-stats > div::before,
html body .beeang-learning--manager .beeang-learning__report-stats > div::after { display: none; }

/* Bagian buka-tutup */
html body .beeang-learning__fold {
	margin: 12px 0 0;
	border: 1px solid #e1ebf0;
	border-radius: 16px;
	background: #fff;
	color: #12384d;
}
html body .beeang-learning__fold > summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
}
html body .beeang-learning__fold > summary::-webkit-details-marker { display: none; }
html body .beeang-learning__fold > summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 700; opacity: .6; }
html body .beeang-learning__fold[open] > summary::after { content: "−"; }
html body .beeang-learning__fold > summary small { font-size: 12.5px; opacity: .7; font-weight: 400; }
html body .beeang-learning__fold[open] > summary { border-bottom: 1px solid #e1ebf0; }
html body .beeang-learning__fold > :not(summary) { margin-left: 18px; margin-right: 18px; }
html body .beeang-learning__fold > :last-child { margin-bottom: 18px; }
html body .beeang-learning__fold > :nth-child(2) { margin-top: 16px; }

/* Tema gelap */
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning--manager .beeang-learning__report-stats > div,
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning--manager .beeang-learning__report-stats > div.is-primary {
	background: #10293a !important;
	border-color: #25465a !important;
	color: #e6eef5 !important;
}
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning--manager .beeang-learning__report-stats > div > span { color: #93a7b8 !important; }
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__fold {
	background: #10293a;
	border-color: #25465a;
	color: #e6eef5;
}
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__fold[open] > summary { border-bottom-color: #25465a; }
html body .beeang-hub--workspace[data-theme="dark"] .beeang-learning__fold :is(label, h2, h3, legend) { color: #e6eef5; }

@media (max-width: 900px) {
	html body .beeang-learning--manager .beeang-learning__report-stats > div.is-primary { grid-column: span 6; }
	html body .beeang-learning--manager .beeang-learning__report-stats > div { grid-column: span 12; }
}
@media (max-width: 480px) {
	html body .beeang-learning--manager .beeang-learning__report-stats > div.is-primary { grid-column: span 12; }
}

/* ═════════ 0.57.31 · Ringkasan Learning: dashboard kartu ═════════ */
html body .bl-ov-head, html body .bl-ov {
	--bl-ink: #12384d; --bl-mut: #5f7485; --bl-line: #e3ecf1; --bl-card: #ffffff; --bl-soft: #f4f9fb;
	--bl-teal: #0e8a9a; --bl-cyan: #17bccb; --bl-gold: #F4B942; --bl-red: #e5484d; --bl-green: #1fa971;
	--bl-ok-bg: #e7f7ef; --bl-ok: #12714a; --bl-warn-bg: #fff4d6; --bl-warn: #8a6100; --bl-bad-bg: #fdebec; --bl-bad: #b42318;
	--bl-shadow: 0 1px 2px rgba(11,51,67,.04), 0 12px 28px -18px rgba(11,51,67,.25);
}
html body .beeang-hub--workspace[data-theme="dark"] .bl-ov-head,
html body .beeang-hub--workspace[data-theme="dark"] .bl-ov {
	--bl-ink: #e6eef5; --bl-mut: #93a7b8; --bl-line: #25465a; --bl-card: #10293a; --bl-soft: #0d2332;
	--bl-ok-bg: #12382b; --bl-ok: #7fe0b0; --bl-warn-bg: #3a3012; --bl-warn: #f2d067; --bl-bad-bg: #40201f; --bl-bad: #ff9b92;
	--bl-shadow: none;
}
html body .bl-ov-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; color: var(--bl-ink); }
html body .bl-ov-head h1 { margin: 0; font-size: 24px; line-height: 1.25; color: var(--bl-ink); }
html body .bl-ov-head p { margin: 4px 0 0; font-size: 14px; color: var(--bl-mut); }
html body .bl-ov-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--bl-gold); color: #3b2d00; font-weight: 700; font-size: 13.5px; text-decoration: none; }
html body .bl-ov-btn:hover { filter: brightness(1.05); }

html body .bl-ov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px; color: var(--bl-ink); }
html body .bl-ov .bl-card { grid-column: span 4; min-width: 0; padding: 18px 20px; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--bl-card); box-shadow: var(--bl-shadow); }
html body .bl-ov .bl-card--events { grid-column: span 5; }
html body .bl-ov .bl-card--progress { grid-column: span 7; }
html body .bl-ov .bl-card--products { grid-column: span 12; }
html body .bl-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0; border: 0; background: none; }
html body .bl-card > header h2 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--bl-ink); display: flex; align-items: center; gap: 8px; }
html body .bl-card > header h2 em { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--bl-soft); color: var(--bl-mut); }
html body .bl-card > header a, html body .bl-alerts a { font-size: 12.5px; font-weight: 700; color: var(--bl-teal); text-decoration: none; white-space: nowrap; cursor: pointer; }
html body .beeang-hub--workspace[data-theme="dark"] .bl-card > header a, html body .beeang-hub--workspace[data-theme="dark"] .bl-alerts a { color: #5fd3de; }
html body .bl-card > header a:hover, html body .bl-alerts a:hover { text-decoration: underline; }
html body .bl-empty { margin: 0; padding: 14px; border: 1.5px dashed var(--bl-line); border-radius: 14px; font-size: 13px; color: var(--bl-mut); text-align: center; }

html body .bl-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
html body .bl-dot--red { background: var(--bl-red); } html body .bl-dot--gold { background: var(--bl-gold); }
html body .bl-dot--green { background: var(--bl-green); } html body .bl-dot--teal { background: var(--bl-cyan); }

html body .bl-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html body .bl-alerts li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--bl-ink); }
html body .bl-alerts li span { flex: 1; min-width: 0; }

html body .bl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
html body .bl-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bl-line); }
html body .bl-list li:first-child { border-top: 0; padding-top: 2px; }
html body .bl-list li > div { flex: 1; min-width: 0; }
html body .bl-list strong { display: block; font-size: 13.5px; line-height: 1.35; color: var(--bl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .bl-list small { display: block; margin-top: 1px; font-size: 12px; color: var(--bl-mut); }
html body .bl-go { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--bl-soft); color: var(--bl-teal); text-decoration: none; font-weight: 700; }

html body .bl-chip { flex: none; display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--bl-soft); color: var(--bl-mut); }
html body .bl-chip--ok { background: var(--bl-ok-bg); color: var(--bl-ok); }
html body .bl-chip--warn { background: var(--bl-warn-bg); color: var(--bl-warn); }
html body .bl-chip--bad { background: var(--bl-bad-bg); color: var(--bl-bad); }
html body .bl-chip--soft { background: var(--bl-card); border: 1px solid var(--bl-line); width: fit-content; }

html body .bl-rev { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
html body .bl-donut { --p: 0; position: relative; flex: none; width: 124px; height: 124px; border-radius: 50%; background: conic-gradient(var(--bl-gold) 0 calc(var(--p) * 1%), var(--bl-cyan) 0); }
html body .bl-donut.is-empty { background: var(--bl-line); }
html body .bl-donut > span { position: absolute; inset: 14px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--bl-card); }
html body .bl-donut strong { font-size: 13.5px; line-height: 1.2; color: var(--bl-ink); }
html body .bl-donut small { font-size: 11px; color: var(--bl-mut); }
html body .bl-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 130px; font-size: 13px; color: var(--bl-mut); }
html body .bl-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
html body .bl-legend .bl-dot { margin-top: 0; }
html body .bl-legend b { width: 100%; padding-left: 17px; font-size: 14.5px; color: var(--bl-ink); }
html body .bl-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bl-line); }
html body .bl-mini b { display: block; font-size: 17px; color: var(--bl-ink); }
html body .bl-mini span { font-size: 11.5px; color: var(--bl-mut); }

html body .bl-prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
html body .bl-prog__item { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 16px; background: var(--bl-soft); }
html body .bl-prog__top span { font-size: 11.5px; color: var(--bl-mut); }
html body .bl-prog__item strong { font-size: 14px; line-height: 1.35; color: var(--bl-ink); }
html body .bl-prog__row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--bl-mut); }
html body .bl-prog__row b { color: var(--bl-ink); }
html body .bl-bar { height: 6px; border-radius: 99px; background: var(--bl-line); overflow: hidden; }
html body .bl-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--bl-teal), var(--bl-cyan)); }

html body .bl-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html body .bl-prod { position: relative; display: grid; gap: 8px; align-content: start; padding: 14px 44px 14px 14px; border-radius: 16px; background: var(--bl-soft); color: var(--bl-ink); text-decoration: none; }
html body .bl-prod:hover { outline: 1.5px solid var(--bl-cyan); }
html body .bl-prod strong { font-size: 14px; line-height: 1.35; color: var(--bl-ink); }
html body .bl-prod small { font-size: 12px; color: var(--bl-mut); }
html body .bl-prod > i { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--bl-card); color: var(--bl-teal); font-style: normal; font-weight: 700; }

@media (max-width: 1100px) {
	html body .bl-ov .bl-card, html body .bl-ov .bl-card--events, html body .bl-ov .bl-card--progress { grid-column: span 6; }
	html body .bl-ov .bl-card--products { grid-column: span 12; }
	html body .bl-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body .bl-prog { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	html body .bl-ov .bl-card, html body .bl-ov .bl-card--events, html body .bl-ov .bl-card--progress, html body .bl-ov .bl-card--products { grid-column: span 12; }
	html body .bl-prods { grid-template-columns: 1fr; }
}

/* Bagian transaksi lipat tidak punya kartu pembungkus tambahan */
html body .beeang-learning__sales--fold { padding: 0; border: 0; background: none; box-shadow: none; }