body {
    font-family: 'Poppins', sans-serif;
}
/* Mode Dark */
.dark {
    background-color: #1a202c;
    color: white;
}
.dark header {
    background-color: #0A0F1E;
}
.dark main {
    background-color: #17171a;
}
.dark aside {
    background-color: #22222e !important;
}
.dark body {
    background-color: #17171a;
}
.dark h1 {
    color: white;
}
.dark h2 {
    color: white;
}
.dark label {
    color: white;
}
.dark div {
    color: white;
}
.dark .left-card {
    background-color: #17171a;
}
.modal-card {
    background-color: white;
}
.dark .modal-card {
    background-color: #17171a !important;
}
.dark .tab-button {
    background-color: #17171a;
    color: white;
    border: 1px solid #17171a;
}
.tab-button {
    background-color: white;
    border: 1px solid #374152;
    color: #374152;
    border-radius: 0.5rem;
}
.dark .tab-button {
    background-color: #374152;
    border: 1px solid white;
    color: white;
    border-radius: 0.5rem;
}
.active-tab {
    background-color: #1e6d85;
    border: 1px solid white;
    color: white;
    border-radius: 0.5rem;
}
.dark .active-tab {
    background-color: #1e6d85;
    border: 1px solid white;
    color: white;
    border-radius: 0.5rem;
}
.dark svg {
    stroke: white;
}
.dark input {
    background-color: #0a0a0a;
    color: white;
    border-color: #4a5568;
}
input::placeholder,
textarea::placeholder {
    color: #888; /* Warna abu-abu */
    opacity: 1;  /* Pastikan warna terlihat jelas */
}
.dark input::placeholder,
.dark textarea::placeholder {
    color: #ccc; /* Warna lebih terang di dark mode */
}
.dark select {
    background-color: #0a0a0a;
    color: white;
    border-color: #4a5568;
}
.dark textarea {
    background-color: #0a0a0a;
    color: white;
    border-color: #4a5568;
}
.dark button {
    background-color: #0a0a0a;
    color: white;
    border: 1px solid white;
}
.dark button:hover {
    background-color: #718096;
    border-radius: 0.5rem;
}
.dark-mode-swal {
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2);
}