/* =====================================================================
   Primitif UI halaman publik Diklat - meniru tema admin (assets/css/admin5.css)
   ---------------------------------------------------------------------
   Dipakai oleh frontend/diklat/detail.php dan frontend/diklat/register.php,
   berpasangan dengan diklat_detail.css / diklat_register.css.

   SEMUA aturan di sini discope ke .dk-ui. Halaman publik memuat tema Creote
   (assets/css/style.css) untuk header, footer, dan menu; tanpa scope, aturan
   .card/.form-control di bawah akan ikut mengubah komponen tema tersebut.

   Struktur (kartu, header kartu, badge lembut, kontrol form, tombol) disalin
   dari admin5.css. Yang berbeda hanya warna utama: halaman publik memakai biru
   korporat #0d4d9e agar sewarna dengan katalog diklat, bukan biru Metronic
   #009EF7 milik admin. Ganti --dku-primary di bawah bila ingin persis admin.
   ===================================================================== */

:root {
    /* Satu keluarga font untuk seluruh modul diklat.
       ---------------------------------------------------------------------
       Poppins - keluarga yang sama dengan admin (assets/css/admin5.css) dan SPEAK,
       supaya modul diklat terlihat sekeluarga dari sisi publik sampai admin.

       Poppins TIDAK dimuat oleh header.php (halaman publik hanya memuat Spartan +
       Inter), jadi <link> Google Fonts-nya ditambahkan di frontend/diklat/detail.php
       dan register.php. Kalau berkas ini dipakai di halaman diklat yang baru,
       <link> itu harus ikut disertakan - kalau tidak, browser jatuh ke Helvetica.

       Alternatif kalau ingin halaman diklat menyatu dengan header/menu/footer
       situs publik (yang memakai Spartan + Inter): ganti baris ini ke
       "Inter", sans-serif - font itu sudah dimuat, jadi <link> Poppins bisa dilepas. */
    --dku-font: "Poppins", Helvetica, sans-serif;

    --dku-primary: #0d4d9e;
    --dku-primary-active: #0a3b7a;
    --dku-primary-light: #EAF2FC;
    --dku-success: #1E9E62;
    --dku-success-light: #E8FFF3;
    --dku-info: #7239EA;
    --dku-info-light: #F8F5FF;
    --dku-warning: #B58900;
    --dku-warning-light: #FFF8DD;
    --dku-danger: #D9214E;
    --dku-danger-light: #FFF5F8;

    --dku-dark: #181C32;
    --dku-gray-100: #F5F8FA;
    --dku-gray-200: #EFF2F5;
    --dku-gray-300: #E4E6EF;
    --dku-gray-400: #B5B5C3;
    --dku-gray-500: #A1A5B7;
    --dku-gray-600: #7E8299;
    --dku-gray-700: #5E6278;

    --dku-body-bg: #E9EDF3;
    --dku-card-border: #DCE1EA;

    --dku-radius: 0.475rem;
    --dku-radius-sm: 0.275rem;
    --dku-radius-lg: 0.775rem;

    --dku-pad-x: 1.5rem;
    --dku-pad-y: 1.25rem;

    --dku-transition: .18s ease-in-out;
}

/* =====================================================================
   Dasar
   ===================================================================== */
.dk-ui {
    font-family: var(--dku-font);
    background-color: var(--dku-body-bg);
    color: var(--dku-dark);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

/* Font disapu ke SEMUA turunan, bukan didaftar per jenis elemen.
   ---------------------------------------------------------------------
   Tema Creote menyetel font-family pada banyak selector elemen terpisah -
   h1..h6 dan strong/b memakai Spartan, p/br/body memakai Inter - jadi daftar
   manual selalu menyisakan yang terlewat. Menyapu lewat `*` menutup semuanya
   sekaligus, termasuk elemen form dan tombol yang memang tidak mewarisi font
   dari induknya.

   :not() WAJIB ada: ikon Font Awesome adalah <i class="fa fa-...">, dan tanpa
   pengecualian ini semua ikon di halaman berubah jadi kotak/huruf.
   Pseudo-element ::before yang menyetel font-family sendiri (mis. centang pada
   .step-item.done) tidak terpengaruh - aturan ini hanya mengenai elemennya. */
.dk-ui *:not(.fa):not([class*="fa-"]) {
    font-family: var(--dku-font);
}

.dk-ui h1,
.dk-ui h2,
.dk-ui h3,
.dk-ui h4,
.dk-ui h5,
.dk-ui h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--dku-dark);
}

.dk-ui a {
    text-decoration: none;
    transition: color var(--dku-transition);
}

.dk-ui .text-muted {
    color: var(--dku-gray-600) !important;
}

.dk-ui .fs-7 {
    font-size: 0.85rem !important;
}

.dk-ui .fs-8 {
    font-size: 0.8rem !important;
}

/* =====================================================================
   Kartu - tiga lapis pembatas seperti admin: putih murni di atas latar abu,
   garis tipis, lalu bayangan halus.
   ===================================================================== */
.dk-ui .dku-card {
    background-color: #fff;
    border: 1px solid var(--dku-card-border);
    border-radius: var(--dku-radius-lg);
    box-shadow: 0 1px 2px rgba(24, 28, 50, 0.04), 0 4px 16px rgba(76, 87, 125, 0.06);
    transition: box-shadow var(--dku-transition), border-color var(--dku-transition);
    margin-bottom: 1.5rem;
}

.dk-ui .dku-card:last-child {
    margin-bottom: 0;
}

.dk-ui .dku-card:hover {
    border-color: #C6CDDB;
    box-shadow: 0 0.5rem 1.75rem 0 rgba(76, 87, 125, 0.12);
}

.dk-ui .dku-card-header {
    border-bottom: 1px solid var(--dku-gray-300);
    padding: var(--dku-pad-y) var(--dku-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.dk-ui .dku-card-header h2,
.dk-ui .dku-card-header h5 {
    font-size: 1.075rem;
    font-weight: 600;
    margin: 0;
}

.dk-ui .dku-card-body {
    padding: var(--dku-pad-x);
}

/* Judul bagian di dalam body kartu */
.dk-ui .dku-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dku-dark);
    margin: 0 0 0.65rem;
}

.dk-ui .dku-separator-dashed {
    border-bottom: 1px dashed var(--dku-gray-300);
    margin: 1.25rem 0;
}

/* =====================================================================
   Badge lembut khas Metronic
   ===================================================================== */
.dk-ui .dku-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--dku-radius-sm);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 0.45rem 0.7rem;
}

.dk-ui .dku-badge-primary   { background-color: var(--dku-primary-light); color: var(--dku-primary); }
.dk-ui .dku-badge-success   { background-color: var(--dku-success-light); color: var(--dku-success); }
.dk-ui .dku-badge-info      { background-color: var(--dku-info-light); color: var(--dku-info); }
.dk-ui .dku-badge-warning   { background-color: var(--dku-warning-light); color: var(--dku-warning); }
.dk-ui .dku-badge-danger    { background-color: var(--dku-danger-light); color: var(--dku-danger); }
.dk-ui .dku-badge-secondary { background-color: var(--dku-gray-200); color: var(--dku-gray-600); }

/* =====================================================================
   Formulir
   ===================================================================== */
.dk-ui .form-label {
    display: block;
    font-weight: 500;
    color: var(--dku-gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.dk-ui .form-label .req {
    color: var(--dku-danger);
}

.dk-ui .form-control,
.dk-ui .form-select {
    display: block;
    width: 100%;
    border: 1px solid var(--dku-gray-300);
    border-radius: var(--dku-radius);
    padding: 0.65rem 1rem;
    color: var(--dku-gray-700);
    font-size: 0.95rem;
    line-height: 1.5;
    background-color: #fff;
    transition: border-color var(--dku-transition), box-shadow var(--dku-transition);
}

.dk-ui .form-control:hover:not(:focus),
.dk-ui .form-select:hover:not(:focus) {
    border-color: var(--dku-gray-400);
}

.dk-ui .form-control:focus,
.dk-ui .form-select:focus {
    border-color: var(--dku-primary);
    /* Cincin tipis, bukan bayangan tebal bawaan Bootstrap */
    box-shadow: 0 0 0 3px rgba(13, 77, 158, 0.12);
    color: var(--dku-dark);
    outline: 0;
}

.dk-ui .form-control::placeholder {
    color: var(--dku-gray-400);
}

.dk-ui .form-control[readonly] {
    background-color: var(--dku-gray-100);
    color: var(--dku-gray-600);
}

.dk-ui .form-text {
    font-size: 0.825rem;
    color: var(--dku-gray-500);
    margin-top: 0.4rem;
}

/* =====================================================================
   Tombol
   ===================================================================== */
.dk-ui .btn {
    border-radius: var(--dku-radius);
    border: 0;
    font-weight: 500;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: background-color var(--dku-transition), color var(--dku-transition),
                box-shadow var(--dku-transition), transform var(--dku-transition);
}

.dk-ui .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 0.75rem rgba(24, 28, 50, 0.10);
}

.dk-ui .btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.dk-ui .btn:focus-visible {
    outline: 2px solid var(--dku-primary);
    outline-offset: 2px;
}

.dk-ui .btn:disabled,
.dk-ui .btn[disabled] {
    opacity: 1;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.dk-ui .btn-lg {
    padding: 0.825rem 1.75rem;
    font-size: 1.05rem;
}

.dk-ui .btn-primary { background-color: var(--dku-primary); color: #fff; }
.dk-ui .btn-primary:hover,
.dk-ui .btn-primary:focus { background-color: var(--dku-primary-active); color: #fff; }

.dk-ui .btn-success { background-color: var(--dku-success); color: #fff; }
.dk-ui .btn-success:hover,
.dk-ui .btn-success:focus { background-color: #17804f; color: #fff; }

.dk-ui .btn-secondary { background-color: var(--dku-gray-200); color: var(--dku-gray-700); }
.dk-ui .btn-secondary:hover,
.dk-ui .btn-secondary:focus { background-color: var(--dku-gray-300); color: var(--dku-dark); }

.dk-ui .btn-danger { background-color: var(--dku-danger-light); color: var(--dku-danger); }

.dk-ui .btn-light-primary { background-color: var(--dku-primary-light); color: var(--dku-primary); }
.dk-ui .btn-light-primary:hover { background-color: var(--dku-primary); color: #fff; }

/* =====================================================================
   Peringatan
   ===================================================================== */
.dk-ui .alert {
    border: 0;
    border-radius: var(--dku-radius);
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.dk-ui .alert-success { background-color: var(--dku-success-light); color: #2D8A5C; }
.dk-ui .alert-danger  { background-color: var(--dku-danger-light); color: var(--dku-danger); }
.dk-ui .alert-info    { background-color: var(--dku-primary-light); color: var(--dku-primary); }

/* Hormati pengguna yang mematikan animasi di sistem operasinya */
@media (prefers-reduced-motion: reduce) {
    .dk-ui .dku-card,
    .dk-ui .btn,
    .dk-ui a {
        transition: none !important;
    }

    .dk-ui .btn:hover {
        transform: none;
    }
}