/**
 * HIPJI Official System Theme Override
 * Diadaptasi dari Prototipe Sistem HIPJI (https://www.hipji.or.id/prototipe-v1-sistem-hipji/)
 *
 * CATATAN PENTING:
 * File ini meng-override Metronic 8 Demo 1 secara non-invasif.
 * Mendukung Light Mode & Dark Mode secara komprehensif.
 */

:root,
[data-bs-theme="light"] {
    /* --- Palette Prototipe HIPJI (Light Mode) --- */
    --hipji-navy: #082b57;
    --hipji-navy-deep: #051c3d;
    --hipji-blue: #1677c8;
    --hipji-teal: #16b8ad;
    --hipji-teal-dark: #087d83;
    --hipji-canvas: #f4f7fb;
    --hipji-card: #ffffff;
    --hipji-ink: #162642;
    --hipji-muted: #68778e;
    --hipji-line: #e5ebf2;
    --hipji-success: #147a5a;
    --hipji-success-bg: #e8f8f0;
    --hipji-warning: #a96605;
    --hipji-warning-bg: #fff5df;
    --hipji-danger: #b23d4b;
    --hipji-danger-bg: #fff0f2;
    --hipji-info: #166eb8;
    --hipji-info-bg: #ebf5ff;

    /* Override Bootstrap 5 & Metronic Theme Variables */
    --bs-primary: #1677c8;
    --bs-primary-rgb: 22, 119, 200;
    --bs-primary-active: #087d83;
    --bs-link-color: #1677c8;
    --bs-link-hover-color: #087d83;
    --kt-primary: #1677c8;
    --kt-primary-active: #087d83;
    --kt-primary-light: #ebf5ff;
    --kt-primary-inverse: #ffffff;
}

[data-bs-theme="dark"] {
    /* --- Palette Prototipe HIPJI (Dark Mode) --- */
    --hipji-navy: #5299e6;
    --hipji-navy-deep: #0e1d33;
    --hipji-blue: #3ea2ff;
    --hipji-teal: #25d2c6;
    --hipji-teal-dark: #16b8ad;
    --hipji-canvas: #15171c;
    --hipji-card: #1e2027;
    --hipji-ink: #f5f5f5;
    --hipji-muted: #9a9cae;
    --hipji-line: #26272f;
    --hipji-success: #20c997;
    --hipji-success-bg: rgba(32, 201, 151, 0.15);
    --hipji-warning: #f1b44c;
    --hipji-warning-bg: rgba(241, 180, 76, 0.15);
    --hipji-danger: #f8285a;
    --hipji-danger-bg: rgba(248, 40, 90, 0.15);
    --hipji-info: #3ea2ff;
    --hipji-info-bg: rgba(22, 119, 200, 0.18);

    --bs-primary: #3ea2ff;
    --bs-primary-rgb: 62, 162, 255;
    --bs-primary-active: #25d2c6;
    --bs-link-color: #3ea2ff;
    --bs-link-hover-color: #25d2c6;
    --kt-primary: #3ea2ff;
    --kt-primary-active: #25d2c6;
    --kt-primary-light: rgba(62, 162, 255, 0.15);
    --kt-primary-inverse: #ffffff;
}

/* ======================================================== */
/* 1. KANVAS & LATAR BELAKANG HALAMAN                       */
/* ======================================================== */
body,
#kt_body,
#kt_app_body,
.app-wrapper,
.app-main,
.content,
#kt_content,
#kt_app_content {
    background-color: var(--hipji-canvas) !important;
    color: var(--hipji-ink);
}

/* ======================================================== */
/* 2. SIDEBAR ASIDE (NAVIGASI UTAMA - DEMO 1 & DEMO 3)      */
/* ======================================================== */
#kt_app_sidebar,
.app-sidebar,
#kt_aside {
    background: radial-gradient(circle at 92% 5%, rgba(41, 205, 191, .28), transparent 23%),
                linear-gradient(165deg, #082b57 0%, #051c3d 100%) !important;
    border-right: 1px solid rgba(189, 224, 251, 0.12) !important;
}

/* Logo Brand Section */
.app-sidebar-logo,
#kt_app_sidebar .app-sidebar-logo,
#kt_aside .aside-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Toggle Sidebar Minimize Button (Demo 1) */
.app-sidebar-toggle {
    background-color: #082b57 !important;
    border: 1.5px solid rgba(93, 227, 216, 0.5) !important;
    color: #5de3d8 !important;
    box-shadow: 0 4px 12px rgba(5, 28, 61, 0.4) !important;
    transition: all 0.2s ease !important;
}

.app-sidebar-toggle:hover,
.app-sidebar-toggle.active {
    background-color: #1677c8 !important;
    border-color: #5de3d8 !important;
    color: #ffffff !important;
}

.app-sidebar-toggle i {
    color: #5de3d8 !important;
}

.app-sidebar-toggle:hover i,
.app-sidebar-toggle.active i {
    color: #ffffff !important;
}

/* Section Header / Heading */
.app-sidebar .menu-section,
.app-sidebar .menu-heading,
#kt_aside .menu-section {
    color: #7fa3cd !important;
    /* font-weight: 700 !important; */
    /* font-size: 0.72rem !important; */
    letter-spacing: 0.8px !important;
}

/* Menu Text & Icon */
.app-sidebar .menu-title,
.app-sidebar .menu-link,
#kt_aside .menu-title,
#kt_aside .menu-link {
    color: #bfd4ea !important;
    /* font-weight: 600; */
}

.app-sidebar .menu-icon,
.app-sidebar .menu-icon i,
#kt_aside .menu-icon,
#kt_aside .menu-icon i {
    color: #7fa3cd !important;
}

.app-sidebar .menu-arrow:after,
#kt_aside .menu-arrow:after {
    background-color: #7fa3cd !important;
}

/* Hover State */
.app-sidebar .menu-link:hover,
#kt_aside .menu-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 9px;
}

.app-sidebar .menu-link:hover .menu-icon i,
.app-sidebar .menu-link:hover .menu-title,
#kt_aside .menu-link:hover .menu-icon i,
#kt_aside .menu-link:hover .menu-title {
    color: #ffffff !important;
}

/* Active Menu Item (Gradien Khas Prototipe HIPJI) */
.app-sidebar .menu-item.here > .menu-link,
.app-sidebar .menu-item.show > .menu-link,
.app-sidebar .menu-item .menu-link.active,
.app-sidebar .menu-link.active,
#kt_aside .menu-item.here > .menu-link,
#kt_aside .menu-item .menu-link.active,
#kt_aside .menu-link.active {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(20, 127, 205, .75), rgba(37, 186, 176, .45)) !important;
    box-shadow: inset 3.5px 0 #5de3d8 !important;
    border-radius: 9px !important;
}

.app-sidebar .menu-item.here > .menu-link .menu-title,
.app-sidebar .menu-item.here > .menu-link .menu-icon i,
.app-sidebar .menu-item.show > .menu-link .menu-title,
.app-sidebar .menu-item.show > .menu-link .menu-icon i,
.app-sidebar .menu-item .menu-link.active .menu-title,
.app-sidebar .menu-item .menu-link.active .menu-icon i,
.app-sidebar .menu-link.active .menu-title,
.app-sidebar .menu-link.active .menu-icon i,
#kt_aside .menu-item.here > .menu-link .menu-title,
#kt_aside .menu-item.here > .menu-link .menu-icon i,
#kt_aside .menu-item .menu-link.active .menu-title,
#kt_aside .menu-item .menu-link.active .menu-icon i,
#kt_aside .menu-link.active .menu-title,
#kt_aside .menu-link.active .menu-icon i {
    color: #ffffff !important;
}

.app-sidebar .menu-item.here > .menu-link .menu-arrow:after,
.app-sidebar .menu-item.show > .menu-link .menu-arrow:after,
.app-sidebar .menu-item .menu-link.active .menu-arrow:after,
#kt_aside .menu-item.here > .menu-link .menu-arrow:after,
#kt_aside .menu-item .menu-link.active .menu-arrow:after {
    background-color: #5de3d8 !important;
}

/* Submenu Styling */
.app-sidebar .menu-sub,
#kt_aside .menu-sub {
    border-left: 1px solid rgba(185, 220, 249, 0.18) !important;
    margin-left: 19px !important;
    padding-left: 8px !important;
}

.app-sidebar .menu-sub .bullet-dot,
#kt_aside .menu-sub .bullet-dot {
    background-color: #7fa3cd !important;
}

.app-sidebar .menu-sub .menu-link.active .bullet-dot,
#kt_aside .menu-sub .menu-link.active .bullet-dot {
    background-color: #5de3d8 !important;
}

/* Aside Footer */
.app-sidebar-footer,
#kt_app_sidebar_footer,
#kt_aside .aside-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(5, 28, 61, 0.35) !important;
}

.app-sidebar-footer a,
#kt_aside .aside-footer a.text-gray-800 {
    color: #ffffff !important;
}

.app-sidebar-footer span.text-muted,
#kt_aside .aside-footer span.text-muted {
    color: #9ab9db !important;
}

/* ======================================================== */
/* 3. HEADER TOPBAR & NAVBAR (DEMO 1 & DEMO 3)              */
/* ======================================================== */
#kt_app_header,
.app-header,
#kt_header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--hipji-line) !important;
    box-shadow: 0 1px 4px rgba(8, 43, 87, 0.04) !important;
    min-height: 68px !important;
}

#kt_header {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

/* Dark Mode Header */
[data-bs-theme="dark"] #kt_app_header,
[data-bs-theme="dark"] .app-header {
    background: #15171c !important;
    border-bottom: 1px solid #26272f !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

#kt_app_header .page-title h1,
#kt_app_toolbar .page-title h1,
.app-toolbar .page-heading,
#kt_header .page-title h1,
.page-title h1 {
    color: var(--hipji-navy) !important;
    /* font-size: 1.35rem !important; */
    /* font-weight: 800 !important; */
    letter-spacing: -0.3px !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
}

/* Dark Mode Page Title & Heading */
[data-bs-theme="dark"] #kt_app_header .page-title h1,
[data-bs-theme="dark"] #kt_app_toolbar .page-title h1,
[data-bs-theme="dark"] .app-toolbar .page-heading,
[data-bs-theme="dark"] #kt_header .page-title h1,
[data-bs-theme="dark"] .page-title h1,
[data-bs-theme="dark"] .page-heading {
    color: #ffffff !important;
}

#kt_app_toolbar .breadcrumb,
.app-toolbar .breadcrumb,
#kt_header .breadcrumb,
.page-title .breadcrumb {
    /* font-size: 0.78rem !important; */
    color: var(--hipji-muted) !important;
    line-height: 1.2 !important;
}

#kt_app_toolbar .breadcrumb a,
.app-toolbar .breadcrumb a,
#kt_header .breadcrumb a,
.page-title .breadcrumb a {
    color: var(--hipji-muted) !important;
    text-decoration: none !important;
}

#kt_app_toolbar .breadcrumb a:hover,
.app-toolbar .breadcrumb a:hover,
#kt_header .breadcrumb a:hover,
.page-title .breadcrumb a:hover {
    color: var(--hipji-blue) !important;
}

.breadcrumb-item a {
    color: var(--hipji-muted) !important;
}

.breadcrumb-item a:hover {
    color: var(--hipji-blue) !important;
}

.breadcrumb-item.text-dark,
.breadcrumb-item.active {
    color: var(--hipji-ink) !important;
    /* font-weight: 700 !important; */
}

[data-bs-theme="dark"] #kt_app_toolbar .breadcrumb,
[data-bs-theme="dark"] .app-toolbar .breadcrumb,
[data-bs-theme="dark"] #kt_header .breadcrumb,
[data-bs-theme="dark"] .page-title .breadcrumb,
[data-bs-theme="dark"] .breadcrumb-item a {
    color: #9a9cae !important;
}

[data-bs-theme="dark"] .breadcrumb-item.text-dark,
[data-bs-theme="dark"] .breadcrumb-item.active {
    color: #f5f5f5 !important;
}

[data-bs-theme="dark"] .app-navbar .btn-custom {
    color: #9a9cae !important;
}

[data-bs-theme="dark"] .app-navbar .btn-custom:hover {
    background-color: #26272f !important;
    color: #5de3d8 !important;
}

/* ======================================================== */
/* 4. TOMBOL-TOMBOL (BUTTONS)                               */
/* ======================================================== */
/* Tombol Utama Gradien Khas HIPJI */
.btn-primary {
    background: linear-gradient(105deg, #1470c2, #16afa9) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(20, 119, 194, 0.22) !important;
    color: #ffffff !important;
    /* font-weight: 600; */
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    background: linear-gradient(105deg, #105fa7, #13948f) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(20, 119, 194, 0.32) !important;
    color: #ffffff !important;
}

/* Tombol Light Primary */
.btn-light-primary {
    background-color: var(--hipji-info-bg) !important;
    color: var(--hipji-blue) !important;
    border: 1px solid #d4e7f8 !important;
    /* font-weight: 600; */
}

.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active {
    background-color: var(--hipji-blue) !important;
    color: #ffffff !important;
    border-color: var(--hipji-blue) !important;
}

.btn-light-primary i {
    color: inherit !important;
}

[data-bs-theme="dark"] .btn-light-primary {
    background-color: rgba(62, 162, 255, 0.15) !important;
    border-color: rgba(62, 162, 255, 0.3) !important;
    color: #3ea2ff !important;
}

[data-bs-theme="dark"] .btn-light-primary:hover {
    background-color: #3ea2ff !important;
    color: #ffffff !important;
}

/* ======================================================== */
/* 5. BADGES & STATUS PILLS                                 */
/* ======================================================== */
.badge-light-primary {
    color: var(--hipji-blue) !important;
    background-color: var(--hipji-info-bg) !important;
    border: 1px solid rgba(22, 119, 200, 0.15) !important;
}

.badge-light-success {
    color: var(--hipji-success) !important;
    background-color: var(--hipji-success-bg) !important;
    border: 1px solid rgba(20, 122, 90, 0.15) !important;
}

.badge-light-warning {
    color: var(--hipji-warning) !important;
    background-color: var(--hipji-warning-bg) !important;
    border: 1px solid rgba(169, 102, 5, 0.15) !important;
}

.badge-light-danger {
    color: var(--hipji-danger) !important;
    background-color: var(--hipji-danger-bg) !important;
    border: 1px solid rgba(178, 61, 75, 0.15) !important;
}

.badge-primary {
    background-color: var(--hipji-blue) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .badge-light-primary {
    color: #5de3d8 !important;
    background-color: rgba(22, 184, 173, 0.15) !important;
    border-color: rgba(93, 227, 216, 0.3) !important;
}

[data-bs-theme="dark"] .badge-light-primary i {
    color: #5de3d8 !important;
}

/* ======================================================== */
/* 6. KARTU (CARDS) & TABEL (TABLES)                        */
/* ======================================================== */
.card {
    border: 1px solid var(--hipji-line) !important;
    box-shadow: 0 6px 24px rgba(15, 47, 91, 0.04) !important;
    border-radius: 14px !important;
    background-color: var(--hipji-card) !important;
}

.card-header {
    border-bottom: 1px solid var(--hipji-line) !important;
}

[data-bs-theme="dark"] .card {
    border-color: #26272f !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .card-header {
    border-bottom-color: #26272f !important;
}

/* Metric / Stat Card Highlights (Light & Dark Mode) */
.card.bg-light-primary {
    background-color: #ebf5ff !important;
    border-color: #d0e5fb !important;
}
.card.bg-light-info {
    background-color: #ebf5ff !important;
    border-color: #d0e5fb !important;
}
.card.bg-light-success {
    background-color: #e8f8f0 !important;
    border-color: #c9eedb !important;
}
.card.bg-light-warning {
    background-color: #fff8eb !important;
    border-color: #fae4be !important;
}
.card.bg-light-danger {
    background-color: #fff0f2 !important;
    border-color: #fcd1d7 !important;
}
.card.bg-light-dark {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .card.bg-light-primary {
    background-color: #13233a !important;
    border-color: #1a3e6a !important;
}
[data-bs-theme="dark"] .card.bg-light-info {
    background-color: #122742 !important;
    border-color: #194371 !important;
}
[data-bs-theme="dark"] .card.bg-light-success {
    background-color: #0f2a20 !important;
    border-color: #16543d !important;
}
[data-bs-theme="dark"] .card.bg-light-warning {
    background-color: #2d230d !important;
    border-color: #5e4514 !important;
}
[data-bs-theme="dark"] .card.bg-light-danger {
    background-color: #2b1419 !important;
    border-color: #5a1f2b !important;
}
[data-bs-theme="dark"] .card.bg-light-dark {
    background-color: #1a1d24 !important;
    border-color: #26272f !important;
}

/* General bg-light-* in Dark Mode */
[data-bs-theme="dark"] .bg-light-primary {
    background-color: rgba(62, 162, 255, 0.12) !important;
}
[data-bs-theme="dark"] .bg-light-info {
    background-color: rgba(62, 162, 255, 0.12) !important;
}
[data-bs-theme="dark"] .bg-light-success {
    background-color: rgba(32, 201, 151, 0.12) !important;
}
[data-bs-theme="dark"] .bg-light-warning {
    background-color: rgba(241, 180, 76, 0.12) !important;
}
[data-bs-theme="dark"] .bg-light-danger {
    background-color: rgba(248, 40, 90, 0.12) !important;
}
[data-bs-theme="dark"] .bg-light-dark {
    background-color: #232730 !important;
}
[data-bs-theme="dark"] .bg-light {
    background-color: #262a34 !important;
}

/* Alerts in Dark Mode */
[data-bs-theme="dark"] .alert-primary {
    background-color: rgba(62, 162, 255, 0.12) !important;
    border-color: rgba(62, 162, 255, 0.3) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(241, 180, 76, 0.12) !important;
    border-color: rgba(241, 180, 76, 0.3) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(248, 40, 90, 0.12) !important;
    border-color: rgba(248, 40, 90, 0.3) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(32, 201, 151, 0.12) !important;
    border-color: rgba(32, 201, 151, 0.3) !important;
    color: #ffffff !important;
}

/* Kontras teks di dalam Dark Mode */
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-label,
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .card .text-dark {
    color: #ffffff !important;
}
[data-bs-theme="dark"] .text-gray-800,
[data-bs-theme="dark"] .card .text-gray-800 {
    color: #f5f5f5 !important;
}
[data-bs-theme="dark"] .text-gray-700,
[data-bs-theme="dark"] .card .text-gray-700 {
    color: #dbdfe9 !important;
}
[data-bs-theme="dark"] .text-gray-600,
[data-bs-theme="dark"] .card .text-gray-600 {
    color: #9a9cae !important;
}
[data-bs-theme="dark"] .text-gray-400,
[data-bs-theme="dark"] .card .text-gray-400 {
    color: #636674 !important;
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .card .text-muted {
    color: #9a9cae !important;
}

/* Tabel Styling */
.table th {
    background-color: #f8fafc !important;
    color: #607189 !important;
    /* font-weight: 750 !important; */
    /* font-size: 0.78rem !important; */
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--hipji-line) !important;
}

.table td {
    border-bottom: 1px solid #eef3f8 !important;
    color: #334764 !important;
}

[data-bs-theme="dark"] .table th {
    background-color: #171920 !important;
    color: #9ab9db !important;
    border-bottom: 1px solid #26272f !important;
}

[data-bs-theme="dark"] .table td {
    border-bottom: 1px solid #26272f !important;
    color: #dbdfe9 !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: #dbdfe9 !important;
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

/* ======================================================== */
/* 7. FORM KONTROL & CHECKBOX / RADIO                       */
/* ======================================================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--hipji-blue) !important;
    box-shadow: 0 0 0 0.25rem rgba(22, 119, 200, 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--hipji-blue) !important;
    border-color: var(--hipji-blue) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #15171c !important;
    border-color: #2b2f3a !important;
    color: #f5f5f5 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #15171c !important;
    border-color: var(--hipji-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(22, 119, 200, 0.25) !important;
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #1e2027 !important;
    border-color: #2b2f3a !important;
    color: #9a9cae !important;
}

/* ======================================================== */
/* 8. PAGINASI & ACTIVE ITEMS                               */
/* ======================================================== */
.page-item.active .page-link {
    background: linear-gradient(105deg, #1470c2, #16afa9) !important;
    border-color: #1470c2 !important;
    color: #ffffff !important;
}

.page-link:hover {
    color: var(--hipji-blue) !important;
}

/* Metronic Text Color Overrides */
.text-primary {
    color: var(--hipji-blue) !important;
}

a.text-primary:hover,
.text-hover-primary:hover {
    color: var(--hipji-teal-dark) !important;
}

a.link-primary {
    color: var(--hipji-blue) !important;
    /* font-weight: 600; */
}

a.link-primary:hover {
    color: var(--hipji-teal-dark) !important;
}

/* ======================================================== */
/* 9. MODAL, DROPDOWN & FOOTER DARK MODE                    */
/* ======================================================== */
[data-bs-theme="dark"] .menu-sub-dropdown {
    background-color: #1e2027 !important;
    border: 1px solid #26272f !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #1e2027 !important;
    border: 1px solid #26272f !important;
    color: #f5f5f5 !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: #26272f !important;
}

[data-bs-theme="dark"] .separator {
    border-bottom-color: #26272f !important;
}

[data-bs-theme="dark"] #kt_app_footer,
[data-bs-theme="dark"] .app-footer,
[data-bs-theme="dark"] #kt_footer {
    background-color: #15171c !important;
    border-top: 1px solid #26272f !important;
}

[data-bs-theme="dark"] #kt_app_footer a,
[data-bs-theme="dark"] .app-footer a,
[data-bs-theme="dark"] #kt_footer a {
    color: #9a9cae !important;
}

[data-bs-theme="dark"] #kt_app_footer a:hover,
[data-bs-theme="dark"] .app-footer a:hover,
[data-bs-theme="dark"] #kt_footer a:hover {
    color: #5de3d8 !important;
}

/* ======================================================== */
/* 10. REGISTRASI MULTI-STEP USER & ASIDE OTENTIKASI        */
/* ======================================================== */
.hipji-register-aside {
    background: radial-gradient(circle at 90% 8%, rgba(22, 184, 173, 0.32), transparent 32%),
                radial-gradient(circle at 12% 88%, rgba(20, 119, 194, 0.32), transparent 38%),
                linear-gradient(165deg, #082b57 0%, #051c3d 100%) !important;
    border-right: 1px solid rgba(189, 224, 251, 0.12) !important;
}

.hipji-register-aside .logo {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.hipji-register-aside .stepper-item.current .stepper-icon {
    background: linear-gradient(135deg, #1470c2, #16afa9) !important;
    border: 1.5px solid rgba(93, 227, 216, 0.8) !important;
    box-shadow: 0 4px 18px rgba(22, 184, 173, 0.45) !important;
    color: #ffffff !important;
}

.hipji-register-aside .stepper-item.current .stepper-icon .stepper-number {
    color: #ffffff !important;
    /* font-weight: 700 !important; */
}

.hipji-register-aside .stepper-item.current .stepper-label .stepper-title,
#kt_create_account_stepper .hipji-register-aside .stepper-item.current .stepper-label .stepper-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.hipji-register-aside .stepper-item.current .stepper-label .stepper-desc,
#kt_create_account_stepper .hipji-register-aside .stepper-item.current .stepper-label .stepper-desc {
    color: #5de3d8 !important;
    font-weight: 500 !important;
}

.hipji-register-aside .stepper-item.completed .stepper-icon {
    background-color: rgba(22, 184, 173, 0.22) !important;
    border: 1.5px solid #16b8ad !important;
    color: #5de3d8 !important;
}

.hipji-register-aside .stepper-item.completed .stepper-icon .stepper-check {
    color: #5de3d8 !important;
}

.hipji-register-aside .stepper-item.completed .stepper-label .stepper-title {
    color: #ffffff !important;
    /* font-weight: 600 !important; */
}

.hipji-register-aside .stepper-item.completed .stepper-label .stepper-desc {
    color: #9ab9db !important;
}

.hipji-register-aside .stepper-item:not(.current):not(.completed) .stepper-icon {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(189, 224, 251, 0.22) !important;
    color: #8faecf !important;
    transition: all 0.2s ease;
}

.hipji-register-aside .stepper-item:not(.current):not(.completed) .stepper-icon .stepper-number {
    color: #8faecf !important;
}

.hipji-register-aside .stepper-item:not(.current):not(.completed) .stepper-label .stepper-title {
    color: #bfd4ea !important;
}

.hipji-register-aside .stepper-item:not(.current):not(.completed) .stepper-label .stepper-desc {
    color: #6d8ba8 !important;
}

.hipji-register-aside .stepper-line {
    border-left: 2px dashed rgba(189, 224, 251, 0.22) !important;
}

.hipji-register-aside .stepper-item.completed .stepper-line {
    border-left: 2px dashed rgba(22, 184, 173, 0.5) !important;
}

.hipji-register-aside a.text-white {
    color: #9ab9db !important;
    transition: color 0.2s ease;
}

.hipji-register-aside a.text-white:hover {
    color: #5de3d8 !important;
}

/* ======================================================== */
/* 11. STEPPER HORIZONTAL / IN-PAGE & FORM SELEKSI         */
/* ======================================================== */
.stepper.stepper-pills:not(#kt_create_account_stepper) .stepper-item.current .stepper-icon {
    background: linear-gradient(135deg, #1470c2, #16afa9) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(20, 119, 194, 0.28) !important;
    border: none !important;
}

.stepper.stepper-pills:not(#kt_create_account_stepper) .stepper-item.current .stepper-icon .stepper-number {
    color: #ffffff !important;
}

.stepper.stepper-pills:not(#kt_create_account_stepper) .stepper-item.current .stepper-label .stepper-title {
    color: var(--hipji-navy) !important;
    /* font-weight: 700 !important; */
}

.stepper.stepper-pills:not(#kt_create_account_stepper) .stepper-item.current .stepper-label .stepper-desc {
    color: var(--hipji-teal-dark) !important;
    /* font-weight: 500 !important; */
}

.stepper.stepper-pills:not(#kt_create_account_stepper) .stepper-item.completed .stepper-icon {
    background-color: var(--hipji-success-bg) !important;
    border: 1.5px solid var(--hipji-teal) !important;
    color: var(--hipji-teal-dark) !important;
}

.stepper.stepper-pills:not(#kt_create_account_stepper) .stepper-item.completed .stepper-icon .stepper-check {
    color: var(--hipji-teal-dark) !important;
}

/* Kartu Seleksi Radio (Individu vs Institusi) */
.btn-check:checked + .btn.btn-active-light-primary,
.btn-check:checked + .btn.btn-outline-dashed.btn-active-light-primary {
    border-color: var(--hipji-blue) !important;
    background-color: rgba(20, 119, 194, 0.05) !important;
}

.btn-check:checked + .btn.btn-outline-dashed.btn-active-light-primary i.text-primary {
    color: var(--hipji-blue) !important;
}

[data-bs-theme="dark"] .btn-check:checked + .btn.btn-outline-dashed.btn-active-light-primary {
    border-color: #3ea2ff !important;
    background-color: rgba(62, 162, 255, 0.1) !important;
}

/* Password Meter Highlight Bar */
[data-kt-password-meter="true"] .bg-active-success.active {
    background-color: var(--hipji-teal) !important;
}

/* ======================================================== */
/* 8. METRONIC 8 DATATABLES STYLING (LIGHT & DARK MODE)     */
/* ======================================================== */

/* Container and layout spacing */
.dt-container,
.dataTables_wrapper {
    position: relative;
    clear: both;
}

.dt-container > .row,
.dataTables_wrapper > .row {
    align-items: center;
}

.dt-container > .row:first-child,
.dataTables_wrapper > .row:first-child,
div.dt-layout-row:first-child {
    margin-bottom: 1.25rem !important;
}

.dt-container > .row:last-child,
.dataTables_wrapper > .row:last-child,
div.dt-layout-row:last-child {
    margin-top: 1.25rem !important;
}

/* 1. Length Dropdown (Show entries) */
.dt-container .dt-length,
.dataTables_wrapper .dataTables_length {
    display: inline-flex;
    align-items: center;
}

.dt-container .dt-length label,
.dataTables_wrapper .dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem;
    /* font-size: 0.925rem !important; */
    /* font-weight: 500 !important; */
    color: #5e6278 !important;
    margin-bottom: 0 !important;
}

.dt-container .dt-length select,
.dataTables_wrapper .dataTables_length select,
.dt-container select.dt-input {
    display: inline-block !important;
    width: auto !important;
    min-width: 75px !important;
    height: 40px !important;
    padding: 0.35rem 2.25rem 0.35rem 0.85rem !important;
    /* font-size: 0.925rem !important; */
    /* font-weight: 500 !important; */
    line-height: 1.5 !important;
    color: #181c32 !important;
    background-color: #f5f8fa !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 0.475rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 11px 9px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.dt-container .dt-length select:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dt-container select.dt-input:focus {
    border-color: #009ef7 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15) !important;
}

/* 2. Search Box */
.dt-container .dt-search,
.dataTables_wrapper .dataTables_filter {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.dt-container .dt-search label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem;
    /* font-size: 0.925rem !important; */
    /* font-weight: 500 !important; */
    color: #5e6278 !important;
    margin-bottom: 0 !important;
}

.dt-container .dt-search input,
.dataTables_wrapper .dataTables_filter input,
.dt-container input[type="search"],
.dataTables_wrapper input[type="search"],
.dt-container .dt-input[type="search"] {
    display: inline-block !important;
    width: 250px !important;
    height: 40px !important;
    padding: 0.45rem 1rem 0.45rem 2.4rem !important;
    /* font-size: 0.925rem !important; */
    /* font-weight: 500 !important; */
    line-height: 1.5 !important;
    color: #181c32 !important;
    background-color: #f5f8fa !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 0.475rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M21.7 18.9L18.6 15.8C17.9 16.9 16.9 17.8 15.8 18.5L18.9 21.6C19.3 22 19.9 22.2 20.3 22.2C20.7 22.2 21.3 22 21.7 21.6C22.5 20.8 22.5 19.7 21.7 18.9Z' fill='%2378829D'/%3e%3cpath opacity='0.3' d='M11 20C6 20 2 16 2 11C2 6 6 2 11 2C16 2 20 6 20 11C20 16 16 20 11 20ZM11 4C7.1 4 4 7.1 4 11C4 14.9 7.1 18 11 18C14.9 18 18 14.9 18 11C18 7.1 14.9 4 11 4Z' fill='%2378829D'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.85rem center !important;
    background-size: 16px 16px !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

.dt-container .dt-search input:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dt-container input[type="search"]:focus,
.dataTables_wrapper input[type="search"]:focus {
    background-color: #ffffff !important;
    border-color: #009ef7 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15) !important;
}

/* 3. Table Header & Sorting */
table.dataTable thead th {
    /* font-size: 0.78rem !important; */
    /* font-weight: 700 !important; */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #7e8299 !important;
    border-bottom: 1px dashed #e4e6ef !important;
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    background-color: transparent !important;
    position: relative !important;
}

/* Hide clunky text arrows from DataTables 2 span.dt-column-order */
table.dataTable thead span.dt-column-order,
table.dataTable thead span.dt-column-order:before,
table.dataTable thead span.dt-column-order:after {
    display: none !important;
    content: "" !important;
    opacity: 0 !important;
}

/* Clean sorting icon for orderable columns */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer !important;
    padding-right: 1.85rem !important;
}

table.dataTable thead th.dt-orderable-asc:after,
table.dataTable thead th.dt-orderable-desc:after,
table.dataTable thead th.sorting:after {
    content: "" !important;
    position: absolute !important;
    right: 0.65rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    display: inline-block !important;
    opacity: 0.3 !important;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M8 2l4 5H4l4-5zm0 12l-4-5h8l-4 5z'/%3e") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M8 2l4 5H4l4-5zm0 12l-4-5h8l-4 5z'/%3e") !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    -webkit-mask-position: center !important;
    background-color: #7e8299 !important;
}

table.dataTable thead th.dt-ordering-asc:after,
table.dataTable thead th.sorting_asc:after {
    opacity: 1 !important;
    background-color: var(--bs-primary) !important;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M8 4l5 6H3l5-6z'/%3e") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M8 4l5 6H3l5-6z'/%3e") !important;
}

table.dataTable thead th.dt-ordering-desc:after,
table.dataTable thead th.sorting_desc:after {
    opacity: 1 !important;
    background-color: var(--bs-primary) !important;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M8 12l-5-6h10l-5 6z'/%3e") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M8 12l-5-6h10l-5 6z'/%3e") !important;
}

/* Disable sorting indicators on number, checkbox, and action columns */
table.dataTable thead th.w-10px:after,
table.dataTable thead th.w-20px:after,
table.dataTable thead th.w-25px:after,
table.dataTable thead th.w-50px:after,
table.dataTable thead th.no-sort:after {
    display: none !important;
}
table.dataTable thead th.w-10px,
table.dataTable thead th.w-20px,
table.dataTable thead th.w-25px,
table.dataTable thead th.w-50px,
table.dataTable thead th.no-sort {
    cursor: default !important;
    padding-right: 0.5rem !important;
}

/* 4. Table Body */
table.dataTable tbody tr td {
    padding: 1rem !important;
    vertical-align: middle !important;
    border-bottom: 1px dashed #e4e6ef !important;
    /* font-size: 0.925rem !important; */
    color: #3f4254 !important;
    background-color: transparent !important;
}

table.dataTable tbody tr:hover td {
    background-color: #f9f9fc !important;
}

/* 5. Info Text */
.dt-container .dt-info,
.dataTables_wrapper .dataTables_info {
    /* font-size: 0.925rem !important; */
    /* font-weight: 500 !important; */
    color: #7e8299 !important;
    padding: 0.5rem 0 !important;
}

/* 6. Pagination Controls */
.dt-container .dt-paging,
.dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    padding: 0.5rem 0 !important;
}

.dt-container .dt-paging nav,
.dataTables_wrapper .dataTables_paginate span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.dt-container .dt-paging button.dt-paging-button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 0.65rem !important;
    border-radius: 0.475rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* font-size: 0.875rem !important; */
    /* font-weight: 600 !important; */
    line-height: 1 !important;
    border: 1px solid transparent !important;
    background: #f5f8fa !important;
    color: #5e6278 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.dt-container .dt-paging button.dt-paging-button:hover:not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: #eef3f7 !important;
    color: #009ef7 !important;
}

.dt-container .dt-paging button.dt-paging-button.current,
.dt-container .dt-paging button.dt-paging-button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
    background: #009ef7 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 158, 247, 0.3) !important;
}

.dt-container .dt-paging button.dt-paging-button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: transparent !important;
}

/* ======================================================== */
/* DATATABLES DARK MODE OVERRIDES                           */
/* ======================================================== */
[data-bs-theme="dark"] table.dataTable thead th {
    border-bottom-color: #2b2b40 !important;
    color: #92929f !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] table.dataTable thead th.dt-orderable-asc:after,
[data-bs-theme="dark"] table.dataTable thead th.dt-orderable-desc:after,
[data-bs-theme="dark"] table.dataTable thead th.sorting:after {
    background-color: #92929f !important;
}

[data-bs-theme="dark"] table.dataTable tbody tr td {
    border-bottom-color: #2b2b40 !important;
    color: #cdcdde !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] table.dataTable tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .dt-container .dt-search input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dt-container input[type="search"],
[data-bs-theme="dark"] .dataTables_wrapper input[type="search"],
[data-bs-theme="dark"] .dt-container .dt-input[type="search"] {
    background-color: #1b1b29 !important;
    color: #cdcdde !important;
    border-color: #2b2b40 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M21.7 18.9L18.6 15.8C17.9 16.9 16.9 17.8 15.8 18.5L18.9 21.6C19.3 22 19.9 22.2 20.3 22.2C20.7 22.2 21.3 22 21.7 21.6C22.5 20.8 22.5 19.7 21.7 18.9Z' fill='%2392929F'/%3e%3cpath opacity='0.3' d='M11 20C6 20 2 16 2 11C2 6 6 2 11 2C16 2 20 6 20 11C20 16 16 20 11 20ZM11 4C7.1 4 4 7.1 4 11C4 14.9 7.1 18 11 18C14.9 18 18 14.9 18 11C18 7.1 14.9 4 11 4Z' fill='%2392929F'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] .dt-container .dt-search input:focus,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
    background-color: #1e1e2d !important;
    border-color: #009ef7 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.2) !important;
}

[data-bs-theme="dark"] .dt-container .dt-length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dt-container select.dt-input {
    background-color: #1b1b29 !important;
    color: #cdcdde !important;
    border-color: #2b2b40 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2392929f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] .dt-container .dt-length select:focus,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select:focus {
    background-color: #1e1e2d !important;
    border-color: #009ef7 !important;
}

[data-bs-theme="dark"] .dt-container .dt-length label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-bs-theme="dark"] .dt-container .dt-search label,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-bs-theme="dark"] .dt-container .dt-info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: #92929f !important;
}

[data-bs-theme="dark"] .dt-container .dt-paging button.dt-paging-button,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1b1b29 !important;
    color: #a1a5b7 !important;
}

[data-bs-theme="dark"] .dt-container .dt-paging button.dt-paging-button:hover:not(.disabled),
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: #2b2b40 !important;
    color: #009ef7 !important;
}

[data-bs-theme="dark"] .dt-container .dt-paging button.dt-paging-button.current,
[data-bs-theme="dark"] .dt-container .dt-paging button.dt-paging-button.active,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.active {
    background: #009ef7 !important;
    color: #ffffff !important;
}


/* ======================================================== */
/* 9. AUTH SPLIT ASIDE (METRONIC 8 DEMO 1 SPLIT AUTH)       */
/* ======================================================== */
.hipji-auth-aside {
    background: radial-gradient(circle at 92% 5%, rgba(41, 205, 191, .28), transparent 30%), 
                linear-gradient(165deg, #082b57 0%, #051c3d 100%) !important;
}

[data-bs-theme="dark"] .hipji-auth-aside {
    background: radial-gradient(circle at 92% 5%, rgba(41, 205, 191, .18), transparent 30%), 
                linear-gradient(165deg, #051833 0%, #030d1c 100%) !important;
}