/*
 * E-SIKALI — Modern UI Layer
 * Override layer di atas Metronic v5 (demo1).
 * WAJIB di-load PALING AKHIR, setelah style.bundle.css & semua skins.
 * Ubah nilai di :root untuk mengganti tema tanpa menyentuh file lain.
 */

:root {
    --m-brand: #5468ff;
    --m-brand-dark: #3b4fe0;
    --m-brand-soft: rgba(84, 104, 255, .10);
    --m-brand-ring: rgba(84, 104, 255, .18);

    --m-success: #16c79a;
    --m-info: #3aa8f5;
    --m-warning: #f7b731;
    --m-danger: #f5576c;

    --m-body-bg: #f3f5fa;
    --m-surface: #ffffff;
    --m-border: #e9ecf3;
    --m-border-soft: #f1f3f8;

    --m-text: #1f2a44;
    --m-text-muted: #7b849b;
    --m-text-faint: #a2aabf;

    --m-aside-bg: #151a2d;
    --m-aside-bg-2: #10142a;
    --m-aside-text: #9aa3bd;
    --m-aside-text-active: #ffffff;
    --m-aside-section: #5b6584;

    --m-radius-sm: 8px;
    --m-radius: 12px;
    --m-radius-lg: 16px;

    --m-shadow-xs: 0 1px 2px rgba(24, 33, 64, .05);
    --m-shadow-sm: 0 2px 8px rgba(24, 33, 64, .05);
    --m-shadow: 0 6px 24px -8px rgba(24, 33, 64, .14), 0 2px 6px rgba(24, 33, 64, .04);
    --m-shadow-lg: 0 20px 50px -18px rgba(24, 33, 64, .28);

    --m-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   1. BASE
   ============================================================ */

body {
    font-family: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .92rem;
    color: var(--m-text);
    background-color: var(--m-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kt-page,
.kt-wrapper,
.kt-content {
    background-color: var(--m-body-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--m-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--m-brand);
    transition: color .15s var(--m-ease);
}

a:hover {
    color: var(--m-brand-dark);
}

/* Scrollbar halus */
* {
    scrollbar-width: thin;
    scrollbar-color: #c7cddd transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #c7cddd;
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #aab3c9;
}

/* ============================================================
   2. SIDEBAR (ASIDE)
   ============================================================ */

.kt-aside {
    background: linear-gradient(180deg, var(--m-aside-bg) 0%, var(--m-aside-bg-2) 100%);
    /* Warna solid, bukan putih transparan: background aside di-clip border-box
       sehingga gradient gelapnya ikut mengecat area border dan garisnya jadi
       terbaca hitam. Abu-abu ini sama dengan pemisah lain di UI. */
    border-right: 1px solid var(--m-border);
}

/* Skin bawaan mengecat .kt-aside-menu solid #1e1e2d sehingga warnanya
   beda dengan area brand. Dibuat transparan supaya seluruh sidebar
   memakai gradient .kt-aside yang sama. */
.kt-aside .kt-aside-menu,
.kt-aside .kt-aside-menu-wrapper,
.kt-aside .kt-aside__footer {
    background-color: transparent;
}

/* Area brand dibuat terang, badan sidebar tetap gelap: logo header
   (img/logo-header.png) berwarna biru-merah dengan outline putih, kontrasnya
   hilang di atas gradient gelap. Ini mengembalikan perilaku skin bawaan
   (skins/brand/light.css) yang sebelumnya ditimpa transparan di sini. */
.kt-aside .kt-aside__brand {
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
}

.kt-aside .kt-aside__brand .kt-aside__brand-logo img {
    max-height: 34px;
}

/* Tombol minimize sekarang duduk di atas putih, jadi warnanya dipastikan
   brand blue (bukan hitam bawaan inline fill pada <svg>). */
.kt-aside .kt-aside__brand .kt-aside__brand-tools svg g [fill] {
    fill: var(--m-brand);
}

.kt-aside__brand-aside-toggler {
    opacity: .75;
    transition: opacity .2s var(--m-ease);
}

.kt-aside__brand-aside-toggler:hover {
    opacity: 1;
}

/* Pill inset untuk item menu */
body:not(.kt-aside--minimize) .kt-aside-menu .kt-menu__nav {
    padding: 14px 14px 30px;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item>.kt-menu__link,
.kt-aside-menu .kt-menu__nav .kt-menu__item>.kt-menu__heading {
    height: 42px;
    border-radius: var(--m-radius-sm);
    transition: background-color .18s var(--m-ease), color .18s var(--m-ease);
}

body:not(.kt-aside--minimize) .kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link,
body:not(.kt-aside--minimize) .kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__heading {
    padding: 0 14px;
}

.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__heading .kt-menu__link-text {
    color: var(--m-aside-text);
    font-size: .875rem;
    font-weight: 500;
}

.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__heading .kt-menu__link-icon {
    color: #5f6a8c;
    font-size: 1.15rem;
    width: 32px;
    transition: color .18s var(--m-ease);
}

/* Hover */
.kt-aside-menu .kt-menu__nav>.kt-menu__item:not(.kt-menu__item--active)>.kt-menu__link:hover,
.kt-aside-menu .kt-menu__nav>.kt-menu__item:not(.kt-menu__item--active)>.kt-menu__heading:hover {
    background-color: rgba(255, 255, 255, .05);
}

.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link:hover .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__heading:hover .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link:hover .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__heading:hover .kt-menu__link-icon {
    color: #ffffff;
}

/* Parent terbuka / sedang dilalui */
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--open>.kt-menu__link,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--open>.kt-menu__heading,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--here>.kt-menu__link,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--here>.kt-menu__heading {
    background-color: rgba(255, 255, 255, .06);
}

.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--open>.kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--open>.kt-menu__heading .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--here>.kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--here>.kt-menu__heading .kt-menu__link-text {
    color: #ffffff;
}

.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--open>.kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--open>.kt-menu__heading .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--here>.kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--here>.kt-menu__heading .kt-menu__link-icon {
    color: #ffffff;
}

/* Item aktif */
.kt-aside-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--active,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active {
    background-color: transparent;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__link,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__heading {
    background: linear-gradient(135deg, var(--m-brand) 0%, var(--m-brand-dark) 100%);
    box-shadow: 0 8px 18px -8px rgba(84, 104, 255, .85);
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__heading .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__heading .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__link .kt-menu__ver-arrow {
    color: var(--m-aside-text-active);
    background-color: transparent;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__heading .kt-menu__link-text {
    font-weight: 600;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__link .kt-menu__link-bullet .kt-menu__link-bullet-dot>span,
.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active>.kt-menu__link .kt-menu__link-bullet .kt-menu__link-bullet-line>span {
    background-color: var(--m-aside-text-active);
}

/* Section / label grup */
.kt-aside-menu .kt-menu__nav .kt-menu__section {
    margin: 22px 0 6px;
    height: auto;
}

/* Base Metronic memberi section padding 0 25px, sedangkan ikon menu mulai di
   14px (padding .kt-menu__link). Disamakan supaya label grup rata kiri dengan
   ikon. Di-scope seperti aturan padding link di atas: saat aside minimize,
   label section disembunyikan dan hanya ikonnya yang dipusatkan. */
body:not(.kt-aside--minimize) .kt-aside-menu .kt-menu__nav .kt-menu__section {
    padding: 0 14px;
}

.kt-aside-menu .kt-menu__nav .kt-menu__section .kt-menu__section-text {
    color: var(--m-aside-section);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.kt-aside-menu .kt-menu__nav .kt-menu__section .kt-menu__section-icon {
    color: var(--m-aside-section);
}

/* Submenu */
.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__subnav {
    padding: 2px 0;
}

.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item>.kt-menu__link {
    height: 38px;
    border-radius: var(--m-radius-sm);
}

.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item>.kt-menu__link .kt-menu__link-text {
    color: #808aa6;
    font-size: .83rem;
}

.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item>.kt-menu__link:hover .kt-menu__link-text {
    color: #ffffff;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item .kt-menu__ver-arrow {
    color: #6b7391;
    font-size: .75rem;
    opacity: .5;
}

/* ============================================================
   3. HEADER
   ============================================================ */

.kt-header {
    background-color: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--m-border);
    box-shadow: none;
}

.kt-header .kt-header-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link {
    border-radius: var(--m-radius-sm);
    padding: 0 14px;
    transition: background-color .18s var(--m-ease);
}

.kt-header .kt-header-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link .kt-menu__link-text {
    font-weight: 500;
    font-size: .9rem;
    color: var(--m-text);
}

.kt-header .kt-header-menu .kt-menu__nav>.kt-menu__item:hover>.kt-menu__link,
.kt-header .kt-header-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--active>.kt-menu__link,
.kt-header .kt-header-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--here>.kt-menu__link {
    background-color: var(--m-brand-soft);
}

.kt-header .kt-header-menu .kt-menu__nav>.kt-menu__item:hover>.kt-menu__link .kt-menu__link-text,
.kt-header .kt-header-menu .kt-menu__nav>.kt-menu__item.kt-menu__item--active>.kt-menu__link .kt-menu__link-text {
    color: var(--m-brand);
}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-user {
    padding: 4px 4px 4px 12px;
    border-radius: 40px;
    transition: background-color .18s var(--m-ease);
}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-user:hover {
    background-color: #f4f5fa;
}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-user img {
    height: 34px;
    width: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: var(--m-shadow-xs);
}

.kt-header__topbar .kt-header__topbar-welcome {
    color: var(--m-text-muted);
    font-size: .85rem;
}

.kt-header__topbar .kt-header__topbar-username {
    color: var(--m-text);
    font-weight: 600;
    font-size: .85rem;
}

/* Header mobile: memuat logo header yang sama, jadi ikut terang supaya
   logonya tetap terbaca. Warna tombol toggler-nya sudah disiapkan untuk
   latar terang oleh skins/brand/light.css. */
.kt-header-mobile {
    background-color: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-sm);
}

/* ============================================================
   4. SUBHEADER / BREADCRUMB
   ============================================================ */

.kt-subheader {
    background-color: transparent;
    margin: 0;
    padding-top: 6px;
}

.kt-subheader .kt-subheader__title {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--m-text);
}

.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link,
.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-home i {
    color: var(--m-text-muted);
    font-size: .82rem;
    transition: color .15s var(--m-ease);
}

.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link:hover,
.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-home:hover i {
    color: var(--m-brand);
}

.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-separator:after {
    background-color: var(--m-text-faint);
}

/* ============================================================
   5. PORTLET / CARD
   ============================================================ */

.kt-portlet {
    background-color: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow .25s var(--m-ease);
}

.kt-portlet:hover {
    box-shadow: var(--m-shadow);
}

.kt-portlet .kt-portlet__head {
    border-bottom: 1px solid var(--m-border-soft);
    padding: 0 24px;
    min-height: 66px;
    border-radius: 0;
}

.kt-portlet .kt-portlet__head.kt-portlet__head--sm {
    min-height: 60px;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--m-text);
    letter-spacing: -.01em;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-icon {
    font-size: 1.1rem;
    padding-right: 10px;
    color: var(--m-brand);
}

.kt-portlet .kt-portlet__head .kt-portlet__head-icon .kt-font-brand,
.kt-portlet .kt-portlet__head .kt-portlet__head-icon i {
    color: var(--m-brand);
}

.kt-portlet .kt-portlet__body {
    padding: 5px 24px 24px 24px;
}

.kt-portlet .kt-portlet__foot {
    border-top: 1px solid var(--m-border-soft);
    padding: 18px 24px;
    background-color: #fcfcfe;
}

.kt-portlet.kt-portlet--mobile .kt-portlet__head {
    border-bottom: 1px solid var(--m-border-soft);
}

/* ============================================================
   6. TABEL
   ============================================================ */

.table {
    color: var(--m-text);
    margin-bottom: 0;
}

.table thead th {
    background-color: #fafbfe;
    border-top: none;
    border-bottom: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 9px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.table tbody td {
    border-top: none;
    border-bottom: 1px solid var(--m-border-soft);
    padding: 9px 10px;
    vertical-align: top;
    font-size: .875rem;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Grid penuh diganti garis horizontal saja */
.table-bordered,
.table-bordered thead th,
.table-bordered thead td,
.table-bordered tbody td,
.table-bordered tbody th {
    border-left: none;
    border-right: none;
}

.table-bordered {
    border: none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-hover tbody tr {
    transition: background-color .15s var(--m-ease);
}

.table-hover tbody tr:hover {
    background-color: #f7f8fd;
}

.table td a,
.table td .btn-link {
    color: var(--m-brand);
}

/* Ikon aksi di dalam tabel */
.table td .btn.btn-icon.btn-sm {
    height: 1.75rem;
    width: 1.75rem;
    padding: 0;
}

.table td .btn-icon i,
.table td .btn-sm i {
    font-size: 1.05rem;
}

/* ============================================================
   7. DATATABLES
   ============================================================ */

.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: 7px 12px;
    background-color: #fff;
    transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease);
}

/* Pilihan jumlah baris: panah bawaan browser diganti chevron sendiri dan
   diberi ruang, supaya angkanya tidak menempel ke panah. */
.dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: auto;
    margin: 0 6px;
    padding: 7px 28px 7px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2374788d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--m-brand);
    box-shadow: 0 0 0 3px var(--m-brand-ring);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--m-text-muted);
    font-size: .85rem;
    padding-top: 14px;
}

/* Baris paging ikut diberi jarak yang sama seperti .dataTables_info di
 * sebelahnya. Tanpa ini tombol halaman menempel ke garis bawah tabel dan
 * tingginya tidak sebaris dengan teks "Showing x to y of z". */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 14px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    border-radius: var(--m-radius-sm) !important;
    border: none;
    color: var(--m-text-muted);
    margin: 0 5px;
    min-width: 34px;
    height: 34px;
    line-height: 34px;
    transition: all .15s var(--m-ease);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
    background: var(--m-brand-soft);
    color: var(--m-brand);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background: var(--m-brand);
    color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(84, 104, 255, .9);
}

/* Ikon sorting diposisikan center vertikal terhadap thead */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
    top: 50%;
    bottom: auto;
    line-height: 1;
    transform: translateY(-50%);
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    opacity: .45;
}

/* Scroll horizontal untuk tabel yang lebih lebar dari kartunya -- mis. dua
 * tabel bersanding di form SPK. Sebelumnya kolom paling kanan cuma terpotong
 * karena portlet memangkas isinya; sekarang isinya bisa digeser. */
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* dom bawaan DataTables menaruh tabel sendirian di <'row'<'col-sm-12'tr>>,
 * terpisah dari baris kontrol yang kolomnya selalu "col-sm-12 col-md-*".
 * Pencocokan class persis dipakai supaya overflow cuma kena kolom tabel: yang
 * bergeser hanya tabelnya (kontrol tetap di tempat), dan baris kontrol tidak
 * ikut jadi kotak scroll -- kalau kena, bayangan tombol pagination yang aktif
 * ikut terpotong di tepi bawahnya. */
.table-scroll>.dataTables_wrapper>.row>[class="col-sm-12"] {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

/* Gutter negatif bawaan .row bikin barisnya menonjol 10px ke kiri-kanan di luar
 * badan portlet. Selama portlet overflow-nya visible tonjolan itu tak terlihat,
 * tapi begitu pembungkus ini diberi overflow-x jadi memicu scrollbar palsu di
 * kaki kartu -- menggeser 20px tanpa ada isi yang tersembunyi. Gutter dan
 * padding kolomnya sama-sama dinolkan: posisi isinya tetap sama (-10px + 10px
 * = 0), yang hilang cuma tonjolannya. */
.table-scroll>.dataTables_wrapper>.row {
    margin-left: 0;
    margin-right: 0;
}

.table-scroll>.dataTables_wrapper>.row>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   8. TOMBOL
   ============================================================ */

.btn {
    border-radius: var(--m-radius-sm);
    font-weight: 600;
    font-size: .85rem;
    padding: .58rem 1.1rem;
    transition: all .18s var(--m-ease);
    border: 1px solid transparent;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--m-brand-ring);
}

/* Isi tombol dibariskan dengan flex supaya tingginya ditentukan padding + teks,
 * bukan metrik font ikonnya. Aplikasi ini mencampur empat keluarga ikon (Font
 * Awesome, Line Awesome, Flaticon, Flaticon2) dan metriknya beda-beda -- .fa
 * bahkan display:inline-block dengan line-height sendiri, sedangkan flaticon
 * inline biasa -- sehingga dua tombol bersanding bisa beda tinggi beberapa
 * piksel cuma karena ikonnya beda asal. Contohnya "Tambah Alat" dan "Hapus" di
 * kepala portlet SPK. Efek sampingnya jarak ikon-ke-teks jadi seragam dari
 * padding ikon saja, tidak lagi tergantung ada tidaknya spasi di markup.
 *
 * .btn-icon dikecualikan: tombol ikon tanpa teks ukurannya sudah dipatok
 * persegi tersendiri oleh tema. */
.btn:not(.btn-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:not(.btn-icon)>i {
    line-height: 1;
}

.btn.btn-sm {
    padding: .38rem .8rem;
    font-size: .78rem;
    border-radius: 7px;
}

.btn.btn-lg {
    padding: .8rem 1.6rem;
    font-size: .95rem;
    border-radius: var(--m-radius);
}

.btn.btn-brand,
.btn.btn-primary {
    background: linear-gradient(135deg, var(--m-brand) 0%, var(--m-brand-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(84, 104, 255, .95);
}

.btn.btn-brand:hover,
.btn.btn-primary:hover,
.btn.btn-brand:focus,
.btn.btn-primary:focus {
    background: linear-gradient(135deg, var(--m-brand-dark) 0%, #2f42cc 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(84, 104, 255, 1);
}

.btn.btn-success {
    background-color: var(--m-success);
    border-color: var(--m-success);
    box-shadow: 0 8px 18px -10px rgba(22, 199, 154, .95);
}

.btn.btn-info {
    background-color: var(--m-info);
    border-color: var(--m-info);
    box-shadow: 0 8px 18px -10px rgba(58, 168, 245, .95);
}

.btn.btn-warning {
    background-color: var(--m-warning);
    border-color: var(--m-warning);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(247, 183, 49, .95);
}

.btn.btn-danger {
    background-color: var(--m-danger);
    border-color: var(--m-danger);
    box-shadow: 0 8px 18px -10px rgba(245, 87, 108, .95);
}

.btn.btn-success:hover,
.btn.btn-info:hover,
.btn.btn-warning:hover,
.btn.btn-danger:hover,
.btn.btn-secondary:hover {
    transform: translateY(-1px);
    filter: brightness(.96);
}

.btn.btn-secondary {
    background-color: #f1f3f9;
    border-color: #f1f3f9;
    color: var(--m-text);
}

.btn.btn-outline-brand,
.btn.btn-outline-primary {
    border-color: var(--m-brand);
    color: var(--m-brand);
    background: transparent;
}

.btn.btn-outline-brand:hover,
.btn.btn-outline-primary:hover {
    background-color: var(--m-brand);
    color: #fff;
}

.btn.btn-label-brand {
    background-color: var(--m-brand-soft);
    color: var(--m-brand);
    border-color: transparent;
}

.btn.btn-label-brand:hover {
    background-color: var(--m-brand);
    color: #fff;
}

.btn.btn-icon {
    border-radius: var(--m-radius-sm);
}

.btn-group>.btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ============================================================
   9. FORM
   ============================================================ */

.form-control {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: .6rem .9rem;
    height: auto;
    font-size: .875rem;
    color: var(--m-text);
    background-color: #fff;
    transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease);
}

.form-control:focus {
    border-color: var(--m-brand);
    box-shadow: 0 0 0 3px var(--m-brand-ring);
    background-color: #fff;
}

.form-control::placeholder {
    color: var(--m-text-faint);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f7f8fc;
    color: var(--m-text-muted);
}

.form-control.is-invalid,
.form-control.error {
    border-color: var(--m-danger);
}

.form-control.is-invalid:focus,
.form-control.error:focus {
    box-shadow: 0 0 0 3px rgba(245, 87, 108, .18);
}

/* Metronic memakai merah yang berbeda (#fd397a) untuk pesan validasi,
   sehingga tulisannya tidak sewarna dengan garis kotak isian. */
.invalid-feedback,
label.error,
.form-control-feedback.error {
    color: var(--m-danger);
}

label,
.col-form-label {
    font-weight: 500;
    font-size: .85rem;
    color: var(--m-text);
    margin-bottom: .4rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-text,
.form-control-feedback {
    font-size: .78rem;
    color: var(--m-text-muted);
}

.input-group-text {
    background-color: #f7f8fc;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    color: var(--m-text-muted);
}

/* Select2 - disamakan tinggi & tipografinya dengan .form-control */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    background-color: #fff;
    font-size: .875rem;
    line-height: 1.5;
    min-height: calc(1.5em + 1.2rem + 2px);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: .6rem 2.4rem .6rem .9rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--m-text);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--m-text-faint);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    height: auto;
    line-height: 1;
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: .25rem .55rem;
    font-size: .875rem;
    line-height: 1.5;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    margin: .2rem .3rem .2rem 0;
    padding: .1rem .5rem;
    border-radius: var(--m-radius-sm);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--m-brand) !important;
    box-shadow: 0 0 0 3px var(--m-brand-ring);
}

.select2-dropdown {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    box-shadow: var(--m-shadow);
    overflow: hidden;
}

.select2-container--default .select2-results__option {
    padding: .5rem .9rem;
    font-size: .875rem;
}

/* Opsi yang sedang disorot. Metronik menyetel warna teksnya jadi abu-abu
 * (#74788d) lewat selector .select2-results__option.select2-results__option--highlighted,
 * jadi latar brand di sini harus dibarengi warna teks -- kalau tidak, tulisannya
 * abu-abu di atas biru dan praktis tidak terbaca. Selectornya sengaja disamakan
 * bentuknya supaya menang spesifisitas, bukan cuma menang urutan. */
.select2-container--default .select2-results__option.select2-results__option--highlighted,
.select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected=true] {
    background-color: var(--m-brand);
    color: #fff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: .45rem .7rem;
    font-size: .875rem;
}

/* Datepicker */
.datepicker {
    border-radius: var(--m-radius);
    border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow);
    padding: 10px;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active {
    background-image: none !important;
    background-color: var(--m-brand) !important;
    border-radius: 6px;
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: 6px;
}

/* ============================================================
   10. MODAL, DROPDOWN, ALERT, BADGE
   ============================================================ */

.modal-content {
    border: none;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--m-border-soft);
    padding: 20px 24px;
}

.modal-header .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--m-border-soft);
    padding: 16px 24px;
    background-color: #fcfcfe;
}

.modal-backdrop.show {
    opacity: .4;
}

.dropdown-menu {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 8px;
}

.dropdown-menu .dropdown-item {
    border-radius: 7px;
    padding: .55rem .8rem;
    font-size: .85rem;
    transition: background-color .15s var(--m-ease);
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--m-brand-soft);
    color: var(--m-brand);
}

.kt-notification .kt-notification__item {
    border-radius: var(--m-radius-sm);
    transition: background-color .15s var(--m-ease);
}

.kt-notification .kt-notification__item:hover {
    background-color: var(--m-brand-soft);
}

.kt-user-card--skin-dark {
    border-top-left-radius: var(--m-radius);
    border-top-right-radius: var(--m-radius);
}

.alert {
    border: none;
    border-radius: var(--m-radius);
    padding: 14px 18px;
    font-size: .875rem;
}

.alert.alert-success {
    background-color: rgba(22, 199, 154, .12);
    color: #0e8f6e;
}

.alert.alert-danger {
    background-color: rgba(245, 87, 108, .12);
    color: #d02f47;
}

.alert.alert-warning {
    background-color: rgba(247, 183, 49, .14);
    color: #b3800e;
}

.alert.alert-info {
    background-color: rgba(58, 168, 245, .12);
    color: #1a7fc4;
}

/* Tema memaksa isi .alert-icon/.alert-text jadi putih karena aslinya latar
 * alert-nya blok warna penuh. Di sini latarnya sudah diganti jadi tint
 * terang, jadi warnanya dikembalikan mengikuti warna alert-nya sendiri
 * supaya teksnya tetap terbaca. Bobot pemilihnya harus sama dengan aturan
 * tema (.alert.alert-x .alert-text), makanya ditulis satu per satu. */
.alert.alert-success .alert-icon i,
.alert.alert-success .alert-text,
.alert.alert-success .alert-close i,
.alert.alert-danger .alert-icon i,
.alert.alert-danger .alert-text,
.alert.alert-danger .alert-close i,
.alert.alert-warning .alert-icon i,
.alert.alert-warning .alert-text,
.alert.alert-warning .alert-close i,
.alert.alert-info .alert-icon i,
.alert.alert-info .alert-text,
.alert.alert-info .alert-close i {
    color: inherit;
}

.badge,
.kt-badge {
    border-radius: 6px;
    font-weight: 600;
    font-size: .72rem;
    padding: .4em .65em;
    letter-spacing: .02em;
}

/* Varian inline dipakai untuk kolom status di hampir semua daftar. Tema
 * mematoknya padding .2rem dan sudut 2px lewat selector .kt-badge.kt-badge--inline
 * yang menang spesifisitas dari aturan di atas, hasilnya kotak sempit bersudut
 * tajam di tengah tampilan yang serba membulat. Selectornya disamakan bentuknya
 * di sini supaya nilainya yang dipakai, bukan cuma menang urutan. */
.kt-badge.kt-badge--inline {
    padding: .4em .65em;
    border-radius: 6px;
}

/* SweetAlert2 */
.swal2-popup {
    border-radius: var(--m-radius-lg) !important;
    font-family: inherit;
}

.swal2-popup .swal2-styled {
    border-radius: var(--m-radius-sm) !important;
    font-weight: 600;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, var(--m-brand) 0%, var(--m-brand-dark) 100%) !important;
}

/* ============================================================
   11. WIDGET DASHBOARD & FOOTER
   ============================================================ */

.kt-widget24,
.kt-widget14,
.kt-widget12 {
    border-radius: var(--m-radius-lg);
}

.kt-widget24 .kt-widget24__stats {
    font-weight: 600;
}

.kt-footer {
    background: transparent;
    padding: 18px 0;
}

.kt-footer .kt-footer__copyright {
    color: var(--m-text-faint);
    font-size: .8rem;
}

.kt-scrolltop {
    border-radius: var(--m-radius-sm);
    background: var(--m-brand);
    box-shadow: var(--m-shadow);
}

.kt-scrolltop:hover {
    background: var(--m-brand-dark);
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {

    .kt-portlet .kt-portlet__body,
    .kt-portlet .kt-portlet__head {
        padding-left: 16px;
        padding-right: 16px;
    }

    .kt-subheader .kt-subheader__title {
        font-size: 1.15rem;
    }

    .table thead th,
    .table tbody td {
        padding: 8px;
    }
}

/* ============================================================
   13. HALAMAN AUTENTIKASI
   Login, Daftar, Lupa Password, Verifikasi OTP dan Reset
   Password memakai satu kerangka yang sama: panel brand di kiri
   (layar besar) + area form di kanan.

   Namespace .es-auth berdiri sendiri, tidak lagi menumpang
   pages/login/login-3.css bawaan Metronic (file itu sudah tidak
   di-load di template_login.php). Kelas kt-login--signin /
   --signup / --forgot tetap dipakai karena pergantian panelnya
   ditangani login-general.js bawaan tema.
   ============================================================ */

/* style.bundle.css menyetel html, body { height: 100% } dan body jadi
   flex container. Di halaman auth itu bikin panel Daftar yang lebih
   tinggi dari layar terpotong: halaman tidak bisa tumbuh mengikuti isi.
   Body dikembalikan ke aliran normal khusus halaman ini. */
body.es-auth-body {
    display: block;
    height: auto;
    min-height: 100%;
}

.es-auth {
    --a-dark-1: #171c38;
    --a-dark-2: #263075;
    --a-dark-3: #4457e8;
    --a-on-dark: rgba(255, 255, 255, .72);

    display: flex;
    min-height: 100vh;
    text-align: left;
    background: var(--m-surface);
}

/* ---------- Panel brand (kiri) ---------- */

/* Sticky: pada panel yang panjang (Daftar), panel brand tetap terlihat
   selagi form di kanan di-scroll, bukan ikut menggulung ke atas. */
.es-auth__aside {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 0 0 44%;
    max-width: 640px;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(150deg, var(--a-dark-1) 0%, var(--a-dark-2) 55%, var(--a-dark-3) 100%);
}

/* Foto latar ditaruh di elemen sendiri supaya opacity-nya tidak
   ikut menipiskan teks di atasnya */
.es-auth__aside-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: .14;
    mix-blend-mode: luminosity;
}

/* Dua cahaya lembut supaya gradasi tidak terlihat datar */
.es-auth__aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 420px at 12% 8%, rgba(120, 150, 255, .30), transparent 65%),
        radial-gradient(480px 380px at 92% 96%, rgba(84, 104, 255, .34), transparent 62%);
    pointer-events: none;
}

.es-auth__aside-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 58px;
}

.es-auth__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    margin-bottom: 26px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.es-auth__headline {
    margin: 0 0 16px;
    color: #fff;
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.es-auth__lead {
    max-width: 30em;
    margin: 0 0 34px;
    color: var(--a-on-dark);
    font-size: .95rem;
    line-height: 1.7;
}

.es-auth__points {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.es-auth__points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .88);
    font-size: .9rem;
    line-height: 1.55;
}

.es-auth__points li:last-child {
    margin-bottom: 0;
}

.es-auth__points i {
    flex: 0 0 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    font-size: 1.05rem;
}

.es-auth__points b {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-weight: 600;
}

.es-auth__aside-foot {
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .58);
    font-size: .78rem;
    line-height: 1.7;
}

.es-auth__aside-foot strong {
    display: block;
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
    font-weight: 600;
}

/* ---------- Area form (kanan) ---------- */

/* Isi dipusatkan lewat margin auto, bukan justify-content: center.
   Pada panel Daftar yang tinggi, centering flex akan memotong bagian
   atas form saat halaman di-scroll; margin auto tidak. */
.es-auth__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 24px 32px;
    background: var(--m-surface);
}

.es-auth__card {
    width: 100%;
    max-width: 420px;
    margin-top: auto;
}

/* Brand ringkas untuk layar kecil, saat panel kiri disembunyikan */
.es-auth__brand-mobile {
    display: none;
    margin-bottom: 26px;
    text-align: center;
}

.es-auth__logo {
    margin-bottom: 28px;
}

.es-auth__logo img {
    width: 100%;
    max-width: 180px;
    height: auto;
}

.es-auth__head {
    margin-bottom: 26px;
}

.es-auth__title {
    margin: 0 0 8px;
    color: var(--m-text);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.es-auth__desc {
    margin: 0;
    color: var(--m-text-muted);
    font-size: .88rem;
    line-height: 1.6;
}

.es-auth__desc b {
    color: var(--m-text);
    font-weight: 600;
}

/* Panel: hanya satu yang tampil, dikendalikan kelas pada #kt_login */
.es-auth__panel {
    display: none;
}

.es-auth.kt-login--signin .kt-login__signin,
.es-auth.kt-login--signup .kt-login__signup,
.es-auth.kt-login--forgot .kt-login__forgot,
.es-auth.kt-login--otp .kt-login__otp {
    display: block;
}

/* ---------- Field ---------- */

.es-auth .form-group {
    position: relative;
    margin-bottom: 18px;
}

.es-auth__label {
    display: block;
    margin-bottom: 7px;
    color: var(--m-text);
    font-size: .8rem;
    font-weight: 600;
}

.es-auth .form-control {
    height: 48px;
    margin-top: 0;
    padding: 12px 16px;
    background: #f7f8fc;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    color: var(--m-text);
    font-size: .92rem;
    text-align: left;
    transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease), background-color .15s var(--m-ease);
}

.es-auth .form-control:focus {
    background: var(--m-surface);
    border-color: var(--m-brand);
    box-shadow: 0 0 0 3px var(--m-brand-ring);
}

.es-auth .form-control::-webkit-input-placeholder {
    color: var(--m-text-faint);
}

.es-auth .form-control::-moz-placeholder {
    color: var(--m-text-faint);
    opacity: 1;
}

/* jQuery Validate menyisipkan pesan tepat setelah input */
.es-auth .invalid-feedback {
    display: block;
    margin-top: 6px;
    padding-left: 0;
    color: var(--m-danger);
    font-size: .78rem;
    font-weight: 500;
    text-align: left;
}

.es-auth .form-control.is-invalid {
    border-color: var(--m-danger);
    /* ikon peringatan bawaan Bootstrap dimatikan: field di sini pendek
       dan sebagian rata tengah, ikonnya menabrak teks */
    background-image: none;
    padding-right: 16px;
}

.es-auth .form-control.is-invalid:focus {
    border-color: var(--m-danger);
    box-shadow: 0 0 0 3px rgba(245, 87, 108, .18);
}

/* Tombol tampil/sembunyi password.
   Absolut, bukan .input-group-append, supaya sudut kanan input tetap
   membulat dan pesan validasi tetap turun ke barisnya sendiri.
   Pembungkus .es-auth__pwd melingkupi input saja (bukan seluruh
   .form-group) supaya posisinya tidak bergantung tinggi label. */
.es-auth__pwd {
    position: relative;
}

.es-auth__pwd .form-control {
    padding-right: 48px;
}

.es-auth__pwd .form-control.is-invalid {
    padding-right: 48px;
}

.es-auth__pwd-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    width: 46px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--m-text-faint);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s var(--m-ease);
}

.es-auth__pwd-toggle:hover,
.es-auth__pwd-toggle:focus {
    color: var(--m-brand);
    outline: none;
}

/* Indikator kekuatan password di form daftar */
.es-auth__meter {
    display: flex;
    gap: 5px;
    margin-top: 9px;
}

.es-auth__meter span {
    flex: 1 1 0;
    height: 4px;
    background: var(--m-border);
    border-radius: 4px;
    transition: background-color .2s var(--m-ease);
}

.es-auth__meter-text {
    margin-top: 6px;
    color: var(--m-text-muted);
    font-size: .75rem;
    font-weight: 500;
}

.es-auth__meter[data-level="1"] span:nth-child(-n+1) {
    background: var(--m-danger);
}

.es-auth__meter[data-level="2"] span:nth-child(-n+2) {
    background: var(--m-warning);
}

.es-auth__meter[data-level="3"] span:nth-child(-n+3) {
    background: var(--m-info);
}

.es-auth__meter[data-level="4"] span {
    background: var(--m-success);
}

/* ---------- Catatan keamanan di form login ---------- */

/* Menerangkan bahwa setelah password masih ada satu langkah kode OTP,
   supaya pengguna tidak mengira login-nya gagal saat panel berpindah. */
.es-auth__catatan {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 20px;
    padding: 11px 13px;
    background: #f7f8fc;
    border: 1px solid var(--m-border-soft);
    border-radius: var(--m-radius-sm);
    color: var(--m-text-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.es-auth__catatan i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--m-brand);
    font-size: .95rem;
}

/* ---------- Kode OTP ---------- */

.es-auth__otp-boxes {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.es-auth__otp-boxes input {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: 58px;
    padding: 0;
    background: #f7f8fc;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    color: var(--m-text);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease), background-color .15s var(--m-ease);
}

.es-auth__otp-boxes input:focus {
    background: var(--m-surface);
    border-color: var(--m-brand);
    box-shadow: 0 0 0 3px var(--m-brand-ring);
    outline: none;
}

/* Pesan validasi menempel pada input hidden #kode; penanda merahnya
   diteruskan ke enam kotak lewat .form-group */
.es-auth .form-group.is-invalid .es-auth__otp-boxes input {
    border-color: var(--m-danger);
}

.es-auth__resend {
    margin-top: 18px;
    color: var(--m-text-muted);
    font-size: .82rem;
}

/* ---------- Tombol & aksi ---------- */

.es-auth__actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.es-auth__actions .btn {
    flex: 1 1 auto;
    height: 48px;
    padding: 0 18px;
    border-radius: var(--m-radius-sm);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
}

.es-auth__btn-primary {
    background: linear-gradient(135deg, var(--m-brand) 0%, var(--m-brand-dark) 100%);
    border: 0;
    color: #fff;
    box-shadow: 0 8px 20px -8px var(--m-brand);
    transition: box-shadow .15s var(--m-ease), transform .15s var(--m-ease);
}

.es-auth__btn-primary:hover:not(:disabled) {
    color: #fff;
    box-shadow: 0 12px 26px -8px var(--m-brand);
    transform: translateY(-1px);
}

.es-auth__btn-primary:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

.es-auth__btn-secondary {
    background: #f2f4fa;
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    transition: background-color .15s var(--m-ease), color .15s var(--m-ease);
}

.es-auth__btn-secondary:hover {
    background: #e9ecf5;
    color: var(--m-text);
}

/* Spinner kecil di dalam tombol saat request berjalan */
.es-auth__btn-primary.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.es-auth__btn-primary.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: es-auth-spin .6s linear infinite;
}

@keyframes es-auth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Baris tautan ---------- */

.es-auth__extra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    color: var(--m-text-muted);
    font-size: .84rem;
}

.es-auth__link {
    color: var(--m-brand);
    font-weight: 600;
    transition: color .15s var(--m-ease);
}

.es-auth__link:hover,
.es-auth__link:focus {
    color: var(--m-brand-dark);
    text-decoration: none;
}

/* ---------- Blok serah terima (menu Penyerahan) ---------- */

/* Sertifikat dan alat diserahkan terpisah, jadi masing-masing berdiri sebagai
   blok sendiri supaya terlihat mana yang masih tertahan. */
.kt-serah {
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--m-border);
    border-left: 3px solid var(--m-border);
    border-radius: 6px;
}

.kt-serah--selesai {
    border-left-color: #1dc9b7;
}

.kt-serah--menunggu {
    border-left-color: #ffb822;
}

.kt-serah__kepala {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.kt-serah__kepala i {
    color: var(--m-text-muted);
    font-size: 1.1rem;
}

.kt-serah__nama {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--m-text);
}

.kt-serah__kosong {
    margin-bottom: 10px;
    color: var(--m-text-faint);
    font-size: .84rem;
}

/* Blok terakhir tidak perlu jarak bawah; alert di bawahnya sudah punya. */
.kt-serah .kt-detail__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Pengujian tidak mengembalikan contoh ujinya, jadi kartu alat ukurnya tidak
   ada. Catatan ini menggantikannya supaya jelas memang tidak ada yang hilang,
   bukan datanya yang belum dimuat. */
.kt-serah__catatan {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 6px;
    background: var(--m-body-bg);
    color: var(--m-text-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.kt-serah__catatan i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--m-text-faint);
}

/* ---------- Keterangan cakupan angka pada kartu dashboard ---------- */

/* Sebagian angka dashboard dihitung lintas tahun (tunggakan) dan sebagian
   lagi mengikuti tahun yang dipilih. Tanpa keterangan ini keduanya terbaca
   sebagai satu gambaran yang saling bertentangan. */
.kt-iconbox__cakupan {
    margin-top: 4px;
    color: var(--m-text-faint);
    font-size: .72rem;
    line-height: 1.4;
}

/* ---------- Bukti transfer (konfirmasi pembayaran) ---------- */

/* Pratinjau berkas yang baru dipilih member, sebelum dikirim. */
.kt-pratinjau-bukti {
    display: none;
    max-width: 100%;
    max-height: 220px;
    margin-top: 12px;
    border: 1px solid var(--m-border);
    border-radius: 6px;
    object-fit: contain;
}

/* Bukti yang diperiksa bendahara di dalam modal. */
.kt-bukti-besar {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 6px;
}

/* ---------- Kartu sebaris dengan tinggi sama ---------- */

/* Bootstrap sudah menyamakan tinggi kolomnya, tapi .kt-portlet di dalamnya
   hanya setinggi isinya sendiri sehingga kartu yang pendek menyisakan celah.
   Kolomnya dijadikan flex supaya portletnya ikut memanjang. */
.kt-baris-sejajar>[class*="col-"] {
    display: flex;
    flex-direction: column;
}

.kt-baris-sejajar>[class*="col-"]>.kt-portlet {
    flex: 1 1 auto;
}

/* Isi kartu yang perlu mendorong sesuatu (tombol, catatan) ke dasar kartu. */
.kt-portlet__body--tumpuk {
    display: flex;
    flex-direction: column;
}

.kt-portlet__body-dasar {
    margin-top: auto;
}

/* ---------- Kartu nominal (total invoice / tagihan) ---------- */

.kt-nominal {
    padding: 18px 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--m-brand) 0%, var(--m-brand-dark) 100%);
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 10px 24px -14px var(--m-brand);
}

.kt-nominal--lunas {
    background: linear-gradient(135deg, #1dc9b7 0%, #0f9e90 100%);
    box-shadow: 0 10px 24px -14px #0f9e90;
}

.kt-nominal--belum {
    background: linear-gradient(135deg, #fd397a 0%, #c9265b 100%);
    box-shadow: 0 10px 24px -14px #c9265b;
}

.kt-nominal__label {
    display: block;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .85;
}

.kt-nominal__angka {
    display: block;
    margin-top: 4px;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.kt-nominal__angka small {
    font-size: .95rem;
    font-weight: 500;
    opacity: .85;
}

.kt-nominal__catatan {
    display: block;
    margin-top: 8px;
    font-size: .78rem;
    line-height: 1.5;
    opacity: .85;
}

/* ---------- Kaki halaman auth ---------- */

.es-auth__foot {
    width: 100%;
    max-width: 420px;
    margin-top: 34px;
    margin-bottom: auto;
    padding-top: 20px;
    border-top: 1px solid var(--m-border-soft);
    color: var(--m-text-faint);
    font-size: .78rem;
}

/* ---------- Alert (hasil aktivasi, error reset) ---------- */

.es-auth .alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--m-radius-sm);
    font-size: .86rem;
    text-align: left;
}

.es-auth .alert-success {
    background: rgba(22, 199, 154, .10);
    border-left-color: var(--m-success);
    color: #0f7f63;
}

.es-auth .alert-danger {
    background: rgba(245, 87, 108, .10);
    border-left-color: var(--m-danger);
    color: #b8354a;
}

/* ---------- Responsif ---------- */

@media (max-width: 1199px) {
    .es-auth__aside {
        flex-basis: 40%;
    }

    .es-auth__aside-inner {
        padding: 48px 40px;
    }

    .es-auth__headline {
        font-size: 1.75rem;
    }
}

@media (max-width: 991px) {

    /* Panel brand diganti header ringkas supaya form langsung terlihat */
    .es-auth {
        display: block;
        min-height: 100vh;
    }

    .es-auth__aside {
        display: none;
    }

    .es-auth__main {
        min-height: 100vh;
        padding: 36px 20px 28px;
    }

    .es-auth__brand-mobile {
        display: block;
    }

    .es-auth__logo {
        display: none;
    }
}

@media (max-width: 575px) {
    .es-auth__main {
        padding: 28px 16px 24px;
    }

    .es-auth__title {
        font-size: 1.3rem;
    }

    .es-auth__actions {
        flex-direction: column-reverse;
    }

    .es-auth__otp-boxes {
        gap: 7px;
    }

    .es-auth__otp-boxes input {
        height: 52px;
        font-size: 1.25rem;
    }
}

/* =========================================================
 * Utility umum
 * ========================================================= */

/* Kolom angka (nominal, qty, dsb) rata kanan */
.number {
    text-align: right;
}

/* =========================================================
 * Form Pendaftaran (#form-pendaftaran / .form-pendaftaran)
 * Dipakai di view pendaftaran (frontoffice/member/admin),
 * termasuk portlet input data alat/parameter.
 * ========================================================= */

#form-pendaftaran .section-head,
.form-pendaftaran .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#form-pendaftaran .kt-section__title,
.form-pendaftaran .kt-section__title {
    margin-bottom: 0;
    font-size: 1.1rem;
}

#form-pendaftaran .kt-section,
.form-pendaftaran .kt-section {
    margin-bottom: 1.1rem;
}

#form-pendaftaran .kt-section:last-child,
.form-pendaftaran .kt-section:last-child {
    margin-bottom: 0;
}

#form-pendaftaran .form-group,
.form-pendaftaran .form-group {
    margin-bottom: .5rem;
}

/* Baris terakhir tiap section tidak perlu jarak bawah lagi */
#form-pendaftaran .kt-section>.row:last-child .form-group,
.form-pendaftaran .kt-section>.row:last-child .form-group {
    margin-bottom: 0;
}

#form-pendaftaran .col-form-label,
.form-pendaftaran .col-form-label {
    color: #6c7293;
    font-weight: 500;
}

/* Grup radio diperlakukan seperti field input biasa: kotaknya dibuat setinggi
 * .form-control dan isinya dipusatkan vertikal, supaya sejajar tengah dengan
 * .col-form-label di sebelahnya (padding label memang disetel untuk tinggi itu).
 * Margin bawah bawaan .kt-radio dinolkan karena bikin isinya turun sebelah. */
#form-pendaftaran .form-group.row .kt-radio-inline,
.form-pendaftaran .form-group.row .kt-radio-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: calc(1.5em + 1.3rem + 2px);
    margin-top: 0;
}

#form-pendaftaran .form-group.row .kt-radio-inline .kt-radio,
.form-pendaftaran .form-group.row .kt-radio-inline .kt-radio {
    margin-bottom: 0;
}

/* Bulatan radio bawaan tema dipatok top:1px sehingga duduk sedikit di atas
 * tengah teksnya. Di sini dipusatkan ke tinggi barisnya (18px / 2 = 9px). */
#form-pendaftaran .kt-radio>span,
.form-pendaftaran .kt-radio>span {
    top: 50%;
    margin-top: -9px;
}

/* Nilai yang hanya ditampilkan -- badge status, teks statis -- diperlakukan
 * sama seperti kotak radio di atas: tingginya disamakan dengan .form-control
 * dan isinya dipusatkan vertikal. Tanpa ini isinya menempel ke atas kolom,
 * sementara .col-form-label di sebelahnya sudah diberi padding untuk tinggi
 * satu field, jadi keduanya tidak sebaris. */
#form-pendaftaran .form-group.row .field-static,
.form-pendaftaran .form-group.row .field-static {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: calc(1.5em + 1.3rem + 2px);
}

#form-pendaftaran .input-group-text,
.form-pendaftaran .input-group-text {
    background-color: #f7f8fa;
    border-color: #e2e5ec;
    color: #a7abc3;
    min-width: 40px;
    justify-content: center;
}

#form-pendaftaran .form-control[readonly],
.form-pendaftaran .form-control[readonly] {
    background-color: #f7f8fa;
    color: #48465b;
    cursor: default;
}

/* Field yang boleh diubah user ditandai warna brand */
#form-pendaftaran .field-editable .form-control,
.form-pendaftaran .field-editable .form-control {
    background-color: #fff;
    border-color: #5d78ff;
}

#form-pendaftaran .field-editable .input-group-text,
.form-pendaftaran .field-editable .input-group-text {
    background-color: #edf1ff;
    border-color: #5d78ff;
    color: #5d78ff;
}

#form-pendaftaran .field-editable .form-text,
.form-pendaftaran .field-editable .form-text {
    margin-top: .3rem;
    font-size: .8rem;
}

/* Span penampung pesan validasi: tidak memakan ruang selama masih kosong,
 * baru mendorong layout ketika jQuery Validation menyisipkan pesannya. */
#form-pendaftaran .form-text:empty,
.form-pendaftaran .form-text:empty {
    display: none;
}

#form-pendaftaran .invalid-feedback,
.form-pendaftaran .invalid-feedback {
    margin-top: .2rem;
    font-size: .8rem;
}

/* ---------------------------------------------------------
 * Form detail SPK Pengujian (.form-spk-detail)
 * Kartu "Input Detail SPK" di halaman Buat/Edit SPK Pengujian.
 * --------------------------------------------------------- */

/* Blok Parameter disuntik lewat AJAX dari partial dataparameter_v yang
 * grid-nya col-lg-3 / col-lg-9. Di form dua kolom ini barisnya melebar
 * penuh, jadi lebar labelnya disamakan dengan field lain (col-lg-4 dari
 * kolom setengah = seperenam lebar penuh) supaya semua label tetap segaris. */
@media (min-width: 992px) {
    .form-spk-detail #dataParameter>.form-group>.col-form-label {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .form-spk-detail #dataParameter>.form-group>.col-lg-9 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
}

/* Daftar parameternya bisa panjang. Dikurung dalam kotak sendiri supaya
 * kelihatan sebagai satu field, dan dipecah beberapa kolom supaya ruang
 * mendatarnya terpakai -- tanpa itu satu order bisa mendorong tombol
 * simpan jauh ke bawah layar. */
.form-spk-detail .kt-checkbox-list {
    padding: .7rem .9rem;
    border: 1px solid #e2e5ec;
    border-radius: var(--m-radius-sm, 4px);
    background-color: #fff;
}

@media (min-width: 768px) {
    .form-spk-detail .kt-checkbox-list {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .form-spk-detail .kt-checkbox-list {
        column-count: 3;
    }
}

/* Satu baris checkbox tidak boleh terbelah antar kolom */
.form-spk-detail .kt-checkbox-list>.kt-checkbox {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* =========================================================
 * Dashboard / Beranda (#kt_content)
 * Dipakai di seluruh view home_v: admin, kasie, penyelia, teknisi,
 * pelaksana, kepala, bendahara, frontoffice, timteknis, dan member.
 * ========================================================= */

/* Kotak chart: canvas Chart.js butuh induk dengan tinggi pasti */
#kt_content .kt-chart-box {
    position: relative;
    width: 100%;
    height: 320px;
}

#kt_content .kt-chart-box--sm {
    height: 240px;
}

/* Judul kartu yang panjang membuat satu kotak lebih tinggi dari tetangganya
   sehingga barisnya terlihat bergerigi. Kotak dibuat setinggi kolomnya dan
   isinya ditengahkan supaya ikon seluruh kartu tetap sejajar. */
#kt_content .kt-iconbox.kt-portlet {
    height: calc(100% - 20px);
}

#kt_content .kt-iconbox.kt-portlet>.kt-portlet__body {
    display: flex;
    align-items: center;
}

#kt_content .kt-iconbox.kt-portlet>.kt-portlet__body>.kt-iconbox__body {
    width: 100%;
}

/* Kartu angka di baris paling atas dashboard. Seluruh level memakai varian
   yang sama (kt-iconbox--primary) dengan ikon flaticon, jadi ukuran ikonnya
   diseragamkan di sini dan tidak lagi ditulis inline pada tiap view.
   Bawaan Metronic merapatkan ikon ke atas karena .kt-iconbox__body hanya
   flex tanpa align-items; ikon dibuat sejajar tengah terhadap teksnya. */
#kt_content .kt-iconbox .kt-iconbox__body {
    align-items: center;
}

#kt_content .kt-iconbox .kt-iconbox__body .kt-iconbox__icon {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    padding-right: 15px;
}

#kt_content .kt-iconbox .kt-iconbox__body .kt-iconbox__icon>i {
    font-size: 2.5rem;
    line-height: 1;
}

#kt_content .kt-iconbox .kt-iconbox__body .kt-iconbox__desc {
    justify-content: center;
}

/* Baris total di kaki tabel ringkasan */
#kt_content .table tfoot th {
    background-color: #f7f8fa;
    border-top: 2px solid #ebedf2;
    color: #48465b;
    font-size: 1rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Kartu antrian: satu blok angka + label yang bisa diklik */
#kt_content .kt-antrian__item {
    display: block;
    padding: 1rem 1.25rem;
    border-radius: 4px;
    border-left: 4px solid #5d78ff;
    background-color: #f7f8fa;
    transition: background-color .2s ease;
}

#kt_content .kt-antrian__item:hover {
    background-color: #eef0f8;
    text-decoration: none;
}

#kt_content .kt-antrian__item--brand {
    border-left-color: #5d78ff;
}

#kt_content .kt-antrian__item--info {
    border-left-color: #36a3f7;
}

#kt_content .kt-antrian__item--warn {
    border-left-color: #ffb822;
}

#kt_content .kt-antrian__item--danger {
    border-left-color: #fd3995;
}

#kt_content .kt-antrian__angka {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: #48465b;
}

#kt_content .kt-antrian__label {
    display: block;
    font-size: .95rem;
    font-weight: 500;
    color: #48465b;
}

#kt_content .kt-antrian__ket {
    display: block;
    font-size: .8rem;
    color: #a7abc3;
}

/* =========================================================
 * Diskusi Hasil Pemeriksaan (.kt-diskusi)
 * Halaman Hasil dipakai teknisi dan penyelia untuk saling berbalas sampai
 * hasilnya disetujui, jadi riwayatnya ditampilkan sebagai percakapan:
 * balasan sendiri rata kanan, balasan lawan bicara rata kiri.
 * ========================================================= */

.kt-diskusi {
    display: flex;
    flex-direction: column;
    /* flex-start supaya balon menyesuaikan panjang teksnya, bukan melebar
       penuh; tanpa ini balasan lawan bicara terlihat jauh lebih lebar. */
    align-items: flex-start;
    gap: 1.25rem;
}

/* Batas tinggi supaya susunan halaman tidak ikut memanjang saat balasannya
   banyak; balasan terbaru berada di bawah dan digulir otomatis oleh skrip. */
.kt-diskusi__gulir {
    max-height: 30rem;
    overflow-y: auto;
    padding-right: .5rem;
}

.kt-diskusi__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 82%;
}

.kt-diskusi__item--saya {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.kt-diskusi__avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f0f3ff;
}

.kt-diskusi__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kt-diskusi__isi {
    min-width: 0;
    flex: 1 1 auto;
}

.kt-diskusi__kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
    font-size: .85rem;
}

.kt-diskusi__item--saya .kt-diskusi__kepala {
    justify-content: flex-end;
}

.kt-diskusi__nama {
    font-weight: 600;
    color: #48465b;
}

.kt-diskusi__waktu {
    color: #a7abc3;
}

.kt-diskusi__balon {
    padding: .85rem 1rem;
    border-radius: 8px;
    background-color: #f7f8fa;
    border: 1px solid #ebedf2;
    color: #48465b;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Balasan sendiri diberi warna merek supaya alur bolak-baliknya kebaca. */
.kt-diskusi__item--saya .kt-diskusi__balon {
    background-color: #eef1ff;
    border-color: #dde3ff;
}

/* Isi balasan datang dari editor teks, jadi jarak antar paragrafnya
   dirapikan di sini alih-alih mengandalkan gaya bawaan editor. */
.kt-diskusi__balon>*:first-child {
    margin-top: 0;
}

.kt-diskusi__balon>*:last-child {
    margin-bottom: 0;
}

.kt-diskusi__balon img {
    max-width: 100%;
    height: auto;
}

.kt-diskusi__balon table {
    width: 100%;
    max-width: 100%;
}

/* Lampiran ditempel di kaki balon sebagai satu tombol kecil. */
.kt-diskusi__lampiran {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    padding: .35rem .7rem;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #ebedf2;
    font-size: .85rem;
    color: #5d78ff;
}

.kt-diskusi__lampiran:hover {
    background-color: #f7f8fa;
    text-decoration: none;
}

.kt-diskusi__kosong {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #a7abc3;
}

.kt-diskusi__kosong i {
    display: block;
    margin-bottom: .75rem;
    font-size: 2.5rem;
    color: #d7dae7;
}

/* Kotak tulis balasan, menggantikan modal yang dulu dipakai. */
.kt-diskusi-tulis {
    padding-top: 1.25rem;
    border-top: 1px solid #ebedf2;
}

.kt-diskusi-tulis__kaki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .75rem;
}

.kt-diskusi-tulis__berkas {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: #a7abc3;
}

/* Papan status di sisi kanan: tahap hasil dari selesai sampai sertifikat. */
.kt-tahap {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-tahap__item {
    position: relative;
    padding: 0 0 1.25rem 1.75rem;
    color: #a7abc3;
    font-size: .9rem;
}

.kt-tahap__item:before {
    content: '';
    position: absolute;
    top: .25rem;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #d7dae7;
    background-color: #ffffff;
}

.kt-tahap__item:after {
    content: '';
    position: absolute;
    top: 1rem;
    left: 5px;
    width: 1px;
    height: calc(100% - 1rem);
    background-color: #ebedf2;
}

.kt-tahap__item:last-child {
    padding-bottom: 0;
}

.kt-tahap__item:last-child:after {
    display: none;
}

.kt-tahap__item--lewat {
    color: #48465b;
}

.kt-tahap__item--lewat:before {
    border-color: #34bfa3;
    background-color: #34bfa3;
}

.kt-tahap__item--kini {
    color: #48465b;
    font-weight: 600;
}

.kt-tahap__item--kini:before {
    border-color: #5d78ff;
    background-color: #5d78ff;
}

.kt-tahap__item--gagal {
    color: #48465b;
    font-weight: 600;
}

.kt-tahap__item--gagal:before {
    border-color: #fd3995;
    background-color: #fd3995;
}

/* Catatan yang ditulis teknisi waktu menyelesaikan SPK. Ditaruh utuh, bukan
   dipepetkan ke kolom kanan seperti isian lain, karena isinya kalimat. */
.kt-catatan-spk__isi {
    margin-top: .35rem;
    padding: .6rem .75rem;
    border-radius: 4px;
    background-color: #f7f8fa;
    border: 1px solid #ebedf2;
    color: #48465b;
    font-size: .9rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.kt-catatan-spk__waktu {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    color: #a7abc3;
}

@media (max-width: 768px) {
    .kt-diskusi__item {
        max-width: 100%;
    }
}

/* =========================================================
 * Badge tambahan
 * Metronic hanya menyediakan satu warna ungu untuk tombol, sedangkan tahapan
 * sertifikat butuh lima warna yang benar-benar berbeda. brand, primary, dan
 * info sama-sama biru sehingga tidak terbedakan pada ukuran badge.
 * ========================================================= */

.kt-badge.kt-badge--ungu {
    color: #ffffff;
    background: #8950fc;
}

.kt-badge.kt-badge--outline.kt-badge--ungu {
    background: transparent;
    color: #8950fc;
    border: 1px solid #8950fc;
}

/* =========================================================
 * Form dengan ikon (.kt-form-ikon)
 * Dipakai form penerbitan sertifikat: tiap isian diberi ikon di depannya
 * supaya barisnya cepat dikenali dan formnya tidak terbaca sebagai deretan
 * kotak yang seragam.
 * ========================================================= */

.kt-form-ikon .input-group-text {
    min-width: 44px;
    justify-content: center;
    background-color: #f7f8fa;
    border-color: #e2e5ec;
    color: #a7abc3;
}

.kt-form-ikon .input-group-text i {
    font-size: 1.1rem;
    line-height: 1;
}

/* select2 di dalam input-group. Bawaannya membungkus select dengan span
   selebar elemen aslinya, sehingga di dalam input-group yang memakai flex
   lebarnya menyusut dan tidak ikut memenuhi baris. */
.kt-form-ikon .input-group>.select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

.kt-form-ikon .input-group>.select2-container .select2-selection--single {
    height: calc(1.5em + 1.3rem + 2px);
    padding: .65rem 1rem;
    border: 1px solid #e2e5ec;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.kt-form-ikon .input-group>.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: #495057;
}

.kt-form-ikon .input-group>.select2-container .select2-selection--single .select2-selection__placeholder {
    color: #a7abc3;
}

.kt-form-ikon .input-group>.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: .5rem;
}

/* Isian yang gagal validasi. Semuanya memakai --m-danger, bukan warna bawaan
   Metronic, supaya garis kotak, ikon, dan tulisan pesannya semerah sama.
   Select2 punya elemen sendiri sehingga tidak ikut kena kelas is-invalid. */
.kt-form-ikon .form-group.is-invalid .select2-container--default .select2-selection--single {
    border-color: var(--m-danger) !important;
}

.kt-form-ikon .form-group.is-invalid .input-group-text {
    border-color: var(--m-danger);
    color: var(--m-danger);
}

.kt-form-ikon .invalid-feedback {
    margin-top: .35rem;
}

/* Ikon di samping textarea dirapatkan ke atas; kalau dibiarkan di tengah
   posisinya ikut turun mengikuti tinggi kotaknya. */
.kt-form-ikon .input-group-text--atas {
    align-items: flex-start;
    padding-top: .85rem;
}

.kt-form-ikon .form-group {
    margin-bottom: 1.25rem;
}

/* Judul bagian di dalam form, sebaris dengan ikonnya. */
.kt-form-ikon__bagian {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #48465b;
}

.kt-form-ikon__bagian i {
    color: #5d78ff;
}

/* Panel kanan waktu belum ada order yang dipilih. */
.kt-ringkas-kosong {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #a7abc3;
}

.kt-ringkas-kosong i {
    display: block;
    margin-bottom: .75rem;
    font-size: 2.5rem;
    color: #d7dae7;
}

/* =========================================================
 * Detail Monitoring (.detail-monitoring)
 * Daftar "label - isi" read-only di halaman detail SPK. Dulu dibuat dari
 * <table> tiga kolom (label, ":", isi) yang bikin halamannya panjang dan
 * jarang terisi; sekarang jadi grid dua kolom yang tinggi barisnya seragam.
 * ========================================================= */

.detail-monitoring .kt-section {
    margin-bottom: 1.75rem;
}

.detail-monitoring .kt-section:last-child {
    margin-bottom: 0;
}

.detail-monitoring .kt-section__title {
    margin-bottom: 0;
    font-size: 1.1rem;
}

.detail-monitoring .kt-detail__item {
    display: flex;
    align-items: baseline;
    padding: .5rem 0;
    border-bottom: 1px dashed #ebedf2;
}

/* Baris terakhir tiap kolom tidak perlu garis lagi */
.detail-monitoring .kt-detail__item:last-child {
    border-bottom: 0;
}

/* Baris tepat sebelum separator kelompok: garisnya sudah diwakili separator,
 * kalau tidak jadi dobel. */
.detail-monitoring .kt-detail__item:has(+ .kt-separator) {
    border-bottom: 0;
}

.detail-monitoring .kt-detail__label {
    flex: 0 0 30%;
    max-width: 30%;
    padding-right: 1rem;
    color: #74788d;
    font-weight: 500;
}

.detail-monitoring .kt-detail__value {
    flex: 1 1 auto;
    min-width: 0;
    color: #48465b;
    font-weight: 500;
    word-break: break-word;
}

/* Isian yang tidak diisi: tetap terbaca sebagai baris, tapi jelas kosong */
.detail-monitoring .kt-detail__value--kosong {
    color: #c3c7d8;
    font-weight: 400;
}

/* Baris daftar bernomor (mis. parameter uji): labelnya cuma angka, jadi tidak
 * perlu jatah 38% seperti label biasa. */
.detail-monitoring .kt-detail__item--list .kt-detail__label {
    flex: 0 0 2rem;
    max-width: 2rem;
    padding-right: .5rem;
    text-align: right;
}

/* Tahap timeline yang belum tercapai: masih terlihat supaya urutan prosesnya
 * kebaca, tapi diredupkan biar tidak tertukar dengan tahap yang sudah jalan. */
.kt-notes__item--nanti .kt-notes__icon i,
.kt-notes__item--nanti .kt-notes__title,
.kt-notes__item--nanti .kt-notes__desc,
.kt-notes__item--nanti .kt-notes__body {
    color: #b3b8d0;
}

.kt-notes__item--nanti .kt-notes__body {
    background-color: #fbfbfc;
}

/* =========================================================
 * Detail SPK Admin (.spk-detail)
 * Halaman admin/spk/{layanan}/editdata: form data SPK, kartu
 * ringkasan, dan tabel Data Alat / Data Sampel.
 * ========================================================= */

/* Tiga angka ringkasan di kartu kanan */
.spk-detail .spk-stat {
    display: flex;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.spk-detail .spk-stat__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
    background: #f7f8fc;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    text-align: center;
}

.spk-detail .spk-stat__value {
    display: block;
    color: var(--m-text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.spk-detail .spk-stat__label {
    display: block;
    margin-top: 2px;
    color: var(--m-text-muted);
    font-size: .72rem;
    font-weight: 500;
}

/* Riwayat status SPK. Timeline kt-notes bawaan tema terlalu tinggi untuk
 * kartu sesempit ini (110px per tahap) sehingga kartu kanan menjulang jauh
 * melewati kartu kiri; versi ini memakai titik kecil, judul dan tanggal
 * sebaris, keterangan satu baris di bawahnya. */
.spk-detail .spk-timeline__item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.spk-detail .spk-timeline__item:last-child {
    padding-bottom: 0;
}

/* Garis penyambung antar tahap, digambar dari bawah titik ke tahap berikutnya */
.spk-detail .spk-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 2px;
    left: 10px;
    width: 2px;
    background: var(--m-border);
}

.spk-detail .spk-timeline__dot {
    position: relative;
    z-index: 1;
    flex: 0 0 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m-surface);
    border: 2px solid var(--m-border);
    border-radius: 50%;
    color: var(--m-text-faint);
    font-size: .72rem;
    line-height: 1;
}

.spk-detail .spk-timeline__item--selesai .spk-timeline__dot {
    background: var(--m-success);
    border-color: var(--m-success);
    color: #fff;
}

.spk-detail .spk-timeline__body {
    flex: 1 1 auto;
    min-width: 0;
}

.spk-detail .spk-timeline__head {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
    justify-content: space-between;
}

.spk-detail .spk-timeline__title {
    color: var(--m-text);
    font-size: .86rem;
    font-weight: 600;
}

.spk-detail .spk-timeline__date {
    color: var(--m-text-muted);
    font-size: .76rem;
    font-weight: 500;
}

.spk-detail .spk-timeline__desc {
    display: block;
    margin-top: 1px;
    color: var(--m-text-muted);
    font-size: .78rem;
    line-height: 1.5;
}

/* Tahap yang belum tercapai: tetap terbaca supaya urutannya kelihatan,
 * tapi diredupkan biar tidak tertukar dengan tahap yang sudah jalan. */
.spk-detail .spk-timeline__item--nanti .spk-timeline__title,
.spk-detail .spk-timeline__item--nanti .spk-timeline__date,
.spk-detail .spk-timeline__item--nanti .spk-timeline__desc {
    color: var(--m-text-faint);
}

/* Kartu Data SPK dan Ringkasan disamakan tingginya: kolomnya sudah sama
 * tinggi karena .row itu flex, tinggal portletnya disuruh mengisi penuh. */
.spk-detail__utama>[class*="col-"] {
    display: flex;
}

.spk-detail__utama>[class*="col-"]>.kt-portlet {
    flex: 1 1 auto;
}

/* Input yang memang tidak bisa diubah (No. SPK) dibedakan dari yang bisa */
.spk-detail .form-control[readonly] {
    background: #f2f4fa;
    color: var(--m-text-muted);
    cursor: default;
}

@media (max-width: 575px) {
    .spk-detail .spk-stat {
        flex-wrap: wrap;
    }

    .spk-detail .spk-stat__item {
        flex: 1 1 45%;
    }
}
/* =========================================================
 * Lacak Order Member (.lacak-*)
 * Halaman member/monitoring/{layanan}/detail: kartu ringkasan (status
 * terkini, progres, lima fase) dan timeline tahapan dari pendaftaran sampai
 * penyerahan. State tiap tahap: selesai | aktif | nanti | gagal | batal.
 * ========================================================= */

.lacak-ringkasan .kt-portlet__body {
    padding: 22px 25px;
}

.lacak-ringkasan__atas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.lacak-ringkasan__judul {
    min-width: 0;
}

.lacak-ringkasan__label {
    display: inline-block;
    padding: 2px 10px;
    background: var(--m-brand-soft);
    border-radius: 20px;
    color: var(--m-brand);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.lacak-ringkasan__nama {
    margin: 8px 0 2px;
    color: var(--m-text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    word-break: break-word;
}

.lacak-ringkasan__sub {
    color: var(--m-text-muted);
    font-size: .85rem;
}

/* Kotak status terkini di kanan atas */
.lacak-ringkasan__status {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: #f7f8fc;
}

.lacak-ringkasan__status-ikon {
    flex: 0 0 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    font-size: 1.1rem;
}

.lacak-ringkasan__status--brand .lacak-ringkasan__status-ikon { background: var(--m-brand); }
.lacak-ringkasan__status--success .lacak-ringkasan__status-ikon { background: var(--m-success); }
.lacak-ringkasan__status--danger .lacak-ringkasan__status-ikon { background: var(--m-danger); }

.lacak-ringkasan__status-judul {
    display: block;
    color: var(--m-text);
    font-size: .95rem;
    font-weight: 700;
}

.lacak-ringkasan__status-desc {
    display: block;
    color: var(--m-text-muted);
    font-size: .76rem;
}

/* Progres keseluruhan */
.lacak-progres {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 20px 0 22px;
}

.lacak-progres__bar {
    flex: 1 1 auto;
    height: 8px;
    overflow: hidden;
    background: var(--m-border-soft);
    border-radius: 8px;
}

.lacak-progres__isi {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--m-brand), #7f8cff);
    transition: width .6s var(--m-ease);
}

.lacak-progres__isi--success { background: var(--m-success); }
.lacak-progres__isi--danger { background: var(--m-danger); }

.lacak-progres__angka {
    flex: 0 0 auto;
    min-width: 42px;
    color: var(--m-text);
    font-size: .9rem;
    font-weight: 700;
    text-align: right;
}

/* Lima fase: lingkaran disambung garis. Garis di kiri tiap fase menyala
 * kalau fase itu sudah dimulai (aktif/selesai/gagal). */
.lacak-fase {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lacak-fase__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.lacak-fase__item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 19px;
    right: calc(50% + 24px);
    left: calc(-50% + 24px);
    height: 2px;
    background: var(--m-border);
}

.lacak-fase__item--selesai:not(:first-child)::before,
.lacak-fase__item--aktif:not(:first-child)::before {
    background: var(--m-success);
}

.lacak-fase__item--gagal:not(:first-child)::before {
    background: var(--m-danger);
}

.lacak-fase__ikon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m-surface);
    border: 2px solid var(--m-border);
    border-radius: 50%;
    color: var(--m-text-faint);
    font-size: 1rem;
}

.lacak-fase__item--selesai .lacak-fase__ikon {
    background: var(--m-success);
    border-color: var(--m-success);
    color: #fff;
}

.lacak-fase__item--aktif .lacak-fase__ikon {
    border-color: var(--m-brand);
    color: var(--m-brand);
    box-shadow: 0 0 0 5px var(--m-brand-ring);
}

.lacak-fase__item--gagal .lacak-fase__ikon {
    background: var(--m-danger);
    border-color: var(--m-danger);
    color: #fff;
}

.lacak-fase__nama {
    display: block;
    margin-top: 8px;
    color: var(--m-text-muted);
    font-size: .82rem;
    font-weight: 600;
}

.lacak-fase__item--selesai .lacak-fase__nama,
.lacak-fase__item--aktif .lacak-fase__nama,
.lacak-fase__item--gagal .lacak-fase__nama {
    color: var(--m-text);
}

.lacak-fase__hitung {
    display: block;
    color: var(--m-text-faint);
    font-size: .72rem;
}

/* Timeline tahapan */
.lacak-timeline__fase {
    margin: 18px 0 10px 34px;
    color: var(--m-text-faint);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lacak-timeline__fase:first-child {
    margin-top: 0;
}

.lacak-timeline__item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

/* Garis penyambung, juga melewati judul fase di bawahnya */
.lacak-timeline__item::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: -2px;
    left: 11px;
    width: 2px;
    background: var(--m-border);
}

.lacak-timeline__item:last-child::before {
    display: none;
}

.lacak-timeline__item--selesai::before {
    background: var(--m-success);
}

.lacak-timeline__dot {
    position: relative;
    z-index: 1;
    flex: 0 0 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m-surface);
    border: 2px solid var(--m-border);
    border-radius: 50%;
    color: var(--m-text-faint);
    font-size: .7rem;
    line-height: 1;
}

.lacak-timeline__item--selesai .lacak-timeline__dot {
    background: var(--m-success);
    border-color: var(--m-success);
    color: #fff;
}

.lacak-timeline__item--aktif .lacak-timeline__dot {
    background: var(--m-brand);
    border-color: var(--m-brand);
    color: #fff;
    animation: lacak-denyut 1.8s var(--m-ease) infinite;
}

.lacak-timeline__item--gagal .lacak-timeline__dot {
    background: var(--m-danger);
    border-color: var(--m-danger);
    color: #fff;
}

@keyframes lacak-denyut {
    0% { box-shadow: 0 0 0 0 var(--m-brand-ring); }
    70% { box-shadow: 0 0 0 8px rgba(84, 104, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(84, 104, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lacak-timeline__item--aktif .lacak-timeline__dot {
        animation: none;
        box-shadow: 0 0 0 4px var(--m-brand-ring);
    }
}

.lacak-timeline__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.lacak-timeline__head {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
    justify-content: space-between;
}

.lacak-timeline__title {
    color: var(--m-text);
    font-size: .88rem;
    font-weight: 600;
}

.lacak-timeline__date {
    color: var(--m-text-muted);
    font-size: .76rem;
    font-weight: 500;
    white-space: nowrap;
}

.lacak-timeline__date--aktif {
    padding: 1px 8px;
    background: var(--m-brand-soft);
    border-radius: 20px;
    color: var(--m-brand);
    font-weight: 600;
}

.lacak-timeline__desc {
    display: block;
    margin-top: 2px;
    color: var(--m-text-muted);
    font-size: .8rem;
    line-height: 1.5;
}

/* Tahap aktif dibingkai supaya langsung ketemu di daftar panjang */
.lacak-timeline__item--aktif .lacak-timeline__body {
    margin-top: -6px;
    padding: 8px 12px;
    background: var(--m-brand-soft);
    border-radius: var(--m-radius-sm);
}

.lacak-timeline__item--gagal .lacak-timeline__title {
    color: var(--m-danger);
}

/* Belum tercapai / batal: tetap terbaca supaya urutannya kelihatan */
.lacak-timeline__item--nanti .lacak-timeline__title,
.lacak-timeline__item--nanti .lacak-timeline__desc,
.lacak-timeline__item--batal .lacak-timeline__title,
.lacak-timeline__item--batal .lacak-timeline__desc,
.lacak-timeline__item--batal .lacak-timeline__date {
    color: var(--m-text-faint);
}

.lacak-timeline__item--batal .lacak-timeline__title {
    text-decoration: line-through;
}

@media (max-width: 575px) {
    .lacak-ringkasan__status {
        width: 100%;
    }

    .lacak-fase__ikon {
        width: 32px;
        height: 32px;
        font-size: .85rem;
    }

    .lacak-fase__item:not(:first-child)::before {
        top: 15px;
        right: calc(50% + 20px);
        left: calc(-50% + 20px);
    }

    .lacak-fase__nama {
        font-size: .68rem;
    }

    .lacak-fase__hitung {
        display: none;
    }
}