/* ==========================================================================
   Global Utilities (Dark Mode)
   ========================================================================== */
[data-theme="dark"] :where(.text-muted, h1, h2, h3, h4, p, h5, h6, label) {
    color: var(--light-50) !important;
}

/* ==========================================================================
   Navigation (Fixed, Active States & Hover)
   ========================================================================== */
[aria-current="page"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    font-weight: 600;
}

/* Light Mode Default */
.navbar a[aria-current="page"] {
    color: var(--primary-600) !important;
}

/* Dark Mode Handling */
[data-theme="dark"] .navbar a {
    color: var(--text-secondary-light);
    transition: all 0.2s ease-in-out;
}

/* Active State in Dark Mode */
[data-theme="dark"] .navbar a.active {
    color: var(--primary-500) !important;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* Hover Effect in Dark Mode (Text & Background) */
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .navbar-brand:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08); /* Transparan putih */
    border-radius: 6px;
}

/* ==========================================================================
   Dark Mode Support for Choices.js
   ========================================================================== */
[data-theme="dark"] .choices__inner {
    background-color: var(--white) !important;
    border-color: var(--input-form-light) !important;
    color: var(--text-primary-light) !important;
}

[data-theme="dark"] .choices__input {
    background-color: transparent !important;
    color: var(--text-primary-light) !important;
}

[data-theme="dark"] .choices__input::placeholder {
    color: var(--text-secondary-light) !important;
}

/* Dropdown Container */
[data-theme="dark"] .choices__list--dropdown,
[data-theme="dark"] .choices__list[aria-expanded] {
    background-color: var(--dark-2) !important;
    border-color: var(--neutral-600) !important;
    color: var(--text-primary-light) !important;
}

/* Highlighted/Hover Item in Dropdown */
[data-theme="dark"]
    .choices__list--dropdown
    .choices__item--selectable.is-highlighted,
[data-theme="dark"]
    .choices__list[aria-expanded]
    .choices__item--selectable.is-highlighted {
    background-color: var(--primary-600) !important;
    color: #ffffff !important;
    border: none;
}

/* ==========================================================================
   Dark Mode Support for Select2
   ========================================================================== */
/* Container Style */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--white) !important;
    border-color: var(--input-form-light) !important;
    color: var(--text-primary-light) !important;
}

/* Text Color in Selection */
[data-theme="dark"]
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--text-primary-light) !important;
}

/* Placeholder Text */
[data-theme="dark"]
    .select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    color: var(--text-secondary-light) !important;
}

/* Dropdown Background & Border */
[data-theme="dark"] .select2-dropdown {
    background-color: var(--dark-2) !important;
    border-color: var(--neutral-600) !important;
    color: var(--text-primary-light) !important;
}

/* Search Box inside Dropdown */
[data-theme="dark"] .select2-search__field {
    background-color: var(--dark-3) !important;
    border-color: var(--neutral-600) !important;
    color: var(--text-primary-light) !important;
}

/* Highlighted/Hover Option in Dropdown */
[data-theme="dark"]
    .select2-container--default
    .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-600) !important;
    color: #ffffff !important;
}

/* Selected Option State */
[data-theme="dark"]
    .select2-container--default
    .select2-results__option--selected {
    background-color: var(--neutral-700) !important;
    color: var(--text-primary-light) !important;
}

/* Tag/Multiple Choice Items */
[data-theme="dark"]
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: #fff !important;
}

[data-theme="dark"]
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   Table & Pagination Hover Effects (Dark Mode)
   ========================================================================== */
/* Table Row Hover */
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.05) !important;
    color: var(--white) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Pagination Button Hover */
[data-theme="dark"] .pagination .page-item:not(.active) .page-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}