/* ==========================================================================
   📄 Panduan Desain Universal — "Putih di Atas Kertas" (Paper White Design System)
   Framework: AdminLTE 3 + Bootstrap 4
   Konsep: Simpel, Klasik, Cepat, Bersih, Minimalis, Elegan
   ========================================================================== */

:root {
    --putih: #ffffff;
    --border-utama: #b8b8b8;
    --border-header-tabel: #b0b0b0;
    --border-luar-tabel: #a0a0a0;
    --border-menu: #d3d3d3;
    --border-submenu: #e0e0e0;
    --teks-utama: #333333;
    --teks-konten: #444444;
    --teks-sekunder: #666666;
    --teks-placeholder: #999999;
    --hover-tabel: #f0f7f3;
    --hover-menu: #f5f5f5;
    --aktif-bg: #e6f4ea;
    --aktif-teks: #076e34;
    --aktif-border: #0d9f4f;
    --focus-border: #0d9f4f;
    --focus-glow: rgba(13, 159, 79, 0.15);
    --brand-green: #0d9f4f;
    --brand-green-dark: #076e34;
}

/* ==========================================================================
   1. GLOBAL & BACKGROUND
   ========================================================================== */
body, .content-wrapper, .main-footer, .wrapper {
    background-color: #ffffff !important;
    color: var(--teks-konten) !important;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   2. KARTU / CARD (.card)
   ========================================================================== */
.card {
    box-shadow: none !important;
    border: 1px solid var(--border-utama) !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    margin-bottom: 1.25rem !important;
}
.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-utama) !important;
    padding: 0.75rem 1.25rem !important;
}
.card-header .card-title {
    color: var(--teks-utama) !important;
    font-weight: 600 !important;
}
.card-body {
    background-color: #ffffff !important;
}
.card-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--border-utama) !important;
}
.card-outline {
    border-top: 3px solid var(--brand-green) !important;
}
.card-outline.card-teal,
.card-outline.card-primary,
.card-outline.card-success {
    border-top: 3px solid var(--brand-green) !important;
}

/* ==========================================================================
   3. TABEL (.table & table.dataTable) — Grid Tegas seperti Excel
   ========================================================================== */
.table,
.table-excel,
table.dataTable {
    border-collapse: collapse !important;
    background-color: #ffffff !important;
    width: 100% !important;
    border: 1.5px solid var(--border-luar-tabel) !important;
    margin-bottom: 1rem !important;
}

.dataTables_wrapper {
    border: none !important;
    margin-bottom: 1rem !important;
}

.table thead th,
.table-excel thead th,
table.dataTable thead th,
table.dataTable thead td,
thead.thead-dark th,
thead.thead-light th {
    background-color: #ffffff !important;
    color: var(--teks-utama) !important;
    border: 1px solid var(--border-header-tabel) !important;
    font-weight: 600 !important;
    padding: 9px 12px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 0.92rem !important;
}

.table tbody tr td,
table.dataTable tbody tr td {
    background-color: #ffffff !important;
    border: 1px solid var(--border-utama) !important;
    padding: 8px 12px !important;
    color: var(--teks-konten) !important;
    vertical-align: middle !important;
    font-size: 0.92rem !important;
}

/* ANTI-ZEBRA: Matikan striping bawaan */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > *,
table.dataTable tbody tr.odd > *,
table.dataTable tbody tr.even > *,
table.dataTable tbody td.sorting_1 {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* HOVER: Satu-satunya penanda baris aktif */
.table tbody tr:hover td,
table.dataTable tbody tr:hover td {
    background-color: var(--hover-tabel) !important;
    transition: background-color 0.15s ease-in-out !important;
}

.table tfoot th,
.table tfoot td {
    border: 1px solid var(--border-luar-tabel) !important;
    background-color: #ffffff !important;
    color: var(--teks-utama) !important;
}

/* ==========================================================================
   4. FORM INPUT (.form-control, .custom-select, textarea)
   ========================================================================== */
.form-control, .custom-select, textarea.form-control {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    color: var(--teks-utama) !important;
    box-shadow: none !important;
}
.form-control:focus, .custom-select:focus, textarea.form-control:focus {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 0.15rem var(--focus-glow) !important;
    background-color: #ffffff !important;
}
.select2-container--bootstrap4 .select2-selection {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
}
.input-group-text {
    border: 1px solid var(--border-utama) !important;
    background-color: #f8f9fa !important;
    color: var(--teks-utama) !important;
}
label {
    color: var(--teks-utama) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   5. MODAL (.modal-content)
   ========================================================================== */
.modal-content {
    background-color: #ffffff !important;
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-utama) !important;
}
.modal-header.bg-teal,
.modal-header.bg-primary,
.modal-header.bg-success {
    background-color: #ffffff !important;
    color: var(--teks-utama) !important;
}
.modal-header .modal-title,
.modal-header.bg-teal .modal-title,
.modal-header.bg-primary .modal-title {
    font-weight: 600 !important;
    color: var(--teks-utama) !important;
}
.modal-header .close,
.modal-header.bg-teal .close {
    color: var(--teks-utama) !important;
    text-shadow: none !important;
    opacity: 0.7 !important;
}
.modal-header .close:hover {
    opacity: 1 !important;
}
.modal-body {
    background-color: #ffffff !important;
    color: var(--teks-konten) !important;
}
.modal-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--border-utama) !important;
}

/* ==========================================================================
   6. TOMBOL / BUTTON (.btn)
   ========================================================================== */
.btn {
    border-radius: 4px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-primary, .btn-teal, .btn-success {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-teal:hover, .btn-success:hover {
    background-color: var(--brand-green-dark) !important;
    border-color: var(--brand-green-dark) !important;
    color: #ffffff !important;
}
.btn-secondary {
    background-color: #f8f9fa !important;
    border: 1px solid var(--border-utama) !important;
    color: var(--teks-konten) !important;
}
.btn-secondary:hover {
    background-color: #e9ecef !important;
    border-color: #999999 !important;
    color: var(--teks-utama) !important;
}
.btn-default, .btn-light {
    background-color: #ffffff !important;
    border: 1px solid var(--border-utama) !important;
    color: var(--teks-konten) !important;
}
.btn-default:hover, .btn-light:hover {
    background-color: #f5f5f5 !important;
    border-color: #999999 !important;
}
.btn-outline-primary, .btn-outline-teal, .btn-outline-success {
    border-color: var(--brand-green) !important;
    color: var(--brand-green) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-teal:hover, .btn-outline-success:hover {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   7. SIDEBAR (Putih di Atas Kertas)
   ========================================================================== */
.main-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto !important;
    z-index: 1038;
}
.main-sidebar::-webkit-scrollbar {
    width: 5px;
}
.main-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}
.brand-link, .user-panel {
    border-bottom: 1px solid var(--border-utama) !important;
    background-color: #ffffff !important;
    color: var(--teks-utama) !important;
}
.brand-link .brand-text {
    color: var(--teks-utama) !important;
    font-weight: 700 !important;
}

/* Setiap menu berbingkai */
.nav-sidebar .nav-item .nav-link {
    border: 1px solid var(--border-menu) !important;
    border-radius: 4px !important;
    margin-bottom: 6px !important;
    background-color: #ffffff !important;
    color: var(--teks-konten) !important;
}
.nav-sidebar .nav-item .nav-link i.nav-icon {
    color: var(--teks-sekunder) !important;
}

/* Sub-menu lebih pudar */
.nav-sidebar .nav-treeview .nav-item .nav-link {
    padding-left: 2rem !important;
    border-color: var(--border-submenu) !important;
}

/* Menu aktif */
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--aktif-bg) !important;
    color: var(--aktif-teks) !important;
    border: 1px solid var(--aktif-border) !important;
    border-left: 4px solid var(--aktif-border) !important;
    font-weight: 600 !important;
}
.nav-sidebar > .nav-item > .nav-link.active i.nav-icon,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active i.nav-icon {
    color: var(--aktif-teks) !important;
}

/* Menu hover */
.nav-sidebar .nav-link:hover {
    background-color: var(--hover-menu) !important;
    border-color: var(--border-utama) !important;
    color: var(--teks-utama) !important;
}

.nav-header {
    color: var(--teks-sekunder) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    padding: 0.5rem 0.75rem 0.25rem !important;
}

/* ==========================================================================
   8. HEADER NAVBAR & FOOTER
   ========================================================================== */
.main-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--teks-utama) !important;
}
.main-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
    color: var(--teks-sekunder) !important;
}

/* ==========================================================================
   9. DASHBOARD / SMALL BOX
   ========================================================================== */
.small-box {
    background-color: #ffffff !important;
    border: 1px solid var(--border-utama) !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}
.small-box > .inner h3 {
    color: var(--teks-utama) !important;
    font-weight: 700 !important;
}
.small-box > .inner p {
    color: var(--teks-sekunder) !important;
    font-weight: 500 !important;
}
.small-box.bg-primary, .small-box.bg-success,
.small-box.bg-info, .small-box.bg-warning,
.small-box.bg-danger, .small-box.bg-teal {
    background-color: #ffffff !important;
}
.small-box > .icon i {
    color: rgba(0, 0, 0, 0.08) !important;
}
.small-box .small-box-footer {
    background-color: #f8f9fa !important;
    color: var(--teks-konten) !important;
    border-top: 1px solid var(--border-utama) !important;
    font-weight: 500 !important;
}
.small-box .small-box-footer:hover {
    background-color: #f0f7f3 !important;
    color: var(--brand-green-dark) !important;
}

/* ==========================================================================
   10. ALERTS & BADGES & UTILITIES
   ========================================================================== */
.alert-excel {
    background-color: #ffffff !important;
    border: 1px solid var(--border-utama) !important;
    color: var(--teks-utama) !important;
    border-left: 4px solid var(--brand-green) !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

.badge {
    font-weight: 600 !important;
    border-radius: 3px !important;
    padding: 0.35em 0.6em !important;
}

.list-group-item {
    background-color: #ffffff !important;
    border: 1px solid var(--border-menu) !important;
    color: var(--teks-konten) !important;
}
.list-group-item.active {
    background-color: var(--aktif-bg) !important;
    border-color: var(--aktif-border) !important;
    border-left: 4px solid var(--aktif-border) !important;
    color: var(--aktif-teks) !important;
}
.list-group-item.active * {
    color: var(--aktif-teks) !important;
}

.sticky-card {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px;
    z-index: 100;
}

/* ==========================================================================
   11. SELECT2 SEARCHABLE DROPDOWN (Paper White Theme)
   ========================================================================== */
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    font-size: 0.95rem !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.25rem) !important;
    padding-left: 0.75rem !important;
    color: var(--teks-utama) !important;
    font-weight: 500 !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--teks-placeholder) !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection--single {
    border-color: var(--focus-border) !important;
    box-shadow: 0 0 0 0.2rem var(--focus-glow) !important;
}
.select2-dropdown {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff !important;
    font-size: 0.95rem !important;
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-utama) !important;
    border-radius: 4px !important;
    padding: 0.4rem 0.6rem !important;
}
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--hover-tabel) !important;
    color: var(--brand-green-dark) !important;
    font-weight: 600 !important;
}
.select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background-color: var(--aktif-bg) !important;
    color: var(--aktif-teks) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   12. UNIVERSAL COLOR ACCENTS & BADGES (Consistent across all pages)
   ========================================================================== */
.text-teal { color: #0d9488 !important; }
.bg-teal { background-color: #0d9488 !important; color: #ffffff !important; }
.badge-teal { background-color: #0d9488 !important; color: #ffffff !important; }
.btn-teal { background-color: #0d9488 !important; border-color: #0d9488 !important; color: #ffffff !important; }
.btn-teal:hover { background-color: #0f766e !important; border-color: #0f766e !important; color: #ffffff !important; }
.btn-outline-teal { border-color: #0d9488 !important; color: #0d9488 !important; background: transparent !important; }
.btn-outline-teal:hover { background-color: #0d9488 !important; color: #ffffff !important; }

.text-purple { color: #8b5cf6 !important; }
.bg-purple { background-color: #8b5cf6 !important; color: #ffffff !important; }
.badge-purple { background-color: #8b5cf6 !important; color: #ffffff !important; }
.btn-purple { background-color: #8b5cf6 !important; border-color: #8b5cf6 !important; color: #ffffff !important; }
.btn-purple:hover { background-color: #7c3aed !important; border-color: #7c3aed !important; color: #ffffff !important; }

/* KPI Card Accent Borders */
.card-kpi-teal { border-left: 4px solid #0d9488 !important; }
.card-kpi-success { border-left: 4px solid #10b981 !important; }
.card-kpi-info { border-left: 4px solid #0284c7 !important; }
.card-kpi-warning { border-left: 4px solid #f59e0b !important; }
.card-kpi-danger { border-left: 4px solid #ef4444 !important; }
.card-kpi-purple { border-left: 4px solid #8b5cf6 !important; }

/* DataTables pagination styling */
.page-item.active .page-link {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #ffffff !important;
}
.page-link {
    color: var(--teks-konten) !important;
    border: 1px solid var(--border-utama) !important;
}
.page-link:hover {
    background-color: var(--hover-tabel) !important;
    color: var(--brand-green-dark) !important;
}

/* ==========================================================================
   13. PAGE PRELOADER - Paper White Glassmorphism Style (loading_page.md)
   ========================================================================== */
.page-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.65); /* Transparan putih */
    backdrop-filter: blur(4px); /* Efek blur kaca premium */
    -webkit-backdrop-filter: blur(4px); /* Dukungan Safari */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.page-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-spinner-wrapper {
    text-align: center;
}

.preloader-logo-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    z-index: 2;
}

.preloader-spinner {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #0d9f4f;
    border-radius: 50%;
    animation: preloader-spin 0.8s cubic-bezier(0.53, 0.21, 0.29, 0.86) infinite;
    z-index: 1;
}

.preloader-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d9f4f;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.preloader-text {
    font-size: 0.85rem;
    color: #666666;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@keyframes preloader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}