/*-------------------------------*/
/*           tabel            */
/*-------------------------------*/

main {
  flex: 1;
}




table tfoot td,
table tfoot th {
    font-weight: bold;
    color: black;
    background: skyblue;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}



h5 {
    text-align: center;
    font-size: 1.5em; /* Ukuran font header */
    font-weight: bold; /* Membuat teks lebih tebal */
    color: #007BFF; /* Warna teks biru */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan pada teks */
    letter-spacing: 1px; /* Menambah jarak antar huruf */
    text-transform: uppercase; /* Mengubah teks menjadi kapital seluruhnya */
    transition: all 0.3s ease; /* Transisi halus */
}

label {
    text-align: center;
    font-size: 0.7em; /* Ukuran font header */
    font-weight: bold; /* Membuat teks lebih tebal */
    color: #2A004E; /* Warna teks hitam */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan pada teks */
    letter-spacing: 1px; /* Menambah jarak antar huruf */
    text-transform: uppercase; /* Mengubah teks menjadi kapital seluruhnya */
    transition: all 0.3s ease; /* Transisi halus */
}

body {
    position: relative;
    zoom: 90%;
    overflow-x: hidden;
    background-color: #EFF3EA;
    font-weight: bolder; /* Membuat teks lebih tebal */
    color: #2A004E; /* Warna teks hitam */
   
}



 html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}



/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
    position: absolute;
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 220px;
}

#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #80C4E9;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-weight: bold;
      background: linear-gradient(to right, #80C4E9, #1E90FF); /* Gradient biru langit ke biru terang */
    

}

#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}

#wrapper.toggled #sidebar-wrapper {
    width: 220px;
}

#page-content-wrapper {
    width: 98%;
  
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -220px;
}

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/
.navbar {
  padding: 0;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    position: relative; 
    line-height: 20px;
    display: inline-block;
    width: 100%;
}

.sidebar-nav li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 3px;
   
    -webkit-transition: width .2s ease-in;
    -moz-transition:  width .2s ease-in;
    -ms-transition:  width .2s ease-in;
    transition: width .2s ease-in;
}

/* Warna latar untuk item pertama */
.sidebar-nav li:first-child(5n+0):before {
    background-color: #5E60CE; /* Orange pastel */
}

/* Garis samping dengan warna pastel/lembut */
.sidebar-nav li:nth-child(5n+1):before {
    background-color: #FFB347; /* Orange pastel */
}

.sidebar-nav li:nth-child(5n+2):before {
    background-color: #89CFF0; /* Biru muda (baby blue) */
}

.sidebar-nav li:nth-child(5n+3):before {
    background-color: #77DD77; /* Hijau pastel */
}

.sidebar-nav li:nth-child(5n+4):before {
    background-color: #FF6961; /* Merah salmon lembut */
}

.sidebar-nav li:nth-child(5n+5):before {
    background-color: #CBAACB; /* Ungu pastel */
}

.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
    width: 100%;
    -webkit-transition: width .2s ease-in;
    -moz-transition:  width .2s ease-in;
    -ms-transition:  width .2s ease-in;
    transition: width .2s ease-in;
}

.sidebar-nav li a {
    display: block;
    color: #333; /* Ganti dengan teks lebih gelap agar kontras */
    text-decoration: none;
    padding: 10px 15px 10px 30px; 
     
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
    text-decoration: none;
   
}

.sidebar-header {
    text-align: center;
    font-size: 20px;
    position: relative;
    width: 100%;
    display: inline-block;
}

.sidebar-brand {
    height: 65px;
    position: relative;
    background: #f3f4f7; /* Warna latar belakang lebih terang */
    background: linear-gradient(to right bottom, #80d0c7 50%, #f3f4f7 50%); /* Gradient cerah */
    padding-top: 1em;
}

.sidebar-brand a {
    color: #333; /* Teks lebih gelap */
}

.sidebar-brand a:hover {
    color: #212121; /* Warna teks lebih gelap saat hover */
    text-decoration: none;
}

.dropdown-header {
    text-align: center;
    font-size: 1em;
    color: #ab9b9b; /* Teks lebih gelap */
    background: #e0f7fa; /* Latar belakang terang biru muda */
    background: linear-gradient(to right bottom, #b2ebf2 50%, #e0f7fa 50%); /* Gradient biru terang */
}

.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: #fafafa; /* Latar belakang terang */
    box-shadow: none;
}

.dropdown-menu.show {
    top: 0;
}



/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

.hamburger {
  position: fixed;
  top: 20px;  
  z-index: 999;
  display: block;
  width: 32px;
  height: 32px;
  margin-left: 15px;
  background: transparent;
  border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
  outline: none;
}
.hamburger.is-closed:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
  position: absolute;
  left: 0;
  height: 4px;
  width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
  background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top { 
  top: 5px; 
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
  top: 50%;
  margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
  bottom: 5px;  
  -webkit-transition: all .35s ease-in-out;
}

.hamburger.is-closed:hover .hamb-top {
  top: 0;
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
  bottom: 0;
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
  background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
  top: 50%;
  margin-top: -2px;  
}
.hamburger.is-open .hamb-top { 
  -webkit-transform: rotate(45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
  -webkit-transform: rotate(-45deg);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
  content: '';
  display: block;
  width: 100px;
  font-size: 14px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
  opacity: 1;
  display: block;
  -webkit-transform: translate3d(-100px,0,0);
  -webkit-transition: all .35s ease-in-out;
}

/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(250,250,250,.8);
    z-index: 1;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8888;
  background-color: #fff;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;
}



/*tambahan */

/* Sticky header untuk tabel */
/*-------------------------------*/
/*           tabel            */
/*-------------------------------*/

/* ========================= */
/* HEADER SEMUA DATATABLE */
/* ========================= */
table.dataTable thead th,
table thead th {
    background: skyblue !important;
    color: #333 !important;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
<<<<<<< HEAD
}

/* ========================= */
/* BODY SEMUA DATATABLE */
/* ========================= */
table.dataTable tbody td,
table tbody td {
    background: #e0e0e0 !important;   /* abu-abu */
    color: #000;
    text-align: center;
    border: 1px solid #ccc;
}

/* ========================= */
/* STRIPE (opsional, biar rapi) */
/* ========================= */
table.dataTable tbody tr:nth-child(even) td {
    background: #d6d6d6 !important;
=======
}

/* ========================= */
/* BODY SEMUA DATATABLE */
/* ========================= */
table.dataTable tbody td,
table tbody td {
    background: #e0e0e0 !important;   /* abu-abu */
    color: #000;
    text-align: center;
    border: 1px solid #ccc;
}

/* ========================= */
/* STRIPE (opsional, biar rapi) */
/* ========================= */
table.dataTable tbody tr:nth-child(even) td {
    background: #d6d6d6 !important;
}

/* ========================= */
/* HOVER ROW */
/* ========================= */
table.dataTable tbody tr:hover td {
    background: #c8c8c8 !important;
>>>>>>> 1fae3e0292f2a136795373eb3aca6edb4d85b613
}

/* ========================= */
/* HOVER ROW */
/* ========================= */
table.dataTable tbody tr:hover td {
    background: #c8c8c8 !important;
}











/* tambahan */

/* Sidebar header style */
.sidebar-header {
    padding: 2px;
   
    text-align: center;
    border-bottom: 2px solid #444; /* Garis pemisah bawah */
}

/* Styling untuk brand logo */
.sidebar-logo {
    width: 90%; /* Ukuran logo */
    height: 78%; /* Menjaga proporsi bulat */
    margin-right: 1px; /* Spasi antara logo dan teks */
    margin-top: -1px; /* Pindahkan gambar logo ke atas */
    vertical-align: middle; /* Menyelaraskan logo dengan teks */
    border-radius: 3%; /* Membuat logo berbentuk bulat */
    object-fit: cover; /* Menyesuaikan gambar agar tidak terdistorsi */
}


/* Styling untuk teks brand */

/* Efek hover pada brand */
.sidebar-brand a:hover {
    color: #79aefe; /* Ganti warna teks saat hover */
    text-decoration: underline;
}

/* Untuk memperbaiki tampilan di perangkat kecil */
@media (max-width: 768px) {
    .sidebar-header {
        text-align: left;
        padding: 15px;
    }

  
}

/* Styling Mobile*/
/* Tambahkan scroll horizontal untuk tabel di layar kecil */
.table-responsive {
    overflow-x: auto;
}

/* CSS MOdal sweetallert */

 .swal2-popup.wide-popup {
       width: 80%;
  max-width: 900px;
    }


    select {
  max-width: 300px; /* Sesuaikan lebar maksimal dropdown */
  white-space: nowrap; /* Menghindari teks terpotong */
  overflow: hidden;
  text-overflow: ellipsis; /* Menampilkan '...' jika teks terlalu panjang */
}


/*===========================*/
/*      Modal Detail         */
/*===========================*/
#ModalDetail .modal-content {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
<<<<<<< HEAD
}

#ModalDetail .modal-header {
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: #fff;
    border-bottom: none;
}

#ModalDetail .modal-title {
    font-size: 1.2rem;
    font-weight: bold;
}

#ModalDetail .card {
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    background: #fafafa;
}

#ModalDetail label.small {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

#ModalDetail .form-control-plaintext {
    font-size: 0.9rem;
    background: #fff;
}

#ModalDetail .modal-footer .btn {
    min-width: 110px;
    font-weight: 500;
}

/*===========================*/
/*      Foto Zoom Modal      */
/*===========================*/
#FotoZoomModal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
}

#FotoZoomModal img {
    max-height: 120vh;
    border-radius: 10px;
    z-index: 1100;
}

#FotoZoomModal .modal-backdrop {
    z-index: 1099;
}

=======
}

#ModalDetail .modal-header {
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: #fff;
    border-bottom: none;
}

#ModalDetail .modal-title {
    font-size: 1.2rem;
    font-weight: bold;
}

#ModalDetail .card {
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    background: #fafafa;
}

#ModalDetail label.small {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

#ModalDetail .form-control-plaintext {
    font-size: 0.9rem;
    background: #fff;
}

#ModalDetail .modal-footer .btn {
    min-width: 110px;
    font-weight: 500;
}

/*===========================*/
/*      Foto Zoom Modal      */
/*===========================*/
#FotoZoomModal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
}

#FotoZoomModal img {
    max-height: 120vh;
    border-radius: 10px;
    z-index: 1100;
}

#FotoZoomModal .modal-backdrop {
    z-index: 1099;
}

>>>>>>> 1fae3e0292f2a136795373eb3aca6edb4d85b613

.fw-bold {
  font-weight: bold;
  color: black; /* override warna */
}




.main-footer {
  margin-top: auto;
  background-color: #f8f9fa; /* bg-light */
  padding: 0.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-version {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #6c757d;
}


































/* Mode Gelap */
.dark-mode {
    background-color: #1a1a1a;
    color: #f5f5f5;
}

.dark-mode .sidebar-nav  li a {
    color: #ddd;
}


.dark-mode #sidebar-wrapper {
    background: linear-gradient(to right, #2c3e50, #34495e);
}

.dark-mode .table thead th {
    background: linear-gradient(to right, #444, #555);
    color: #fff;
}

.dark-mode .table tbody {
    background: linear-gradient(to right, #333, #444);
    color: #f5f5f5;
}

.dark-mode .table td {
    background: linear-gradient(to right, #222, #333);
    color: #fff;
    border-color: #666;
}

.dark-mode .hamburger.is-closed .hamb-top,
.dark-mode .hamburger.is-closed .hamb-middle,
.dark-mode .hamburger.is-closed .hamb-bottom,
.dark-mode .hamburger.is-open .hamb-top,
.dark-mode .hamburger.is-open .hamb-middle,
.dark-mode .hamburger.is-open .hamb-bottom {
    background-color: #f5f5f5;
}


.dark-mode .table {
    background-color: #333;
    
}

/* Tambahkan jika dark mode menggunakan class .dark-mode */















/* Styling for dropdown menu */
.dark-mode .dropdown-menu {
    background-color: #333; /* Background dropdown gelap */
    color: #fff; /* Warna teks putih */
    border: 1px solid #444; /* Border dropdown */
}

/* Teks item menu dropdown */
.dark-mode .dropdown-menu li a {
    color: #fff; /* Teks item dropdown menjadi putih */
    background-color: transparent; /* Tidak ada background tambahan */
}

/* Hover pada item dropdown */
.dark-mode .dropdown-menu li a:hover {
    background-color: #444; /* Efek hover dengan latar belakang lebih terang */
}

/* Sidebar menu items (contoh untuk menu lainnya) */
.dark-mode #sidebar-wrapper .list-unstyled li a {
    color: #fff; /* Teks menu sidebar menjadi putih */
}

/* Hover pada item menu sidebar */
.dark-mode #sidebar-wrapper .list-unstyled li a:hover {
    background-color: #444; /* Efek hover lebih terang */
}



.dark-mode h4{
     background-color: #333; /* Background dropdown gelap */
    color: #fff; /* Warna teks putih */
    border: 1px solid #444; /* Border dropdown */

}


.dark-mode #filterToggle.btn-info {
    background-color: #2c3e50;
    border-color: #34495e;
    color: #ecf0f1;
}

.dark-mode .card {
    background-color: #2c2f3a;
    border: 1px solid #444;
}

.dark-mode .card-header.bg-primary {
    background-color: #34495e !important;
    color: #ecf0f1;
}

.dark-mode .form-control {
    background-color: #3b3f4a;
    border: 1px solid #555;
    color: #ecf0f1;
}

.dark-mode .form-control::placeholder {
    color: #bbb;
}

.dark-mode label {
    color: #ccc;
}

.dark-mode select.form-control option {
    background-color: #3b3f4a;
    color: #ecf0f1;
}

.dark-mode .btn-success {
    background-color: #27ae60;
    border-color: #229954;
    color: #fff;
}

.dark-mode .btn-secondary {
    background-color: #7f8c8d;
    border-color: #707b7c;
    color: #fff;
}





/* ======================= */
/*  DARK MODE - DASHBOARD */
/* ======================= */

.dark-mode tfoot.tr.td {
    background-color: #2e2e3e;
    color: #f5f5f5;
}

.dark-mode .card.shadow-lg {
    background-color: #2e2e3e;
    color: #f5f5f5;
}

.dark-mode .card-body {
    background-color: #2e2e3e;
}

.dark-mode .alert-success {
    background-color: #1e824c;
    color: #fff;
    border-color: #145a32;
}

.dark-mode .text-primary {
    color: #79aefe !important;
}

.dark-mode .text-muted {
    color: #ccc !important;
}

.dark-mode .bg-light {
    background-color: #3a3a4a !important;
    color: #f5f5f5;
}

.dark-mode .text-secondary {
    color: #bbb !important;
}

.dark-mode .badge-info {
    background-color: #3498db;
    color: #fff;
}

.dark-mode .badge-danger {
    background-color: #e74c3c;
    color: #fff;
}

.dark-mode #tanggalwaktu {
    color: #ffffff;
}


.dark-mode td[style*="background-color: #a3d2ca"] {
    background-color: #2e7d6b !important; /* TARGET */
}

.dark-mode td[style*="background-color: #ffb6b9"] {
    background-color: #b23a48 !important; /* SISA */
}

.dark-mode td[style*="background-color: #f6dfeb"] {
    background-color: #6a4c93 !important; /* RATA */
}

.dark-mode td[style*="background-color: #ffd54f"] {
    background-color: #b8860b !important; /* TOTAL */
}




/* ======================= */
/*  DARK MODE - pdf */
/* ======================= */


.dark-mode {
    background-color: #000;
    color: #fff;
}

.dark-mode .table-wrapper {
    border-color: #fff;
    background-color: #000;
}

.dark-mode .modern-table {
    background-color: #000;
    color: #fff;
}

.dark-mode .modern-table th,
.dark-mode .modern-table td {
    border-color: #fff;
    background-color: #000;
    color: #fff;
}

.dark-mode .modern-table thead th {
    background-color: #111;
    color: #fff;
}

.dark-mode .sticky-col {
    background-color: #1a1a1a !important;
    color: #fff;
    box-shadow: 2px 0 5px rgba(255, 255, 255, 0.1);
}

.dark-mode .name-click {
    background-color: #222 !important;
    color: #fff;
}

.dark-mode .selected-row td {
    background-color: #333 !important;
    color: #fff;
}




/* ======================= CHART IMPROVEMENT ======================= */
.chart-box {
    width: 80% !important;     /* perkecil sekitar 20% dari ukuran default */
    max-width: 300px;           /* batasi maksimal width supaya tidak terlalu besar */
    height: 250px !important;   /* sesuaikan tinggi chart */
    margin: 0 auto;             /* center chart */
    padding: 10px;              /* beri padding */
    background: #f9f9f9;        /* background lembut */
    border-radius: 10px;        /* rounded corner */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* shadow lembut */
}

/* Chart legend font dan padding */
.chart-box canvas {
    display: block;
    margin: 0 auto;
}

/* Table footer tetap bagus */
table tfoot td, table tfoot th {
    font-weight: bold;
    color: black;
    background: skyblue;
}

/* Optional: hover effect pada chart-box */
.chart-box:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}