#main,
body {
    background-color: #f9fafb !important;
}
#app,
#main,
body {
    display: flex;
    min-height: 100vh;
}
.navbar.navbar-header,
table {
    border: 1px solid #e5e7eb !important;
}
.sidebar-item,
.sidebar-item.active a,
.sidebar-wrapper .menu .sidebar-link,
.sidebar-wrapper .menu .sidebar-link > span {
    font-weight: 500 !important;
}
body {
    flex-direction: column;
}

.badge.bg-success,
.badge-success,
.badge.badge-success {
    background-color: #22c55e !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #1da84f !important;
    border-color: #1da84f !important;
    color: #ffffff !important;
}

.btn-success:disabled,
.btn-success.disabled,
.btn-success:disabled:hover {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
}

#app {
    flex-direction: column;
}
#main .main-content,
.main-content {
    flex: 1;
}
#main {
    flex-direction: column;
}
.sidebar-item .sidebar-link svg,
.sidebar-item .sidebar-link svg:hover {
    stroke: #374151 !important;
}
.navbar.navbar-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: 0.3s;
}
table {
    color: #474747 !important;
}
.table thead,
.table thead th {
    border-bottom: 1px solid #e5e7eb !important;
}
.table tbody td,
.table td,
.table th {
    color: #374151 !important;
    padding: 0.7rem 1.5rem !important;
    border-left: none !important;
    border-right: none !important;
}
.form-check-input:checked,
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: #22c55e !important;
}
footer {
    background: #fff;
    border: 1px !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
.sidebar-item.active a {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #22c55e !important;
    margin: 4px 0;
}
.sidebar-item.active a:hover {
    color: #1da84f !important;
    background-color: rgba(34, 197, 94, 0.18) !important;
}
.sidebar-item.active .sidebar-link {
    color: #22c55e !important;
}
.sidebar-item.active .sidebar-link > span {
    color: #22c55e !important;
    opacity: 1 !important;
}
.sidebar-item.active .sidebar-link i,
.sidebar-item.active .sidebar-link svg {
    color: #22c55e !important;
    stroke: #22c55e !important;
}
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link:before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    bottom: 0;
    background-color: #22c55e;
    width: 4px;
}
.sidebar-wrapper .menu .submenu li a {
    background-color: #fff !important;
    color: #676767 !important;
}
.sidebar-wrapper .menu .submenu li a:hover {
    background-color: #f8f9fa !important;
    color: #495057 !important;
}
.sidebar-wrapper .menu .submenu li.active a {
    color: #22c55e !important;
    font-weight: 600 !important;
}
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.sidebar-wrapper .sidebar-header {
    padding: 0.1rem 2rem 0.5rem !important;
}
.sidebar-wrapper .menu {
    margin-top: 0 !important;
}
.sidebar-header img {
    height: 4.5rem !important;
}
.page-title h3 {
    color: #1f2937 !important;
}
.sidebar-item.has-sub .sidebar-link:after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6" style="fill:none;stroke:gray;stroke-width:1"></polyline></svg>') !important;
}
.sidebar-item.has-sub:has(.submenu.active) .sidebar-link:after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" style="fill:none;stroke:gray;stroke-width:1"></polyline></svg>') !important;
}

/* Previous dengan radius kiri */
.pagination .page-link.previous {
    border-radius: 0.2rem 0 0 0.2rem !important; /* rounded kiri */
}

/* Next dengan radius kanan */
.pagination .page-link.next {
    border-radius: 0 0.2rem 0.2rem 0 !important; /* rounded kanan */
}

/* Semua tombol angka tetap kotak */
.pagination .page-link {
    border-radius: 0 !important;
}

/* Semua tombol pagination punya border sama */
.pagination .page-link {
    border: 1px solid transparent !important; /* jaga tinggi konsisten */
    box-shadow: none !important;
}

/* Active page */
.pagination .page-item.active .page-link {
    background-color: #22c55e !important;
    color: #fff !important;
    border-color: #22c55e !important;
}

/* Normal (tidak active) */
.pagination .page-item:not(.active) .page-link {
    color: #22c55e !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover hanya untuk yang tidak active */
.pagination .page-item:not(.active) .page-link:hover {
    background-color: #c9cdd4 !important; /* gray-400 */
    color: #3d3d3d !important;
    border: 1px solid transparent !important;
}

/* Disabled */
.pagination .page-item.disabled .page-link {
    color: #374151 !important;
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Hilangkan First & Last */
.pagination .dt-paging-button .page-link.first,
.pagination .dt-paging-button .page-link.last,
.pagination .dt-paging-button.first,
.pagination .dt-paging-button.last {
    display: none !important;
}

/* Atur border tbody agar abu-abu */
table.dataTable tbody tr td {
    border-color: #e5e7eb !important; /* Tailwind gray-200 */
}

/* Kalau mau juga ubah border thead agar seragam */
table.dataTable thead th {
    border-color: #e5e7eb !important;
}

/* Untuk pesan "No data available" */
table.dataTable tbody td.dt-empty {
    border-color: #e5e7eb !important;
    color: #6b7280; /* Tailwind gray-500, biar lebih soft */
}

/* Pastikan ikon sorting selalu di kanan */
table.dataTable thead th,
table.dataTable thead td {
    text-align: left; /* biar isi header tetap rata kiri */
    position: relative;
    padding-right: 1.5rem; /* kasih space buat icon */
}

table.dataTable {
    table-layout: auto !important; /* biar lebar menyesuaikan isi */
    width: 100% !important; /* tetap full */
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #ff5b5c !important;
}
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(57, 218, 138, 0.25) !important;
}
.form-check-input:checked {
    background-color: #22c55e !important;
}

/* Custom btn-sm yang lebih kecil */
.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    border-radius: 0.25rem !important;
}