/* ===============================
   BODY TABLE CONTAINER
================================ */
.dataTables_wrapper {
    background:#f5f6f8;
    padding:0px;
    border-radius:14px;
    box-shadow:
       0 8px 20px rgba(0,0,0,.08);

    font-size:12px;
}

/* ===============================
   TABLE CARD
================================ */
 
/* ===============================
   HEADER ELEGAN ABU TIMBUL
================================ */
/* ===============================
   HEADER TEGAS PREMIUM
================================ */
 
/* sudut header */
 
dataTables_scrollBody {
    background:#ffffff;
    border-radius:0 0 14px 14px;
}
/* ===============================
  SEARCH BOX
================================ */
.dataTables_filter input {
    background:#ffffff;
    border:
   1px solid #cfd5dc;
    border-radius:25px;
    height:32px;
    padding-left:15px;
    font-size:12px;
    box-shadow:
       inset 0 2px 5px rgba(0,0,0,.08);
}
.dataTables_filter input:focus {
    border-color:#8993a4;
    box-shadow:
    0 0 0 3px rgba(120,130,145,.15);
}

/* ===============================
   PAGINATION
=============================== */
.dataTables_paginate .page-link {
    color:#4b5563 !important;
    background:#ffffff;
    border:0px solid #d1d5db;
    font-size:11px;
}
.dataTables_paginate .active .page-link {
    background:#6b7280 !important;
    border-color:#6b7280 !important;
    color:#ffffff !important;
}

/* ===============================
   EXPORT BUTTON
================================ */
 

.dt-buttons .btn:hover {
    background:#4b5563;
}
/* ===============================
   INFO TEXT
================================ */
.dataTables_info {
    color:#6b7280;
    font-size:12px;
}
.dataTables_filter {
    margin-bottom:8px;
    margin-left:8px;
}
.dataTables_filter label {
    margin-bottom:0;
}
.dt-buttons {
   display:flex;
    gap:5px;
}
.dt-buttons .btn {
    background:#0d6efd !important;
    border-color:#0d6efd !important;
    color:white !important;
    font-size:12px;
    padding:5px 12px;
    border-radius:6px;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{
    background-position: right 8px center !important;
    background-size: 14px !important;
}
#grid thead th:hover{
    background: linear-gradient(
        to bottom,
        #d1d5db 0%,
        #9ca3af 35%,
        #6b7280 70%,
        #4b5563 100%
    ) !important;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.7),
        inset 0 -2px 0 rgba(0,0,0,.18),
        0 6px 14px rgba(0,0,0,.25);
}





/* ===============================
Loader Spiner
================================ */

.kontainer-scroll::-webkit-scrollbar {
  width: 10px;
}

/* Latar belakang jalur scrollbar */
.kontainer-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Pegangan scroll dengan warna biru gradien */
.kontainer-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #0A192F, #020C1B);
  border-radius: 9px;
  border:white 1px solid;
}

/* Untuk elemen tertentu */
. {
  scrollbar-color:  #D5D9F7 white; /* Thumb: hotpink, Track: blue */
  scrollbar-width:10px  blue !important; /* Membuat scrollbar lebih tipis */
  color:#D5D9F7
}
  
/*=============================================================================
Class data table 
=================================================================================================*/
.table-header th{
    color:#fff !important;
    background:linear-gradient(180deg,#8A9097 0%,#5E666E 100%);
    border:1px solid #4E555B;
    font-size:11px;
    font-weight:700;
    text-align:center;
    padding:8px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 2px 4px rgba(0,0,0,.15);
}
 
.table-header td{font-size:12.2px;color:#2A3F54;font-weight:350 !important;padding-bottom:2px;padding:5px 5px 5px 5px;font-size:11px!important;}
 .table-header{width:100%;}
thead th:last-child{
    border-right:none;
}
/* Border */
.table-bordered{
    border:1px solid #cfd6dc;
}
.table-bordered th,
.table-bordered td{
    border:1px solid #d6dbe0;
}

/* Zebra */
.table-striped tbody tr:nth-child(odd){
    background:#f8f9fa;
}
.table-striped tbody tr:nth-child(even){
    background:#ffffff;
}
/* Hover */
.table-hover tbody tr:hover{
    background:#dceeff !important;
    transition:.2s;
}
/* Agar td mengikuti warna tr */
.table-striped tbody tr:nth-child(odd) td{
    background:#f8f9fa;
}
.table-striped tbody tr:nth-child(even) td{
    background:#ffffff;
}
.table-hover tbody tr:hover td{
    background:#dceeff !important;
}
/* Header *


.kontainer-scroll::-webkit-scrollbar {
  width: 10px;
}
/* Latar belakang jalur scrollbar */
.kontainer-scroll::-webkit-scrollbar-track {
  background: transparent;
}
/* Pegangan scroll dengan warna biru gradien */
.kontainer-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #0A192F, #020C1B);
  border-radius: 9px;
  border:white 1px solid;
}
/* Untuk elemen tertentu */
. {
  scrollbar-color:  #D5D9F7 white; /* Thumb: hotpink, Track: blue */
  scrollbar-width:10px  blue !important; /* Membuat scrollbar lebih tipis */
  color:#D5D9F7
}


#loaderSpiner {
    position:absolute;
    z-index:99999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
    rgba(250,255,255,.7);
    backdrop-filter: blur(4px);
    display:flex;
    justify-content:center;
    align-items:center;
	 
	 
}
/* Card */
.loader-card {
    background:
    rgba(255,255,255,.95);
    width:200px;
    padding:20px;
    border-radius:18px;
    text-align:center;
    box-shadow:
    0 15px 35px rgba(0,0,0,.15);
	position:absolute;
	top:35%;
	left:44%;
	 
}
/* Spinner */
.spinner {
    width:45px;
    height:45px;
    margin:auto;
    border-radius:50%;
    border:5px dashed #74A2DE;
    border-top-color:transparent;
    animation:spin .9s linear infinite;
    box-shadow:0 0 10px rgba(13,110,253,.25);
}

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

.loading-text {
    margin-top:15px;
    font-size:15px;
    font-weight:600;
    color:#374151;
}

.loading-sub {
   margin-top:5px;
    font-size:12px;
    color:#6b7280;
}

#grid,
#grid_wrapper,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollBody,
.dataTables_scrollFoot,
.dataTables_scrollFootInner,
.table-responsive {
    border-radius:0 !important;
}

/* Header dan footer */
#grid thead th,
#grid tfoot th,
#grid tbody td {
    border-radius:0 !important;
}

/* Hilangkan overflow rounded */
.dataTables_scroll,
.table-responsive {
    overflow:hidden !important;
}
/* Tomboldalam Tabel */
div.dt-buttons.btn-tabel,
div.dt-buttons button.btn-tabel,
div.dt-buttons a.btn-tabel {
    background: linear-gradient(135deg, #60A5FA, #2563EB) !important;
    border: 1px solid #93C5FD !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 10px rgba(37,99,235,.30) !important;
    transition: all .25s ease;
    font-size: 12px !important;
    font-family: "Bookman Old Style";
}

/* Hover biru tipis elegan */
div.dt-buttons.btn-tabel:hover,
div.dt-buttons button.btn-tabel:hover,
div.dt-buttons a.btn-tabel:hover {
  background: linear-gradient(135deg, #93C5FD, #3B82F6) !important;
    border-color: #BFDBFE !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(96,165,250,.45) !important;
    transform: translateY(-2px);
}
/* tombol aktif */
.dt-button.active-tabel {
    background: linear-gradient(135deg, #1D4ED8, #1E40AF) !important;
    border-color: #60A5FA !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(29,78,216,.45) !important;
    transform: translateY(-1px);
}
.btn-link {font-size:13px  !important;font-family:"bookman Old Style" !important;min-width:100px!important;text-align:center!important} 
.nav-link.active{
    position:relative;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #5fa8ff,
        #1976d2
    );

    color:white !important;
    border-radius:6px;

    box-shadow:
        0 0 5px rgba(80,160,255,.45),
        0 0 12px rgba(25,118,210,.35);

    animation:glowPulse 3s infinite alternate;

    transition:.4s;
}


/* cahaya kilau lebih kecil */
.nav-link.active::before{

    content:"";
    position:absolute;

    top:0;
    left:-40%;

    width:25%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-20deg);

    animation:shine 3s ease-in-out 5s infinite;
}


/* gerakan kilau */
@keyframes shine{

    0%{
        left:-40%;
    }

    20%{
        left:120%;
    }

    100%{
        left:120%;
    }

}


/* cahaya lembut */
@keyframes glowPulse{

    from{
        box-shadow:
        0 0 4px rgba(80,160,255,.35),
        0 0 8px rgba(25,118,210,.25);
    }

    to{
        box-shadow:
        0 0 8px rgba(80,160,255,.55),
        0 0 15px rgba(25,118,210,.4);
    }

}
.dropdown-item.active{
    background:#adb5bd;
    color:white;
}