/* =========================================================
   Modern Accordion - Vuexy friendly (Light/Dark)
   ========================================================= */

.modern-accordion{
  /* radius & motion */
  --acc-radius: 16px;
  --acc-radius-inner: 14px;
  --acc-ease: cubic-bezier(.4,0,.2,1);

  /* spacing */
  --acc-gap: 14px;
  --acc-head-py: 1.05rem;
  --acc-head-px: 1.25rem;

  /* IMPORTANT: ini yang ngatasi body "mepet ke atas" */
  --acc-body-pt: 1.1rem;
  --acc-body-px: 1.25rem;
  --acc-body-pb: 1.25rem;

  /* colors (fallback ke Bootstrap/Vuexy vars) */
  --acc-surface: var(--bs-paper-bg, var(--bs-card-bg));
  --acc-surface-2: var(--bs-body-bg);
  --acc-border: rgba(128,128,128,.14);
  --acc-border-soft: rgba(128,128,128,.10);
  --acc-text: var(--bs-body-color);
  --acc-heading: var(--bs-heading-color);
  --acc-muted: var(--bs-secondary-color);

  /* shadows */
  --acc-shadow: 0 10px 26px -14px rgba(0,0,0,.22);
  --acc-shadow-hover: 0 18px 40px -20px rgba(0,0,0,.36);
  --acc-shadow-open: 0 18px 40px -22px rgba(var(--bs-primary-rgb), .55);
}

/* Item spacing */
.modern-accordion .accordion-item{
  border: 0 !important;
  background: transparent !important;
  margin-bottom: var(--acc-gap);
}

/* Header button */
.modern-accordion .accordion-button{
  padding: var(--acc-head-py) var(--acc-head-px);
  border-radius: var(--acc-radius) !important;
  background: var(--acc-surface) !important;
  color: var(--acc-heading) !important;
  font-weight: 650;
  letter-spacing: .1px;

  border: 1px solid var(--acc-border) !important;
  box-shadow: var(--acc-shadow) !important;

  display:flex;
  align-items:center;
  gap:.6rem;

  transition: transform .25s var(--acc-ease),
              box-shadow .25s var(--acc-ease),
              border-color .25s var(--acc-ease),
              background-color .25s var(--acc-ease);
}

/* remove bootstrap focus outline, ganti jadi ring elegan */
.modern-accordion .accordion-button:focus{
  box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .18), var(--acc-shadow) !important;
  border-color: rgba(var(--bs-primary-rgb), .35) !important;
}

/* Hover */
.modern-accordion .accordion-button:hover{
  transform: translateY(-2px);
  box-shadow: var(--acc-shadow-hover) !important;
  border-color: rgba(var(--bs-primary-rgb), .35) !important;
}

/* Active/Open */
.modern-accordion .accordion-button:not(.collapsed){
  background: var(--bs-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--acc-shadow-open) !important;

  /* indikator sisi kiri lebih clean */
  position: relative;
}
.modern-accordion .accordion-button:not(.collapsed)::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 22px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.65);
}

/* Arrow / caret */
.modern-accordion .accordion-button::after{
  background-size: 1.1rem;
  transition: transform .45s cubic-bezier(.68,-.55,.265,1.55), filter .25s var(--acc-ease);
  border-radius: 999px;
  padding: 10px;
}
.modern-accordion .accordion-button:not(.collapsed)::after{
  filter: brightness(0) invert(1);
  transform: rotate(180deg);
}

/* Collapse container */
.modern-accordion .accordion-collapse{
  border: 0;
  background: transparent;
}

/* Body panel (ini yang bikin tampil “card” rapi & tidak mepet) */
.modern-accordion .accordion-body{
  /* HAPUS penarik body ke atas */
  margin-top: 10px;              /* kasih jarak dari header */
  padding: var(--acc-body-pt) var(--acc-body-px) var(--acc-body-pb);

  background: var(--acc-surface-2) !important;
  color: var(--acc-text);
  font-size: .95rem;
  line-height: 1.65;

  border: 1px solid var(--acc-border-soft);
  border-radius: var(--acc-radius);
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.18);
}

/* Animasi konten */
.modern-accordion .accordion-item .accordion-body{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--acc-ease), transform .35s var(--acc-ease);
}
.modern-accordion .accordion-item .collapse.show .accordion-body{
  opacity: 1;
  transform: translateY(0);
}

/* Click feedback halus */
.modern-accordion .accordion-button:active{
  transform: translateY(0) scale(.99);
}

/* =========================================================
   Dark mode tweaks (Vuexy)
   ========================================================= */
[data-bs-theme="dark"] .modern-accordion{
  --acc-surface: #2f3349; /* khas Vuexy dark */
  --acc-surface-2: rgba(47, 51, 73, .55);
  --acc-border: rgba(255,255,255,.08);
  --acc-border-soft: rgba(255,255,255,.06);
  --acc-shadow: 0 14px 30px -20px rgba(0,0,0,.6);
  --acc-shadow-hover: 0 20px 50px -28px rgba(0,0,0,.7);
}

/* glassy sedikit (opsional, tetap elegan) */
[data-bs-theme="dark"] .modern-accordion .accordion-body{
  background: linear-gradient(180deg, rgba(47,51,73,.78) 0%, rgba(47,51,73,.46) 100%) !important;
  backdrop-filter: blur(10px);
}

/* =========================================================
   Extra: rapikan elemen di dalam body (button, hint, list)
   ========================================================= */

/* Header kecil di dalam body (mis: "Silahkan salin prompt...") */
.modern-accordion .accordion-body .text-muted.small{
  color: var(--acc-muted) !important;
}

/* Button group di body biar sejajar & gak “nabrak” */
.modern-accordion .accordion-body .btn{
  border-radius: 12px;
}
.modern-accordion .accordion-body .btn.btn-outline-warning,
.modern-accordion .accordion-body .btn.btn-outline-primary{
  border-color: rgba(var(--bs-primary-rgb), .35);
}

/* Kalau ada container flex atas, kasih jarak bawah */
.modern-accordion .accordion-body > .d-flex{
  margin-bottom: .75rem;
}

/* Optional: kalau mau body lebih “boxed” lagi, pakai class ini */
.modern-accordion .acc-inner{
  padding: .85rem;
  border-radius: var(--acc-radius-inner);
  border: 1px dashed rgba(128,128,128,.18);
  background: rgba(255,255,255,.02);
}

/* Responsive */
@media (max-width: 768px) {
	.modern-accordion .accordion-button {
		padding: 1rem;
		font-size: 1rem;
	}

	.cpl-card {
		padding: 1.5rem;
	}

	.cpmk-header {
		flex-direction: column;
		gap: 1rem;
	}

	.modern-table {
		display: block;
		overflow-x: auto;
	}
}

/* CPL Card */
.cpl-card {
	background: var(--bs-card-bg);
	border-radius: var(--card-radius);
	padding: 2rem;
	margin: 1.5rem 0;
	box-shadow: var(--card-shadow);
	border-left: 4px solid var(--bs-primary);
	transition: var(--transition-smooth);
}

.cpl-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--card-shadow-hover);
}

.cpl-quote {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--bs-body-color);
	padding: 1rem 1.5rem;
	background: var(--bs-secondary-bg);
	border-radius: 10px;
	position: relative;
	border: 1px solid var(--bs-border-color);
}

.cpl-quote::before {
	content: "❝";
	position: absolute;
	left: -10px;
	top: -10px;
	font-size: 2rem;
	color: var(--bs-primary);
	background: var(--bs-card-bg);
	padding: 0 5px;
}

/* CPMK Card */
.cpmk-card {
	background: var(--bs-card-bg);
	border-radius: var(--card-radius);
	border: 1px solid var(--bs-border-color);
	margin-bottom: 2rem;
	overflow: hidden;
	transition: var(--transition-smooth);
}

.cpmk-card:hover {
	box-shadow: var(--card-shadow-hover);
}

.cpmk-header {
	background: linear-gradient(135deg, var(--bs-primary-bg-subtle), transparent);
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--bs-border-color);
}

.cpmk-badge {
	display: inline-block;
	background: var(--bs-primary);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.9rem;
	margin-right: 1rem;
}

/* Modern Table */
.modern-table {
	border: none;
}

.modern-table thead {
	background: var(--bs-tertiary-bg);
}

.modern-table th {
	border: none;
	padding: 1rem;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--bs-secondary-color);
}

.modern-table td {
	border: none;
	padding: 1rem;
	border-bottom: 1px solid var(--bs-border-color);
	vertical-align: middle;
}

.modern-table tbody tr {
	transition: var(--transition-smooth);
}

.modern-table tbody tr:hover {
	background: var(--bs-secondary-bg);
}

/* Modern Buttons */
.btn-modern {
	padding: 0.625rem 1.25rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.875rem;
	transition: var(--transition-smooth);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid transparent;
}

.btn-quiz {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
}

.btn-quiz:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
	color: white;
}

.btn-tugas {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	color: white;
	border: none;
}

.btn-tugas:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(245, 87, 108, 0.3);
	color: white;
}

.btn-icon {
	width: 20px;
	height: 20px;
}

/* Stats Badges */
.stat-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.875rem;
	background: var(--bs-primary-bg-subtle);
	color: var(--bs-primary);
	margin: 0 0.5rem;
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 3rem;
	color: var(--bs-secondary-color);
}

.empty-state-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.5;
}

/* Dark Theme Specific */
html[data-bs-theme="dark"] .modern-accordion .accordion-button {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
}

html[data-bs-theme="dark"] .cpl-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .modern-table thead {
	background: rgba(255, 255, 255, 0.05);
}

/* Animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in {
	animation: fadeIn 0.4s ease forwards;
}



#div_btn_simpan {
	position: fixed;
	z-index: 99;
	width: 100%;
	left: 0px;
	bottom: 10px
}