/*!
 * Theme: NNUH Brand
 * Package: DashLite v3.3.0
 * Source palette: https://nnuh.org/en/
 * Primary: #44B4B4
 * Secondary: #980065
 * Ink: #00224A
 */

/* ========== Brand Tokens and Bootstrap Overrides ========== */
:root,
[data-bs-theme=light] {
    --nnuh-logo-teal: #44B4B4;
    --nnuh-logo-teal-soft: #70C5C5;
    --nnuh-logo-teal-deep: #2A7A7A;
    --nnuh-logo-magenta: #980065;
    --nnuh-logo-magenta-deep: #790051;
    --nnuh-ink: #00224A;

    --nnuh-primary: var(--nnuh-logo-teal);
    --nnuh-primary-hover: #36A0A0;
    --nnuh-primary-soft: var(--nnuh-logo-teal-soft);
    --nnuh-primary-subtle: #D4F0F0;
    --nnuh-primary-border-subtle: #8DD9D9;

    --nnuh-secondary: var(--nnuh-logo-magenta);
    --nnuh-secondary-hover: var(--nnuh-logo-magenta-deep);
    --nnuh-secondary-subtle: #F2D4E7;
    --nnuh-secondary-border-subtle: #E6A9D1;

    --nnuh-success: var(--nnuh-primary);
    --nnuh-success-hover: var(--nnuh-primary-hover);
    --nnuh-success-subtle: var(--nnuh-primary-subtle);
    --nnuh-success-border-subtle: var(--nnuh-primary-border-subtle);

    --nnuh-danger: var(--nnuh-secondary);
    --nnuh-danger-hover: var(--nnuh-secondary-hover);
    --nnuh-danger-subtle: var(--nnuh-secondary-subtle);
    --nnuh-danger-border-subtle: var(--nnuh-secondary-border-subtle);

    --nnuh-warning: var(--nnuh-ink);
    --nnuh-warning-hover: #001A38;
    --nnuh-warning-subtle: #E8EDF4;
    --nnuh-warning-border-subtle: #B4C3D6;

    --nnuh-primary-rgb: 68, 180, 180;
    --nnuh-secondary-rgb: 152, 0, 101;
    --nnuh-ink-rgb: 0, 34, 74;

    --nnuh-theme-bg: #0A3D3D;
    --nnuh-theme-border: #0F5757;
    --nnuh-theme-link: #9FE5E5;
    --nnuh-theme-icon: #C8F5F5;
    --nnuh-theme-badge: #A1E5E5;
    --nnuh-theme-aux: #A9E8E8;
    --nnuh-theme-text: #C3F0F0;
    --nnuh-font-sans: Roboto, "Noto Sans Arabic", sans-serif;
    --nnuh-font-heading: Nunito, "Noto Sans Arabic", sans-serif;
    --nnuh-font-arabic: "Noto Sans Arabic", sans-serif;
    --nnuh-font-arabic-heading: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
    --nnuh-arabic-mixed-scale: 1.1;
    --nnuh-arabic-line-height: 1.75;
    --nnuh-card-border: #dbdfea;

    --bs-primary: var(--nnuh-primary);
    --bs-primary-rgb: var(--nnuh-primary-rgb);
    --bs-primary-text-emphasis: var(--nnuh-logo-teal-deep);
    --bs-primary-bg-subtle: var(--nnuh-primary-subtle);
    --bs-primary-border-subtle: var(--nnuh-primary-border-subtle);

    --bs-secondary: var(--nnuh-secondary);
    --bs-secondary-rgb: var(--nnuh-secondary-rgb);
    --bs-secondary-text-emphasis: #4D0037;
    --bs-secondary-bg-subtle: var(--nnuh-secondary-subtle);
    --bs-secondary-border-subtle: var(--nnuh-secondary-border-subtle);

    --bs-success: var(--nnuh-success);
    --bs-success-rgb: var(--nnuh-primary-rgb);
    --bs-success-text-emphasis: var(--nnuh-logo-teal-deep);
    --bs-success-bg-subtle: var(--nnuh-success-subtle);
    --bs-success-border-subtle: var(--nnuh-success-border-subtle);

    --bs-danger: var(--nnuh-danger);
    --bs-danger-rgb: var(--nnuh-secondary-rgb);
    --bs-danger-text-emphasis: #4D0037;
    --bs-danger-bg-subtle: var(--nnuh-danger-subtle);
    --bs-danger-border-subtle: var(--nnuh-danger-border-subtle);

    --bs-warning: var(--nnuh-warning);
    --bs-warning-rgb: var(--nnuh-ink-rgb);
    --bs-warning-text-emphasis: var(--nnuh-ink);
    --bs-warning-bg-subtle: var(--nnuh-warning-subtle);
    --bs-warning-border-subtle: var(--nnuh-warning-border-subtle);

    --bs-info: var(--nnuh-ink);
    --bs-info-rgb: var(--nnuh-ink-rgb);

    --bs-form-valid-color: var(--nnuh-success);
    --bs-form-valid-border-color: var(--nnuh-success);
    --bs-form-invalid-color: var(--nnuh-danger);
    --bs-form-invalid-border-color: var(--nnuh-danger);

    --bs-link-color: var(--nnuh-primary);
    --bs-link-hover-color: var(--nnuh-primary-hover);
    --bs-link-color-rgb: var(--nnuh-primary-rgb);
    --bs-link-hover-color-rgb: 54, 160, 160;

    --bs-body-color: var(--nnuh-ink);
    --bs-body-color-rgb: var(--nnuh-ink-rgb);
    --bs-heading-color: var(--nnuh-ink);
    --bs-emphasis-color: var(--nnuh-ink);
    --bs-emphasis-color-rgb: var(--nnuh-ink-rgb);
    --bs-secondary-color: rgba(var(--nnuh-ink-rgb), 0.75);
    --bs-secondary-color-rgb: var(--nnuh-ink-rgb);
    --bs-tertiary-color: rgba(var(--nnuh-ink-rgb), 0.5);
    --bs-tertiary-color-rgb: var(--nnuh-ink-rgb);

    --bs-focus-ring-color: rgba(var(--nnuh-primary-rgb), 0.25);
    --bs-font-sans-serif: var(--nnuh-font-sans);
    --bs-body-font-family: var(--nnuh-font-sans);
}

[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: #A2DEDE;
    --bs-primary-bg-subtle: var(--nnuh-logo-teal-deep);
    --bs-primary-border-subtle: var(--nnuh-primary);

    --bs-secondary-text-emphasis: #E5A8D0;
    --bs-secondary-bg-subtle: #4D0037;
    --bs-secondary-border-subtle: var(--nnuh-secondary-hover);

    --bs-success-text-emphasis: #A2DEDE;
    --bs-success-bg-subtle: var(--nnuh-logo-teal-deep);
    --bs-success-border-subtle: var(--nnuh-success);

    --bs-danger-text-emphasis: #E5A8D0;
    --bs-danger-bg-subtle: #4D0037;
    --bs-danger-border-subtle: var(--nnuh-danger-hover);

    --bs-warning-text-emphasis: #C5D7EF;
    --bs-warning-bg-subtle: #1A2F4F;
    --bs-warning-border-subtle: #3F5B82;
}

/* ========== Typography (Arabic + Mixed-Script Support) ========== */
body,
.nk-body,
.tooltip,
.popover,
.link,
.table,
.dropdown-menu,
.btn,
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    font-family: var(--nnuh-font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.page-title,
.nk-block-title {
    font-family: var(--nnuh-font-heading);
}

html[dir="rtl"] {
    --bs-font-sans-serif: var(--nnuh-font-arabic);
    --bs-body-font-family: var(--nnuh-font-arabic);
    --bs-btn-font-family: var(--nnuh-font-arabic);
}

html[dir="rtl"] body,
html[dir="rtl"] .nk-body,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .table,
html[dir="rtl"] .modal-title,
html[dir="rtl"] .link {
    font-family: var(--nnuh-font-arabic);
}

html[dir="rtl"] body,
html[dir="rtl"] .nk-body {
    font-size: 0.95rem;
    line-height: var(--nnuh-arabic-line-height);
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .h1,
html[dir="rtl"] .h2,
html[dir="rtl"] .h3,
html[dir="rtl"] .h4,
html[dir="rtl"] .h5,
html[dir="rtl"] .h6,
html[dir="rtl"] .page-title,
html[dir="rtl"] .nk-block-title {
    font-family: var(--nnuh-font-arabic-heading);
    line-height: 1.35;
}

html[dir="ltr"] [lang|="ar"],
html[dir="ltr"] :lang(ar),
html[dir="ltr"] .lms-arabic-text {
    font-family: var(--nnuh-font-arabic) !important;
    font-size: calc(1em * var(--nnuh-arabic-mixed-scale));
    line-height: var(--nnuh-arabic-line-height);
}

/* ========== Sidebar Styles ========== */
.nk-sidebar.is-dark {
    background: #0f192a;
    border-right-color: #1c2f50;
}

.nk-sidebar.is-theme {
    background: var(--nnuh-theme-bg);
    border-right-color: var(--nnuh-theme-border);
}

.is-dark .nk-sidebar-head {
    border-color: #1c2f50;
}

.is-theme .nk-sidebar-head {
    border-color: var(--nnuh-theme-border);
}

.nk-sidebar.is-dark .user-balance-alt,
.nk-sidebar.is-theme .user-balance-alt {
    color: rgba(255, 255, 255, 0.8);
}

/* ========== Header Styles ========== */
.nk-header {
    background: #f5f6fa;
    border-bottom-color: #e5e9f2;
}

.nk-header.is-dark:not([class*=bg-]) {
    background: #0f192a;
}

.nk-header.is-theme:not([class*=bg-]) {
    background: var(--nnuh-theme-bg);
}

/* ========== Sidebar Menu Colors - Dark ========== */
.is-dark .nk-menu-link {
    color: #8699b2;
}

.is-dark .nk-menu-icon {
    color: #9faec2;
}

.is-dark .nk-menu-badge {
    color: var(--nnuh-primary-soft);
    background: #1c2f50;
}

.is-dark .nk-menu-sub .active > .nk-menu-link,
.is-dark .nk-menu-link:hover,
.is-dark .active > .nk-menu-link,
.is-dark .nk-menu-link:hover .nk-menu-icon,
.is-dark .nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.is-dark .nk-menu-item.current-menu > .nk-menu-link .nk-menu-icon {
    color: var(--nnuh-primary);
}

.is-dark .nk-news-icon .icon {
    color: var(--nnuh-primary-hover);
}

.is-dark .nk-news-text .icon {
    color: #8094ae;
}

.is-dark .nk-news-text p span {
    color: rgba(128, 148, 174, 0.9);
}

.is-dark .user-name,
.is-dark .nk-news-text p {
    color: #90a1b8;
}

.is-dark .nk-quick-nav-icon {
    color: #9faec2;
}

/* ========== Sidebar Menu Colors - Theme ========== */
.is-theme .nk-menu-link {
    color: var(--nnuh-theme-link);
}

.is-theme .nk-menu-icon {
    color: var(--nnuh-theme-icon);
}

.is-theme .nk-menu-badge {
    color: var(--nnuh-theme-badge);
    background: var(--nnuh-theme-border);
}

.is-theme .nk-news-icon .icon {
    color: var(--nnuh-primary-soft);
}

.is-theme .nk-news-text .icon,
.is-theme .nk-quick-nav-icon,
.is-theme .overline-title {
    color: var(--nnuh-theme-aux);
}

.is-theme .nk-news-text p span,
.is-theme .nk-menu-heading .overline-title {
    color: rgba(169, 232, 232, 0.8);
}

.is-theme .user-name,
.is-theme .nk-news-text p {
    color: var(--nnuh-theme-text);
}

/* ========== Primary Color Elements ========== */
.card-tools-nav li a:before,
.nav-tabs .nav-link:after,
.progress-bar,
.dot-primary,
.alert-fill.alert-primary,
.badge-primary,
.icon-circle,
.noUi-connect,
.nk-msg-menu-item a:after,
.ui-shady .nk-msg-item.active:after,
.ui-shady .nk-msg-item.current:after,
.ui-softy .nk-msg-item.active:after,
.ui-softy .nk-msg-item.current:after {
    background: var(--nnuh-primary);
}

.card-bordered.is-dark {
    background: #0b3175;
}

.card.is-dark {
    background: #0b3175;
}

.card {
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--nnuh-card-border);
}

.user-avatar,
[class^=user-avatar]:not([class*=-group]) {
    background: var(--nnuh-primary);
}

.nk-news-item:hover .nk-news-text .icon {
    color: var(--nnuh-primary);
}

/* ========== Menu and Navigation Links ========== */
.nk-menu-link:hover,
.nk-menu-link:hover .nk-menu-icon,
.nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.nk-menu-item.current-menu > .nk-menu-link .nk-menu-icon,
.nk-menu-link:hover .count,
.nk-menu-sub .nk-menu-link:hover,
.nk-menu-sub .active > .nk-menu-link,
.nk-menu-sm .nk-menu-link:hover,
.nk-menu-main .nk-menu-link:hover,
.nk-menu-main .nk-menu-link:focus,
.nk-menu-main .nk-menu-item.active > .nk-menu-link,
.nk-menu-main .nk-menu-item.current-menu > .nk-menu-link,
.nk-menu-main .nk-menu-item:hover > .nk-menu-link,
.is-light .nk-menu-link:hover,
.is-light .active > .nk-menu-link,
.active > .nk-menu-link,
.active > .nk-menu-link .count,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link,
.nk-menu-footer .nk-menu-icon,
.nk-menu-footer .nk-menu-link:hover,
.nk-footer-copyright a:hover,
.page-link:hover,
.list-plain a:hover,
.link-check li a:hover,
.link-list a:hover,
.link-list-opt a:hover,
.link-list-plain a:hover,
.link-list-menu li.active > a,
.link-list-menu a.active,
.link-list-menu a:hover,
.link-list-menu li.active > a .icon,
.link-list-menu a.active .icon,
.link-list-menu a:hover .icon,
.link-list-menu li.active > a:after,
.link-list-menu a.active:after,
.link-list-menu a:hover:after,
.list-checked li:before,
.list-step li.list-step-current:before,
.accordion-s2 .accordion-head .title,
.accordion-s3 .accordion-head .title,
.bg-outline-primary,
.badge-dim.bg-primary,
.badge-dot.bg-primary,
.badge-dim.bg-outline-primary,
.alert-primary,
.form-clip,
.form-text-hint,
.search-submit:hover,
.nk-news-icon .icon,
.attach-item .icon,
.attach-download:hover span,
.nk-reply-meta-info .whom,
.nk-msg-tags li > span .icon,
.nk-msg-menu-item a:hover,
.nk-msg-menu-item.active a,
.user-balance,
.user-avatar[class*=-primary-dim],
.nk-order-ovwg-data.sell .amount,
.nk-order-ovwg-data.sell .title .icon,
.nk-wg-action-content p strong,
a,
.dropzone .dz-message-text span,
.nk-switch-icon.active,
.link-list-plain a .icon,
.chat-upload-option a,
.is-unread .chat-context .status,
.add-opt:hover .sub-text,
.add-opt:hover .icon,
.icon[class*=bg-primary-dim] {
    color: var(--nnuh-primary);
}

a:hover {
    color: var(--nnuh-primary-hover);
}

/* ========== Text and Link Colors ========== */
.text-primary,
.link-primary {
    color: var(--nnuh-primary) !important;
}

.link-primary:hover,
a.text-primary:hover,
a.text-primary:focus,
.chat-upload-option a:hover {
    color: var(--nnuh-primary-hover) !important;
}

.border-primary,
.nk-kycfm-control:checked ~ .nk-kycfm-label {
    border-color: var(--nnuh-primary) !important;
}

/* ========== Background Colors ========== */
.bg-lighter {
    background-color: #f5f6fa !important;
}

.bg-primary {
    background-color: var(--nnuh-primary) !important;
}

.bg-tertiary {
    background-color: var(--nnuh-secondary) !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: #3a9d9d !important;
}

a.bg-tertiary:hover,
a.bg-tertiary:focus,
button.bg-tertiary:hover,
button.bg-tertiary:focus {
    background-color: var(--nnuh-secondary-hover) !important;
}

.bg-primary-dim,
.dual-listbox .dual-listbox__item:active,
.dual-listbox .dual-listbox__item.dual-listbox__item--selected {
    background-color: var(--nnuh-primary-subtle) !important;
}

.text-primary-dim {
    color: var(--nnuh-primary-subtle) !important;
}

/* ========== Alert and Badge Colors ========== */
.alert-primary,
.badge-dim.bg-outline-primary {
    background-color: var(--nnuh-primary-subtle);
    border-color: var(--nnuh-primary-border-subtle);
}

/* ========== Form Controls Focus States ========== */
.alert-pro.alert-primary,
.bg-primary,
.form-control:focus,
.form-control.focus,
.custom-file-input:focus ~ .custom-file-label,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--nnuh-primary);
}

.bg-tertiary {
    border-color: var(--nnuh-secondary);
}

.nk-order-ovwg-data.sell,
.bg-outline-primary {
    border-color: var(--nnuh-primary-border-subtle);
}

.dropdown-menu-s1 {
    border-top-color: var(--nnuh-primary);
}

.nk-iv-wg2-amount.ui-v2 {
    border-bottom-color: var(--nnuh-primary);
}

/* ========== Active States ========== */
.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--nnuh-primary);
    border-color: var(--nnuh-primary);
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: var(--nnuh-primary-soft);
}

.badge-dim.bg-primary {
    background-color: var(--nnuh-primary-subtle);
    border-color: var(--nnuh-primary-subtle);
}

.badge-dim.bg-tertiary {
    color: var(--nnuh-secondary);
    background-color: var(--nnuh-secondary-subtle) !important;
    border-color: var(--nnuh-secondary-subtle);
}

.bg-primary.badge-dot {
    background: transparent !important;
}

.nk-error-head {
    background: -webkit-linear-gradient(var(--nnuh-primary), #2a7a7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-switch .nav-link.active {
    background: var(--nnuh-primary);
    color: #ffffff;
}

.icon-avatar {
    color: var(--nnuh-primary);
    background-color: var(--nnuh-primary-subtle);
}

.is-theme .nk-quick-nav-icon:before {
    background-color: #071d46;
}

/* ========== Button Primary ========== */
.btn-primary {
    background-color: var(--nnuh-primary);
    border-color: var(--nnuh-primary);
}

.btn-primary:hover {
    background-color: #3da8a8;
    border-color: #3a9d9d;
}

.btn-primary:focus {
    background-color: #3da8a8;
    border-color: #3a9d9d;
}

.btn-primary.btn-dim {
    color: var(--nnuh-primary);
    background-color: var(--nnuh-primary-subtle);
    border-color: var(--nnuh-primary-subtle);
}

.btn-dim.btn-outline-primary {
    color: var(--nnuh-primary);
    background-color: var(--nnuh-primary-subtle);
    border-color: var(--nnuh-primary-border-subtle);
}

.btn-dim.btn-outline-primary.btn-white {
    background-color: #ffffff;
}

.btn-outline-primary {
    border-color: var(--nnuh-primary);
    color: var(--nnuh-primary);
}

.btn-outline-primary:hover {
    background-color: var(--nnuh-primary);
    border-color: var(--nnuh-primary);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: #3da8a8;
    border-color: #3a9d9d;
}

/* ========== Button Secondary ========== */
.btn-secondary {
    background-color: var(--nnuh-secondary);
    border-color: var(--nnuh-secondary);
}

.btn-secondary:hover {
    background-color: #85005a;
    border-color: var(--nnuh-secondary-hover);
}

.btn-secondary:focus {
    background-color: #85005a;
    border-color: var(--nnuh-secondary-hover);
}

.btn-outline-secondary {
    border-color: var(--nnuh-secondary);
    color: var(--nnuh-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--nnuh-secondary);
    border-color: var(--nnuh-secondary);
}

/* ========== Focus Shadows ========== */
.btn-primary:focus,
.btn-outline-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary.btn-dim:focus,
.btn-primary.btn-dim:not(:disabled):not(.disabled):active,
.btn-primary.btn-dim:not(:disabled):not(.disabled):active:focus,
.btn-dim.btn-outline-primary:focus,
.btn-dim.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-dim.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--nnuh-primary-rgb), 0.2);
}

.btn-outline-light:focus,
.btn-outline-light.focus,
.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(128, 148, 174, 0.1);
}

.btn-trigger:focus {
    box-shadow: none;
}

.form-control:focus,
.form-control.focus,
.custom-control-input:focus ~ .custom-control-label::before,
.custom-file-input:focus ~ .custom-file-label,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    box-shadow: 0 0 0 3px rgba(var(--nnuh-primary-rgb), 0.1);
}

.form-control-simple:focus {
    box-shadow: none;
}

.btn-primary.btn-dim:not(:disabled):not(.disabled):hover,
.btn-dim.btn-outline-primary:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--nnuh-primary);
    border-color: var(--nnuh-primary);
}

.form-focus-none:focus {
    border-color: transparent;
    box-shadow: none;
}

/* ========== Responsive Menu ========== */
@media (min-width: 992px) {
    .nk-menu-main > li > .nk-menu-link:before {
        background: var(--nnuh-primary);
    }

    .is-theme .nk-menu-main > li > .nk-menu-link {
        color: var(--nnuh-theme-aux);
    }

    .is-theme .nk-menu-main > li > .nk-menu-link.nk-menu-toggle:after {
        color: rgba(169, 232, 232, 0.7);
    }
}

/* ========== Datepicker Colors ========== */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-color: var(--nnuh-primary-subtle);
    color: var(--nnuh-primary);
}

.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
    background-color: var(--nnuh-primary-soft);
}

.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
    background-color: var(--nnuh-primary);
}

/* ========== Alert Colors ========== */
.alert-pro {
    background: #ffffff;
    color: #526484;
}

.nk-menu-badge {
    color: var(--nnuh-primary-soft);
    background-color: var(--nnuh-primary-subtle);
}

.is-theme .nk-sidebar-footer,
.is-theme .nk-sidebar-profile-fixed {
    background: var(--nnuh-theme-bg);
    border-color: var(--nnuh-theme-border);
}

.is-theme .nk-menu-footer .nk-menu-link,
.is-theme .sub-text,
.is-theme .lead-text span {
    color: var(--nnuh-theme-aux);
}

.nav-switch-s2 .nav-link:hover,
.nav-switch-s2 .nav-link:focus {
    color: #526484;
}

.nav-switch-s2 .nav-link.active {
    color: var(--nnuh-ink);
}

/* ========== Inbox & File Manager ========== */
.active .nk-ibx-menu-text,
.active .nk-ibx-menu-item .icon,
.nk-reply-form-nav li a:hover,
.nk-reply-form-input .toggle-opt:hover {
    color: var(--nnuh-primary);
}

.nk-ibx-menu li.active {
    background: #e0f5f5;
}

.nk-fmg-menu li.active {
    background: #e0f5f5;
}

.nk-file-name .asterisk .icon,
.nk-file-name-text a.title:hover,
.nk-file-link:hover .title,
.active .nk-fmg-menu-item .icon,
.active .nk-fmg-menu-text {
    color: var(--nnuh-primary);
}

.nk-files-view-list .nk-file.selected {
    background-color: var(--nnuh-primary-subtle);
}

/* ========== Chat ========== */
.chat.is-me .chat-msg {
    background-color: var(--nnuh-primary);
}

/* ========== Kanban ========== */
.kanban-add-task {
    color: var(--nnuh-primary);
}

.kanban-add-task:hover {
    background: var(--nnuh-primary);
    border-color: var(--nnuh-primary);
}

/* ========== Wizard ========== */
.actions ul li a {
    border-color: var(--nnuh-primary);
    background: var(--nnuh-primary);
}

.nk-wizard-simple .steps ul li.done h5,
.nk-wizard-simple .steps ul li.done .number,
.nk-wizard-simple .steps ul li.current h5,
.nk-wizard-simple .steps ul li.current .number {
    color: var(--nnuh-primary);
}

.nk-wizard-simple .steps ul li:after {
    background: var(--nnuh-primary);
}

/* ========== Invoice ========== */
.invoice-contact ul .icon,
.invoice-desc .title,
.invoice-bills .table th {
    color: var(--nnuh-primary);
}

/* ========== Product Gallery ========== */
.product-gallery .slider-nav .slider-item.slick-current .thumb,
.custom-control-pro.no-control .custom-control-input:checked ~ .custom-control-label,
.custom-control-pro.no-control .custom-control-input:not(:disabled):active ~ .custom-control-label,
.custom-control.color-control .custom-control-label:before {
    border-color: var(--nnuh-primary) !important;
}

/* ========== Text Color Override ========== */
body,
.nk-body {
    color: var(--nnuh-ink);
}

.text-dark {
    color: var(--nnuh-ink) !important;
}

/* ========== Progress Bar ========== */
.progress-xs {
    height: 4px;
}

.progress-bar.bg-primary {
    background-color: var(--nnuh-primary) !important;
}

/* ========== Badge ========== */
.badge.bg-primary {
    background-color: var(--nnuh-primary) !important;
    color: white !important;
}

/* ========== Secondary Color ========== */
.link-secondary {
    color: var(--nnuh-secondary) !important;
}

.link-on-secondary:hover {
    color: var(--nnuh-secondary-hover) !important;
}

.bg-secondary-dim {
    background-color: var(--nnuh-secondary-subtle) !important;
}

.text-secondary-dim {
    color: var(--nnuh-secondary-subtle) !important;
}

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

/* ========== Custom Utility Classes ========== */
.bg-teal-light {
    background-color: var(--nnuh-primary-subtle) !important;
}

.text-teal {
    color: var(--nnuh-primary) !important;
}

/* ========== Alert Fill Overrides ========== */
.alert-fill.alert-primary {
    color: var(--nnuh-ink);
    background: var(--nnuh-primary);
}

.alert-fill.alert-secondary {
    color: #fff;
    background: var(--nnuh-secondary);
}

.alert-fill.alert-info {
    color: #fff;
    background: var(--nnuh-ink);
}

/* Dark Mode Alert Fill */
.dark-mode .alert-fill.alert-primary,
[data-bs-theme="dark"] .alert-fill.alert-primary {
    color: var(--nnuh-ink);
    background: var(--nnuh-primary);
}

.dark-mode .alert-fill.alert-secondary,
[data-bs-theme="dark"] .alert-fill.alert-secondary {
    color: #fff;
    background: var(--nnuh-secondary);
}

/* ========== Modal Icon Colors ========== */
.nk-modal-icon.bg-primary {
    background-color: var(--nnuh-primary) !important;
}

.nk-modal-icon.bg-secondary {
    background-color: var(--nnuh-secondary) !important;
}

/* Modal header with primary border */
.modal-header {
    border-bottom-color: rgba(var(--nnuh-primary-rgb), 0.1);
}

/* Modal footer */
.modal-footer {
    border-top-color: rgba(var(--nnuh-primary-rgb), 0.1);
}

/* ========== Brand Semantic Overrides (Success / Danger / Tertiary) ========== */
.bg-success {
    background-color: var(--nnuh-success) !important;
    border-color: var(--nnuh-success) !important;
}

.bg-success-dim {
    background-color: var(--nnuh-success-subtle) !important;
}

.bg-danger {
    background-color: var(--nnuh-danger) !important;
    border-color: var(--nnuh-danger) !important;
}

.bg-danger-dim {
    background-color: var(--nnuh-danger-subtle) !important;
}

.bg-success-subtle {
    background-color: var(--nnuh-success-subtle) !important;
}

.bg-danger-subtle {
    background-color: var(--nnuh-danger-subtle) !important;
}

.bg-warning {
    background-color: var(--nnuh-warning) !important;
    border-color: var(--nnuh-warning) !important;
}

.bg-warning-dim {
    background-color: var(--nnuh-warning-subtle) !important;
}

.bg-warning-subtle {
    background-color: var(--nnuh-warning-subtle) !important;
}

.bg-outline-success {
    color: var(--nnuh-success) !important;
    border-color: var(--nnuh-success-border-subtle) !important;
}

.bg-outline-danger {
    color: var(--nnuh-danger) !important;
    border-color: var(--nnuh-danger-border-subtle) !important;
}

.bg-outline-warning {
    color: var(--nnuh-warning) !important;
    border-color: var(--nnuh-warning-border-subtle) !important;
}

.text-success,
.link-success {
    color: var(--nnuh-success) !important;
}

.text-danger,
.link-danger {
    color: var(--nnuh-danger) !important;
}

.text-warning,
.link-warning {
    color: var(--nnuh-warning) !important;
}

.text-success-dim {
    color: var(--nnuh-success-subtle) !important;
}

.text-danger-dim {
    color: var(--nnuh-danger-subtle) !important;
}

.border-success {
    border-color: var(--nnuh-success) !important;
}

.border-danger {
    border-color: var(--nnuh-danger) !important;
}

.border-warning {
    border-color: var(--nnuh-warning) !important;
}

.border-success-subtle {
    border-color: var(--nnuh-success-border-subtle) !important;
}

.border-danger-subtle {
    border-color: var(--nnuh-danger-border-subtle) !important;
}

.border-warning-subtle {
    border-color: var(--nnuh-warning-border-subtle) !important;
}

.btn-success {
    color: #fff;
    background-color: var(--nnuh-success);
    border-color: var(--nnuh-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: var(--nnuh-success-hover);
    border-color: var(--nnuh-success-hover);
}

.btn-success.disabled,
.btn-success:disabled {
    color: #fff;
    background-color: var(--nnuh-success);
    border-color: var(--nnuh-success);
}

.btn-outline-success {
    color: var(--nnuh-success);
    border-color: var(--nnuh-success);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: var(--nnuh-success);
    border-color: var(--nnuh-success);
}

.btn-danger {
    color: #fff;
    background-color: var(--nnuh-danger);
    border-color: var(--nnuh-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
    color: #fff;
    background-color: var(--nnuh-danger-hover);
    border-color: var(--nnuh-danger-hover);
}

.btn-danger.disabled,
.btn-danger:disabled {
    color: #fff;
    background-color: var(--nnuh-danger);
    border-color: var(--nnuh-danger);
}

.btn-outline-danger {
    color: var(--nnuh-danger);
    border-color: var(--nnuh-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: var(--nnuh-danger);
    border-color: var(--nnuh-danger);
}

.btn-dim.btn-success {
    color: var(--nnuh-success);
    background-color: var(--nnuh-success-subtle);
    border-color: var(--nnuh-success-subtle);
}

.btn-dim.btn-success:not(:disabled):not(.disabled):hover {
    color: #fff;
    background-color: var(--nnuh-success);
    border-color: var(--nnuh-success);
}

.btn-dim.btn-danger {
    color: var(--nnuh-danger);
    background-color: var(--nnuh-danger-subtle);
    border-color: var(--nnuh-danger-subtle);
}

.btn-dim.btn-danger:not(:disabled):not(.disabled):hover {
    color: #fff;
    background-color: var(--nnuh-danger);
    border-color: var(--nnuh-danger);
}

.btn-warning {
    color: #fff;
    background-color: var(--nnuh-warning);
    border-color: var(--nnuh-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
    color: #fff;
    background-color: var(--nnuh-warning-hover);
    border-color: var(--nnuh-warning-hover);
}

.btn-warning.disabled,
.btn-warning:disabled {
    color: #fff;
    background-color: var(--nnuh-warning);
    border-color: var(--nnuh-warning);
}

.btn-outline-warning {
    color: var(--nnuh-warning);
    border-color: var(--nnuh-warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
    color: #fff;
    background-color: var(--nnuh-warning);
    border-color: var(--nnuh-warning);
}

.btn-dim.btn-warning {
    color: var(--nnuh-warning);
    background-color: var(--nnuh-warning-subtle);
    border-color: var(--nnuh-warning-subtle);
}

.btn-dim.btn-warning:not(:disabled):not(.disabled):hover {
    color: #fff;
    background-color: var(--nnuh-warning);
    border-color: var(--nnuh-warning);
}

.badge.bg-success {
    background-color: var(--nnuh-success) !important;
    color: #fff !important;
}

.badge.bg-danger {
    background-color: var(--nnuh-danger) !important;
    color: #fff !important;
}

.badge-dim.bg-success {
    color: #fff !important;
    background-color: var(--nnuh-success) !important;
    border-color: var(--nnuh-success);
}

.badge-dim.bg-outline-success {
    color: var(--nnuh-success);
    background-color: var(--nnuh-success-subtle);
    border-color: var(--nnuh-success-border-subtle);
}

.badge-dim.bg-danger {
    color: var(--nnuh-danger);
    background-color: var(--nnuh-danger-subtle) !important;
    border-color: var(--nnuh-danger-subtle);
}

.badge-dim.bg-outline-danger {
    color: var(--nnuh-danger);
    background-color: var(--nnuh-danger-subtle);
    border-color: var(--nnuh-danger-border-subtle);
}

.badge-dot.bg-success {
    color: var(--nnuh-success);
}

.badge-dot.bg-danger {
    color: var(--nnuh-danger);
}

.badge.bg-warning {
    background-color: var(--nnuh-warning) !important;
    color: #fff !important;
}

.badge-dim.bg-warning {
    color: #fff !important;
    background-color: var(--nnuh-warning) !important;
    border-color: var(--nnuh-warning);
}

.badge-dim.bg-outline-warning {
    color: var(--nnuh-warning);
    background-color: var(--nnuh-warning-subtle);
    border-color: var(--nnuh-warning-border-subtle);
}

.badge-dot.bg-warning {
    color: var(--nnuh-warning);
}

.alert-success {
    color: var(--nnuh-success);
    background-color: var(--nnuh-success-subtle);
    border-color: var(--nnuh-success-border-subtle);
}

.alert-danger {
    color: var(--nnuh-danger);
    background-color: var(--nnuh-danger-subtle);
    border-color: var(--nnuh-danger-border-subtle);
}

.alert-fill.alert-success {
    color: var(--nnuh-ink);
    background: var(--nnuh-success);
}

.alert-fill.alert-danger {
    color: #fff;
    background: var(--nnuh-danger);
}

.alert-warning {
    color: var(--nnuh-warning);
    background-color: var(--nnuh-warning-subtle);
    border-color: var(--nnuh-warning-border-subtle);
}

.alert-fill.alert-warning {
    color: #fff;
    background: var(--nnuh-warning);
}

/* ========== Close Icons Parity (Alerts / Modals / Toasts / Offcanvas) ========== */
.alert-dismissible .btn-close,
.modal-header .btn-close,
.toast-header .btn-close,
.offcanvas-header .btn-close {
    --bs-btn-close-opacity: 0.8;
    --bs-btn-close-hover-opacity: 1;
}

/* Dark backgrounds: force light close icon. */
.alert-fill.alert-secondary .btn-close,
.alert-fill.alert-danger .btn-close,
.alert-fill.alert-warning .btn-close,
.alert-fill.alert-info .btn-close,
.alert-fill.alert-dark .btn-close,
.alert-fill.alert-gray .btn-close,
.modal-header.bg-secondary .btn-close,
.modal-header.bg-danger .btn-close,
.modal-header.bg-warning .btn-close,
.modal-header.bg-info .btn-close,
.modal-header.bg-dark .btn-close,
.modal-header.bg-tertiary .btn-close,
.modal-header.text-bg-secondary .btn-close,
.modal-header.text-bg-danger .btn-close,
.modal-header.text-bg-warning .btn-close,
.modal-header.text-bg-info .btn-close,
.modal-header.text-bg-dark .btn-close,
.offcanvas-header.bg-secondary .btn-close,
.offcanvas-header.bg-danger .btn-close,
.offcanvas-header.bg-warning .btn-close,
.offcanvas-header.bg-info .btn-close,
.offcanvas-header.bg-dark .btn-close,
.offcanvas-header.bg-tertiary .btn-close,
.offcanvas-header.text-bg-secondary .btn-close,
.offcanvas-header.text-bg-danger .btn-close,
.offcanvas-header.text-bg-warning .btn-close,
.offcanvas-header.text-bg-info .btn-close,
.offcanvas-header.text-bg-dark .btn-close,
.offcanvas.bg-secondary .offcanvas-header .btn-close,
.offcanvas.bg-danger .offcanvas-header .btn-close,
.offcanvas.bg-warning .offcanvas-header .btn-close,
.offcanvas.bg-info .offcanvas-header .btn-close,
.offcanvas.bg-dark .offcanvas-header .btn-close,
.offcanvas.bg-tertiary .offcanvas-header .btn-close,
.toast-header.bg-secondary .btn-close,
.toast-header.bg-danger .btn-close,
.toast-header.bg-warning .btn-close,
.toast-header.bg-info .btn-close,
.toast-header.bg-dark .btn-close,
.toast-header.bg-tertiary .btn-close,
.toast-header.text-bg-secondary .btn-close,
.toast-header.text-bg-danger .btn-close,
.toast-header.text-bg-warning .btn-close,
.toast-header.text-bg-info .btn-close,
.toast-header.text-bg-dark .btn-close,
.toast.bg-secondary .btn-close,
.toast.bg-danger .btn-close,
.toast.bg-warning .btn-close,
.toast.bg-info .btn-close,
.toast.bg-dark .btn-close,
.toast.bg-tertiary .btn-close,
.toast.text-bg-secondary .btn-close,
.toast.text-bg-danger .btn-close,
.toast.text-bg-warning .btn-close,
.toast.text-bg-info .btn-close,
.toast.text-bg-dark .btn-close {
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* Light/teal backgrounds: keep dark close icon for contrast. */
.alert-fill.alert-primary .btn-close,
.alert-fill.alert-success .btn-close,
.modal-header.bg-primary .btn-close,
.modal-header.bg-success .btn-close,
.modal-header.text-bg-primary .btn-close,
.modal-header.text-bg-success .btn-close,
.offcanvas-header.bg-primary .btn-close,
.offcanvas-header.bg-success .btn-close,
.offcanvas-header.text-bg-primary .btn-close,
.offcanvas-header.text-bg-success .btn-close,
.offcanvas.bg-primary .offcanvas-header .btn-close,
.offcanvas.bg-success .offcanvas-header .btn-close,
.toast-header.bg-primary .btn-close,
.toast-header.bg-success .btn-close,
.toast-header.text-bg-primary .btn-close,
.toast-header.text-bg-success .btn-close,
.toast.bg-primary .btn-close,
.toast.bg-success .btn-close,
.toast.text-bg-primary .btn-close,
.toast.text-bg-success .btn-close {
    --bs-btn-close-filter: none;
}

/* Legacy .close parity for any remaining Bootstrap 4 markup. */
.alert-fill.alert-secondary .close,
.alert-fill.alert-danger .close,
.alert-fill.alert-warning .close,
.alert-fill.alert-info .close,
.alert-fill.alert-dark .close,
.alert-fill.alert-gray .close,
.modal-header.bg-secondary .close,
.modal-header.bg-danger .close,
.modal-header.bg-warning .close,
.modal-header.bg-info .close,
.modal-header.bg-dark .close,
.modal-header.bg-tertiary .close,
.modal-header.text-bg-secondary .close,
.modal-header.text-bg-danger .close,
.modal-header.text-bg-warning .close,
.modal-header.text-bg-info .close,
.modal-header.text-bg-dark .close,
.offcanvas-header.bg-secondary .close,
.offcanvas-header.bg-danger .close,
.offcanvas-header.bg-warning .close,
.offcanvas-header.bg-info .close,
.offcanvas-header.bg-dark .close,
.offcanvas-header.bg-tertiary .close,
.offcanvas-header.text-bg-secondary .close,
.offcanvas-header.text-bg-danger .close,
.offcanvas-header.text-bg-warning .close,
.offcanvas-header.text-bg-info .close,
.offcanvas-header.text-bg-dark .close,
.toast-header.bg-secondary .close,
.toast-header.bg-danger .close,
.toast-header.bg-warning .close,
.toast-header.bg-info .close,
.toast-header.bg-dark .close,
.toast-header.bg-tertiary .close,
.toast-header.text-bg-secondary .close,
.toast-header.text-bg-danger .close,
.toast-header.text-bg-warning .close,
.toast-header.text-bg-info .close,
.toast-header.text-bg-dark .close,
.toast.bg-secondary .close,
.toast.bg-danger .close,
.toast.bg-warning .close,
.toast.bg-info .close,
.toast.bg-dark .close,
.toast.bg-tertiary .close,
.toast.text-bg-secondary .close,
.toast.text-bg-danger .close,
.toast.text-bg-warning .close,
.toast.text-bg-info .close,
.toast.text-bg-dark .close {
    color: #fff;
    text-shadow: none;
    opacity: 0.8;
}

.alert-fill.alert-primary .close,
.alert-fill.alert-success .close,
.modal-header.bg-primary .close,
.modal-header.bg-success .close,
.modal-header.text-bg-primary .close,
.modal-header.text-bg-success .close,
.offcanvas-header.bg-primary .close,
.offcanvas-header.bg-success .close,
.offcanvas-header.text-bg-primary .close,
.offcanvas-header.text-bg-success .close,
.toast-header.bg-primary .close,
.toast-header.bg-success .close,
.toast-header.text-bg-primary .close,
.toast-header.text-bg-success .close,
.toast.bg-primary .close,
.toast.bg-success .close,
.toast.text-bg-primary .close,
.toast.text-bg-success .close {
    color: var(--nnuh-ink);
    text-shadow: none;
    opacity: 0.8;
}

.alert-pro.alert-success {
    border-color: var(--nnuh-success);
}

.alert-pro.alert-success > .icon {
    color: var(--nnuh-success);
}

.alert-pro.alert-danger {
    border-color: var(--nnuh-danger);
}

.alert-pro.alert-danger > .icon {
    color: var(--nnuh-danger);
}

.alert-pro.alert-warning {
    border-color: var(--nnuh-warning);
}

.alert-pro.alert-warning > .icon {
    color: var(--nnuh-warning);
}

.progress-bar.bg-success {
    background-color: var(--nnuh-success) !important;
}

.progress-bar.bg-danger {
    background-color: var(--nnuh-danger) !important;
}

.progress-bar.bg-warning {
    background-color: var(--nnuh-warning) !important;
}

.icon[class*=bg-success-dim] {
    color: var(--nnuh-success);
}

.icon[class*=bg-danger-dim] {
    color: var(--nnuh-danger);
}

.nk-modal-icon.bg-success {
    background-color: var(--nnuh-success) !important;
}

.nk-modal-icon.bg-danger {
    background-color: var(--nnuh-danger) !important;
}

/* Dark Mode parity for DashLite high-specificity semantic classes */
.dark-mode .badge-dim.bg-success,
[data-bs-theme="dark"] .badge-dim.bg-success {
    color: #fff !important;
    background-color: var(--nnuh-success) !important;
    border-color: var(--nnuh-success);
}

.dark-mode .badge-dim.bg-danger,
[data-bs-theme="dark"] .badge-dim.bg-danger {
    color: var(--nnuh-danger);
    background-color: var(--nnuh-danger-subtle) !important;
    border-color: var(--nnuh-danger-subtle);
}

.dark-mode .badge-dim.bg-warning,
[data-bs-theme="dark"] .badge-dim.bg-warning {
    color: #fff !important;
    background-color: var(--nnuh-warning) !important;
    border-color: var(--nnuh-warning);
}

.dark-mode .badge-dim.bg-outline-success,
[data-bs-theme="dark"] .badge-dim.bg-outline-success {
    color: var(--nnuh-success);
    background-color: var(--nnuh-success-subtle);
    border-color: var(--nnuh-success-border-subtle);
}

.dark-mode .badge-dim.bg-outline-danger,
[data-bs-theme="dark"] .badge-dim.bg-outline-danger {
    color: var(--nnuh-danger);
    background-color: var(--nnuh-danger-subtle);
    border-color: var(--nnuh-danger-border-subtle);
}

.dark-mode .btn-dim.btn-success,
[data-bs-theme="dark"] .btn-dim.btn-success {
    color: var(--nnuh-success);
}

.dark-mode .btn-dim.btn-success:not(:disabled):not(.disabled):hover,
[data-bs-theme="dark"] .btn-dim.btn-success:not(:disabled):not(.disabled):hover {
    color: #fff;
    background-color: var(--nnuh-success);
    border-color: var(--nnuh-success);
}

.dark-mode .btn-dim.btn-danger,
[data-bs-theme="dark"] .btn-dim.btn-danger {
    color: var(--nnuh-danger);
}

.dark-mode .btn-dim.btn-danger:not(:disabled):not(.disabled):hover,
[data-bs-theme="dark"] .btn-dim.btn-danger:not(:disabled):not(.disabled):hover {
    color: #fff;
    background-color: var(--nnuh-danger);
    border-color: var(--nnuh-danger);
}

.dark-mode .btn-dim.btn-warning,
[data-bs-theme="dark"] .btn-dim.btn-warning {
    color: var(--nnuh-warning);
}

.dark-mode .btn-dim.btn-warning:not(:disabled):not(.disabled):hover,
[data-bs-theme="dark"] .btn-dim.btn-warning:not(:disabled):not(.disabled):hover {
    color: #fff;
    background-color: var(--nnuh-warning);
    border-color: var(--nnuh-warning);
}

.dark-mode .alert-fill.alert-success,
[data-bs-theme="dark"] .alert-fill.alert-success {
    color: var(--nnuh-ink);
    background: var(--nnuh-success);
}

.dark-mode .alert-fill.alert-danger,
[data-bs-theme="dark"] .alert-fill.alert-danger {
    color: #fff;
    background: var(--nnuh-danger);
}

.dark-mode .alert-fill.alert-warning,
[data-bs-theme="dark"] .alert-fill.alert-warning {
    color: #fff;
    background: var(--nnuh-warning);
}

/* ========== Course Wizard Theme Overrides ========== */
#course-wizard .nk-stepper-nav > * .step-item:before,
#course-wizard .nk-stepper-nav > * .step-item:after {
    color: var(--nnuh-primary);
    background: rgba(var(--nnuh-primary-rgb), 0.16);
}

#course-wizard .nk-stepper-nav > *.current .step-item:before,
#course-wizard .nk-stepper-nav > *.current .step-item:after {
    color: #fff;
    background: var(--nnuh-primary);
}

#course-wizard .nk-stepper-nav-s2 > *.current .step-item {
    border-left-color: var(--nnuh-primary);
}

#course-wizard .unit-type-card,
#addUnitModal .unit-type-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--nnuh-card-border);
    border-radius: 6px;
    background: #fff;
    color: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#course-wizard .unit-type-card .icon,
#addUnitModal .unit-type-card .icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}

#course-wizard .unit-type-card span,
#addUnitModal .unit-type-card span {
    color: var(--nnuh-ink);
    font-weight: 500;
    line-height: 1.2;
}

#course-wizard .unit-type-card:hover,
#addUnitModal .unit-type-card:hover {
    border-color: var(--nnuh-primary);
}

#course-wizard .unit-type-card.selected,
#addUnitModal .unit-type-card.selected {
    border-color: var(--nnuh-primary);
    background: var(--nnuh-primary-subtle);
    box-shadow: inset 0 0 0 1px rgba(var(--nnuh-primary-rgb), 0.18);
}

#course-wizard .sortable-units {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#course-wizard .unit-block {
    border: 1px solid var(--nnuh-card-border);
    border-radius: 8px;
    background: #fff;
}

#course-wizard .unit-block-inner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
}

#course-wizard .unit-drag-handle {
    color: rgba(var(--nnuh-ink-rgb), 0.5);
    cursor: grab;
    line-height: 1;
}

#course-wizard .unit-drag-handle:active {
    cursor: grabbing;
}

#course-wizard .unit-icon {
    width: 1.5rem;
    text-align: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

#course-wizard .unit-content {
    min-width: 0;
}

#course-wizard .unit-title {
    color: var(--nnuh-ink);
    font-weight: 600;
    line-height: 1.35;
}

#course-wizard .unit-meta {
    margin-top: 0.1rem;
}

#course-wizard .unit-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
}

#course-wizard .unit-actions .btn {
    width: 32px;
    height: 32px;
}

#course-wizard .sortable-ghost {
    opacity: 0.55;
    background: var(--nnuh-primary-subtle);
}

#course-wizard .wz-review-actions {
    max-width: 760px;
    margin: 0 auto;
}

#course-wizard .wz-review-action-buttons .btn {
    min-width: 180px;
}

#course-wizard .wz-stepper-pagination {
    margin-top: 0.5rem;
    padding-top: 1.25rem;
}

.nk-stepper-s1[data-step-current=last] .stepper-pagination {
    justify-content: space-between;
}

#editUnitModal .upload-zone {
    border: 1px dashed var(--nnuh-card-border);
    border-radius: 8px;
    background: #fff;
    min-height: 150px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#editUnitModal .upload-zone:hover,
#editUnitModal .upload-zone.dragover {
    border-color: var(--nnuh-primary);
    background: var(--nnuh-primary-subtle);
}

#editUnitModal .upload-zone .dz-message {
    margin: 0;
}

@media (max-width: 767.98px) {
    #course-wizard .unit-block-inner {
        flex-wrap: wrap;
    }

    #course-wizard .unit-actions {
        width: 100%;
        justify-content: flex-end;
    }

    #course-wizard .wz-review-action-buttons .btn {
        min-width: 0;
        width: 100%;
    }
}

/* ========== Utility Helpers (replacing static inline styles) ========== */
.lms-hidden-initial {
    display: none;
}

.cursor-pointer {
    cursor: pointer !important;
}

.lms-transition-fast {
    transition: all 0.2s ease;
}

.w-32px {
    width: 32px !important;
}

.w-0 {
    width: 0 !important;
}

.w-50px {
    width: 50px !important;
}

.w-fit-content {
    width: fit-content !important;
}

.h-3px {
    height: 3px !important;
}

.h-8px {
    height: 8px !important;
}

.h-120px {
    height: 120px !important;
}

.h-max-120px {
    max-height: 120px !important;
}

.fs-3rem {
    font-size: 3rem !important;
}

.fs-4rem {
    font-size: 4rem !important;
}

/* ========== Learner Experience Alignment ========== */
.learner-ui .learner-kpi-card,
.learner-ui .card.course-catalog-card,
.learner-ui .card.course-card-learner {
    border-color: var(--nnuh-card-border);
}

.learner-ui .learner-kpi-card .amount {
    color: var(--nnuh-ink);
}

.learner-ui .link-list-opt a.active {
    color: var(--nnuh-ink);
    background: var(--nnuh-primary-subtle);
    border-radius: 6px;
}

.learner-ui .link-list-opt a.active .icon {
    color: var(--nnuh-primary);
}

.learner-ui .course-catalog-card,
.learner-ui .course-card-learner {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.learner-ui .course-catalog-card .card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.learner-ui .course-catalog-media {
    display: block;
    height: 138px;
    border-bottom: 1px solid var(--nnuh-card-border, #dbdfea);
    background: rgba(var(--nnuh-primary-rgb), 0.07);
    overflow: hidden;
}

.learner-ui .course-catalog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.learner-ui .course-catalog-meta {
    min-height: 1.4rem;
}

.learner-ui .course-catalog-meta span {
    white-space: nowrap;
}

.learner-ui .course-catalog-actions .btn {
    white-space: nowrap;
}

.learner-ui .course-catalog-card:hover,
.learner-ui .course-card-learner:hover {
    transform: translateY(-2px);
    border-color: var(--nnuh-primary-border-subtle);
    box-shadow: 0 8px 20px rgba(var(--nnuh-primary-rgb), 0.12);
}

.learner-ui .course-card-category.badge {
    border-radius: 999px;
}

.learner-ui .accordion-s2 .accordion-item {
    border: 1px solid var(--nnuh-card-border);
    border-radius: 8px;
    overflow: hidden;
}

.learner-ui .accordion-s2 .accordion-head {
    background: #fff;
}

.learner-ui .accordion-s2 .accordion-head:not(.collapsed) {
    background: var(--nnuh-primary-subtle);
}

.learner-ui .accordion-s2 .accordion-head:not(.collapsed) .title {
    color: var(--nnuh-ink);
}

/* ========== Leaderboard ========== */
.leaderboard-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
}

.leaderboard-rank-badge-gold {
    background: rgba(255, 193, 7, 0.15);
    color: #c8a000;
    border: 2px solid #ffc107;
}

.leaderboard-rank-badge-silver {
    background: rgba(143, 155, 175, 0.15);
    color: #6c757d;
    border: 2px solid #adb5bd;
}

.leaderboard-rank-badge-bronze {
    background: rgba(205, 127, 50, 0.15);
    color: #996633;
    border: 2px solid #cd7f32;
}

.leaderboard-rank-badge-you {
    background: rgba(101, 118, 255, 0.15);
    color: #6576ff;
    border: 2px solid #6576ff;
    font-size: 15px;
    width: 42px;
    height: 42px;
}

.leaderboard-points-value {
    color: #c8a000;
    font-size: 1.05rem;
    font-weight: 700;
}

.leaderboard-points-icon {
    font-size: 0.85rem;
}

.leaderboard-empty-icon {
    font-size: 3rem;
    color: #dbdfea;
}

.leaderboard-avatar-gold {
    background: rgba(200, 160, 0, 0.15) !important;
    color: #c8a000 !important;
}

.leaderboard-avatar-silver {
    background: rgba(143, 155, 175, 0.2) !important;
    color: #6c757d !important;
}

.leaderboard-avatar-bronze {
    background: rgba(205, 127, 50, 0.15) !important;
    color: #996633 !important;
}

.leaderboard-filter-select {
    min-width: 180px;
}

/* ========== Notification bell badge ========== */
.icon-status-info::after {
    background: #980065;
}

/* ========== Missing utility widths ========== */
.w-60px {
    width: 60px;
}

/* ========== Header notification dropdown POST form ========== */
/* The notification item is a <button> wrapped in a <form> so each click
   submits a CSRF-protected mark-read POST. Browser defaults (centered text,
   inline-block, button background/padding) break the theme's flex row layout,
   so we reset the button to behave exactly like the theme's <div> variant. */
.nk-notification-item-form {
    margin: 0;
}
.nk-notification-item-button {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: 0;
    padding: 1.25rem 1.75rem;
    text-align: start;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.nk-notification-item-button .nk-notification-content {
    flex: 1 1 auto;
    min-width: 0;
}
.nk-notification-item-button .nk-notification-text {
    white-space: normal;
    word-break: break-word;
}
.nk-notification-item-button:hover {
    background-color: #f5f6fa;
}
.nk-notification-item-button:focus {
    outline: 0;
}

/* ========== Sidebar logout (POST form) ==========
   Logout is a CSRF-protected POST, so the menu "link" is actually a
   <button> wrapped in a <form>. Reset both so the row picks up the
   theme's .nk-menu-link padding/hover/focus styles identically to the
   surrounding <a class="nk-menu-link"> rows. */
.nk-menu-link-form {
    margin: 0;
    padding: 0;
}
.nk-menu-link-button {
    width: 100%;
    background: none;
    border: 0;
    text-align: start;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.nk-menu-link-button:focus {
    outline: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Dashlite defines .gap-N twice: once as Bootstrap flex-gap utilities
   (gap: …) and later as legacy block spacers (height: …). The height
   rule wins in the cascade, so any `d-flex gap-N` container collapses
   to the spacer height and its children overlap whatever follows.
   Restore auto height whenever gap-N sits on a flex container; the
   standalone <div class="gap gap-N"> spacers keep their height. */
.d-flex.gap-1, .d-flex.gap-2, .d-flex.gap-3, .d-flex.gap-4, .d-flex.gap-5,
.d-inline-flex.gap-1, .d-inline-flex.gap-2, .d-inline-flex.gap-3,
.d-inline-flex.gap-4, .d-inline-flex.gap-5,
.d-sm-flex.gap-1, .d-sm-flex.gap-2, .d-sm-flex.gap-3, .d-sm-flex.gap-4,
.d-md-flex.gap-1, .d-md-flex.gap-2, .d-md-flex.gap-3, .d-md-flex.gap-4,
.d-lg-flex.gap-1, .d-lg-flex.gap-2, .d-lg-flex.gap-3, .d-lg-flex.gap-4 {
    height: auto;
}