.nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--text-white) !important;
    background-color: var(--primary) !important;
}

.nav-link {
    color: var(--primary) !important;
}

.nav-link:hover {
    color: var(--primary-hover) !important;
}

/* 🧍 Form focus (input, select, textarea) */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: none !important;
}

/* 🗂️ Checkbox & Radio (focus dan checked) */
.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.form-check-input:focus {
    box-shadow: none !important;
}

/* 🧭 Accordion */
.accordion-button:not(.collapsed) {
    color: var(--text-white) !important;
    background-color: var(--primary) !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125) !important;
}

.accordion-button:focus {
    border-color: var(--primary) !important;
    box-shadow: none !important;
}

/* 🧾 List group */
.list-group-item.active {
    color: var(--text-white) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* 📍 Spinner */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--primary) !important;
}

.note-editor.note-frame {
    border: 1px solid var(--border-gray) !important;
    border-radius: var(--radius-sm) !important;
}

.note-editor.note-frame .note-editing-area .note-editable {
    background-color: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* 📝 Additional Bootstrap Overrides for Dark Mode */
.form-control {
    background-color: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

.form-select {
    background-color: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
    box-shadow: none !important;
}

/* 🌙 Dark mode untuk dropdown select */
.form-select option {
    background-color: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* 🌙 Enhanced dark mode styling untuk select options */
select option {
    background-color: var(--bg-light) !important;
    color: var(--text-white) !important;
}


/* 🧍 Hapus box shadow untuk semua form controls */
.form-control {
    box-shadow: none !important;
}

.form-select {
    box-shadow: none !important;
}

.form-check-input {
    box-shadow: none !important;
}

.input-group-text {
    box-shadow: none !important;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-dark) !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* 🔔 Alertify z-index higher than modal */
.ajs-modal {
    z-index: 9999 !important;
}

.ajs-dialog {
    z-index: 10000 !important;
}

.ajs-header {
    z-index: 10001 !important;
}

.ajs-body {
    z-index: 10001 !important;
}

.ajs-footer {
    z-index: 10001 !important;
}

.ajs-message {
    z-index: 10010 !important;
}

/* 🔘 Buttons in table - make them bigger */
.table .btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.table .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    min-height: 32px !important;
}

.table .btn-xs {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 28px !important;
}

.form-text {
    color: var(--text-muted) !important;
}

.form-label {
    color: var(--text-secondary) !important;
}

.input-group-text {
    background-color: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: white;
    background-color: var(--bg-light) !important;
}

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
    color: white !important;
    background-color: rgb(70, 70, 88) !important;
}
.form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 2.70rem !important;
    padding-bottom: 1rem !important;
}