.table thead th {
    color: #1B2A4E !important;
    text-align: start !important;
}

.table thead th {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-weight: 600;
}

table {
    border-collapse: collapse !important;
}

table th,
table td {
    border: 1px solid #dee2e6 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.table td.num,
.table th.num {
    text-align: right !important;
}

#dataTable {
    table-layout: auto;
    width: 100%;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

#dataTable th {
    text-align: left !important;
    padding: 12px 14px;
    white-space: nowrap;
    background-color: #f8f9fa !important;
    color: #1b2a4e;
    border-color: #e9ecef !important;
}

#dataTable {
    table-layout: auto;
    width: 100%;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    border-collapse: collapse;
}

#dataTable th,
#dataTable td {
    border: 1px solid #dee2e6;
    padding: 12px 14px;
    vertical-align: middle;
}

#dataTable th {
    background-color: #f8f9fa !important;
    color: #1b2a4e;
    text-align: left;
    font-weight: bold;
}

#dataTable th.header-center {
    text-align: center !important;
}

#dataTable th.text-left {
    text-align: left !important;
}

th[colspan] {
    text-align: center;
    vertical-align: middle;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    padding-right: 35px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.sidebar .nav-item:hover {
    background-color: rgba(251, 251, 251, 0.05) !important;
}

.sidebar .nav-link {
    color: #fff !important;
}

.sidebar .nav-title {
    border-bottom: none !important;
}

.sidebar,
.sidebar .sidebar-nav,
.sidebar .nav,
.sidebar .nav-item,
.sidebar .nav-link {
    background-color: #F2F5F8 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Spacing & single-line text for sidebar dropdown toggles */
.sidebar .nav-link.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    padding-right: 1.75rem;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.pagination .page-link {
    color: #00d78f;
    border: 1px solid #d6d6d6;
    background-color: transparent;
    transition: all 0.3s ease;
    border-radius: 0px !important;
    padding: 0.4rem 0.75rem !important;
}

.pagination .page-link:hover {
    background-color: #00d78f;
    color: #fff;
    border-color: #00d78f;
}

.pagination .page-item.active .page-link {
    background-color: #00d78f;
    border-color: #00d78f;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #00d78f;
    border-color: #d6d6d6;
    background-color: transparent;
}

.input-icon-wrapper {
    position: relative;
    width: 100%;
}

/* Styling untuk Ikon */
.input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #4D6DAA;
    z-index: 10;
}

/* Class tambahan untuk input */
.input-with-icon {
    padding-left: 2.5rem;
}

/* dibawah ini css set Tanggal */
/* Membuat ikon masuk ke dalam input */
.input-group.date {
    position: relative;
}

.input-group.date input {
    padding-right: 35px;
    /* memberi ruang untuk ikon */
}

.input-group.date .input-group-append {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    z-index: 3;
}

.input-group.date .input-group-text {
    background: none;
    border: none;
    padding: 0;
}

/* Untuk ikon KANAN (Tanggal) */
.input-icon-right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none; /* Agar klik tembus ke input tanggal */
}
.input-with-icon-right {
    padding-right: 2.5rem;
}

label[for="tanggal"] {
    margin-left: -15px;
}

#datepicker {
    width: calc(100% + 20px);
    margin-left: -10px;
}

/* New Tanggal */
#date-input {
    width: 105%;
}

/* menggeser text tanggal */
.label-geser {
    display: block;
    padding-left: 16px;
}

/* button X pada saat ingin menutup popup gambar di Buka Boomgate */
.btn-close {
    background: none;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5a.75.75 0 011.06 0L8 6.94l4.44-4.44a.75.75 0 111.06 1.06L9.06 8l4.44 4.44a.75.75 0 11-1.06 1.06L8 9.06l-4.44 4.44a.75.75 0 11-1.06-1.06L6.94 8 2.5 3.56a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
}

.btn-terapkan {
    background-color: #00d78f;
    color: white;
    border: none;
}

.btn-terapkan:hover {
    background-color: #00d78f;
}

/* Checkbox styling (tetap pakai custom-checkbox) */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #d9e2ef;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.custom-checkbox:checked {
    background-color: #00d78f;
    border-color: #00d78f;
}

.custom-checkbox::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    opacity: 1;
}

#filterPos.form-control,
#filterJenis.form-control,
#group-shift.form-control,
#jenis-kendaraan.form-control,
#jenis-sistem.form-control {
    -webkit-appearance: none; /* Sembunyikan di Chrome, Safari, Edge */
    -moz-appearance: none; /* Sembunyikan di Firefox */
    appearance: none; /* Sembunyikan di browser modern */
    background-image: none;
}

.input-icon-wrapper {
    position: relative;
}

/* Untuk ikon KIRI (Search) */
.input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Vertical */
::-webkit-scrollbar {
  width: 6px;
}

/* Horizontal */
::-webkit-scrollbar:horizontal {
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c1c1c1;
}