/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 50px;
  height: 42px;
}

.app-brand-logo.demo svg {
  width: 50px;
  height: 42px;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 78px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}
/*
.bg-navbar-theme {
  background-color: rgba(76, 33, 228, 0.95) !important;
  color: #f1f1f1;
}
.bg-navbar-theme .navbar-brand,
.bg-navbar-theme .navbar-brand a {
  color: #f2f2f2;
}
*/
.menu-horizontal .menu-sub {
  width: auto !important;
}
.card-app:hover,
.card-app:focus {
  background-color:#fd9525;
  
}
.card-app:hover h5,
.card-app:focus h5,
.card-app:hover p,
.card-app:focus p{
  color: #fff !important;
}

.bg_gradient1 {
  background-image: linear-gradient(110deg, #fdcd3b 70%, #ffed4b 70%)

}

@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    width: calc(100% - 3rem) !important;
    max-width: calc(100% - 3rem) !important;
  }
}
/* ==========================================================================
   GAYA HALAMAN (diadaptasi dari ummetro.tracer)
   ========================================================================== */
/* Tabel & DataTables: baris rata tengah, footer/pager rapi */
  .table > :not(caption) > * > * {
    vertical-align: middle;
  }

  /* Paging & Footer Styling */
.light-style .card-datatable .dataTables_wrapper > .row:last-child {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
    border-top: 1px solid rgba(75, 70, 92, 0.08);
  }

.light-style div.dataTables_wrapper div.dataTables_info {
    color: #6f6b7d;
    font-size: 0.875rem;
    padding: 0;
  }

.light-style div.dataTables_wrapper div.dataTables_length {
    margin: 0 !important;
  }

.light-style div.dataTables_wrapper div.dataTables_length label {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: #6f6b7d;
  }

.light-style div.dataTables_wrapper div.dataTables_length select {
    display: inline-block;
    width: auto;
    height: 36px;
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    border: 1px solid #dbdade;
    padding: 0.25rem 2rem 0.25rem 0.75rem;
    color: #5d596c;
  }

.light-style div.dataTables_wrapper div.dataTables_paginate {
    margin: 0 !important;
  }

.light-style div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

.light-style div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem !important;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: #6f6b7d;
    border: 1px solid #dbdade;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
  }

.light-style div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(115, 103, 240, 0.08);
    color: #7367f0;
    border-color: #7367f0;
  }

.light-style div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background-color: #7367f0 !important;
    border-color: #7367f0 !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(115, 103, 240, 0.35);
  }

.light-style div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled .page-link {
    background-color: rgba(134, 146, 208, 0.06) !important;
    border-color: #e6e5e8 !important;
    color: #b7b5be !important;
    cursor: not-allowed;
    opacity: 0.6;
  }


/* ==========================================================================
   ANIMASI LOADING DATATABLES (pasang class .dt-loading pada pembungkus tabel)
   ========================================================================== */
.dt-loading { position: relative; }
.dt-loading .dataTables_wrapper { position: relative; min-height: 220px; }
.dt-loading .dataTables_processing {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .72) !important;
  backdrop-filter: blur(2px);
  animation: dtFade .2s ease;
}
.dt-loading .dataTables_processing > div:not(.dt-loader) { display: none; }
.dt-loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  border-radius: 16px;
  background: var(--bs-card-bg, #fff);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .25);
}
.dt-loader-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(var(--bs-primary-rgb), .15);
  border-top-color: rgba(var(--bs-primary-rgb), 1);
  border-right-color: rgba(var(--bs-primary-rgb), .6);
  animation: dtSpin .8s linear infinite;
}
.dt-loader-text {
  font-size: .875rem;
  font-weight: 600;
  color: rgba(var(--bs-primary-rgb), 1);
}
.dt-loader-dots::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dtDots 1.2s steps(4, end) infinite;
}
/* Baris tabel memudar saat memuat */
.dt-loading .dataTables_wrapper.dt-is-loading tbody { opacity: .35; transition: opacity .2s ease; }
@keyframes dtSpin { to { transform: rotate(360deg); } }
@keyframes dtFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dtDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-loader-spinner { animation-duration: 2s; }
}

/* Kotak pencarian di toolbar card datatable, sejajar dengan tombol */
.dt-toolbar-right .dt-search-box {
  flex: 0 0 280px;
  width: 280px;
  margin: 0;
}
.dt-toolbar-right .dt-search-box .input-group-text,
.dt-toolbar-right .dt-search-box .form-control {
  height: 100%;
}
.dt-toolbar-right .btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .dt-toolbar-right { width: 100%; }
  .dt-toolbar-right .dt-search-box { flex: 1 1 100%; width: 100%; }
}

/* ==========================================================================
   HEADER HALAMAN (pg-header)
   ========================================================================== */
.pg-header {
  position: relative;
  overflow: hidden;
  padding: 24px 28px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .2), transparent 40%),
    linear-gradient(135deg, rgba(var(--bs-primary-rgb), 1) 0%, #5a4fd6 55%, #4338b8 100%);
  box-shadow: 0 18px 40px -20px rgba(var(--bs-primary-rgb), .7);
}
.pg-header::after {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  right: -70px;
  bottom: -130px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, .07);
  pointer-events: none;
}
.pg-header-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pg-header-icon {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
}
.pg-header-crumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  opacity: .8;
  margin-bottom: 2px;
}
.pg-header-crumb a { color: #fff; }
.pg-header-crumb a:hover { text-decoration: underline; }
.pg-header-crumb i { font-size: .8rem; }
.pg-header-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 2px;
}
.pg-header-sub { margin: 0; opacity: .85; font-size: .9rem; }

.pg-header-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.pg-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px);
}
.pg-stat-icon {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: rgba(var(--bs-primary-rgb), 1);
  background: #fff;
}
.pg-stat-icon.is-success { color: #28c76f; }
.pg-stat-icon.is-danger { color: #ea5455; }
.pg-stat-icon.is-info { color: #00bad1; }
.pg-stat strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
}
.pg-stat small { font-size: .75rem; opacity: .85; }

@media (max-width: 991.98px) {
  .pg-header-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .pg-header { padding: 20px; }
  .pg-header-icon { flex-basis: 46px; height: 46px; font-size: 1.4rem; }
}

/* ===== Latar body & kartu ===== */
html:not(.dark-style) body {
  background-color: #f4f6fb;
  background-image: url('../img/bg/bg-body.svg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
html.dark-style body {
  background-color: #171929;
  background-image: url('../img/bg/bg-body-dark.svg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.layout-wrapper,
.layout-page,
.content-wrapper {
  background: transparent !important;
}
.layout-page .card {
  border: 1px solid rgba(var(--bs-primary-rgb), .06);
  box-shadow: 0 4px 18px rgba(34, 41, 47, .06);
}

/* ===== pg-header gaya SIMAKU v2: judul + tombol aksi, chip ringkasan ===== */
.pg-header > * { position: relative; z-index: 1; }
.pg-header h1, .pg-header h2, .pg-header h3,
.pg-header h4, .pg-header h5, .pg-header h6 { color: #fff; }
.pg-header-sub { color: rgba(255, 255, 255, .78); }
.pg-header > .d-flex > .pg-header-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.6rem;
  backdrop-filter: blur(4px);
}
.pg-header-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  font-size: .8rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}
.pg-header-chip strong { color: #fff; font-size: .95rem; }
@media (max-width: 575.98px) {
  .pg-header { border-radius: 14px; }
}

/* ===== Breadcrumb di dalam pg-header (komponen <x-pg-header>) ===== */
.pg-header-breadcrumb { margin-bottom: .35rem; }
.pg-header-breadcrumb .breadcrumb {
  --bs-breadcrumb-item-padding-x: .45rem;
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, .55);
  --bs-breadcrumb-item-active-color: #fff;
  font-size: .78rem;
  flex-wrap: wrap;
  row-gap: .15rem;
}
.pg-header-breadcrumb .breadcrumb-item,
.pg-header-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, .78);
  display: inline-flex;
  align-items: center;
}
.pg-header-breadcrumb .breadcrumb-item a { text-decoration: none; transition: color .15s ease; }
.pg-header-breadcrumb .breadcrumb-item a:hover,
.pg-header-breadcrumb .breadcrumb-item a:focus { color: #fff; text-decoration: underline; }
.pg-header-breadcrumb .breadcrumb-item.active { color: #fff; font-weight: 600; }
.pg-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .55);
}
.pg-header-breadcrumb .breadcrumb-item i { font-size: .85rem; }

/* ===== Kartu halaman kurikulum (.kurikulum-page): header ikut warna tema =====
   Menimpa gaya biru UM (--um-blue + garis kuning) di <style> tiap halaman
   kurikulum; selektor dibuat lebih spesifik agar menang tanpa mengedit 7 file. */
.layout-page .kurikulum-page .card-header {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18), transparent 45%),
    linear-gradient(135deg, rgba(var(--bs-primary-rgb), 1) 0%, #5a4fd6 55%, #4338b8 100%);
  border-bottom: 0;
  color: #fff;
}
.layout-page .kurikulum-page .card-header h1,
.layout-page .kurikulum-page .card-header h2,
.layout-page .kurikulum-page .card-header h3,
.layout-page .kurikulum-page .card-header h4,
.layout-page .kurikulum-page .card-header h5,
.layout-page .kurikulum-page .card-header h6 { color: #fff; }

/* ===== Navigasi kurikulum: menu aktif oranye agar lebih jelas ===== */
.layout-page .kurikulum-navigation.nav-pills .nav-link.active,
.layout-page .kurikulum-navigation.nav-pills .nav-link.active:hover,
.layout-page .kurikulum-navigation.nav-pills .nav-link.active:focus {
  background: linear-gradient(135deg, #ff9f43 0%, #ff8510 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 .35rem .9rem -.25rem rgba(255, 133, 16, .55);
}
.layout-page .kurikulum-navigation.nav-pills .nav-link.active i { color: #fff; }