body {
    background-color: #f8f9fa;
}

.navbar {
    margin-bottom: 20px;
}

.card {
    margin-bottom: 20px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.table-responsive {
    overflow-x: auto;
}

.badge {
    font-size: 0.9em;
    padding: 0.5em 0.75em;
}
/* Tambahan untuk JavaScript */
.is-invalid {
    border-color: #dc3545;
}

.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Table sorting */
th.sortable {
    cursor: pointer;
    position: relative;
}

th.sortable:hover {
    background-color: #f1f1f1;
}

th.sortable::after {
    content: "↕";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.5;
}

th.sorted-asc::after {
    content: "↑";
    opacity: 1;
}

th.sorted-desc::after {
    content: "↓";
    opacity: 1;
}

/* Duration display */
.duration-display {
    font-size: 0.9em;
    color: #6c757d;
    font-style: italic;
}

/* Toggle password */
.toggle-password {
    cursor: pointer;
    margin-left: -30px;
    z-index: 5;
}

/* Alert animation */
.alert {
    transition: opacity 0.15s linear;
}

.alert.fade {
    opacity: 0;
}