.tooltip .tooltip-inner {
    max-width: 500px !important;
    min-width: 250px !important;
}

/*
 * Links follow the brand primary. The theme ships a generic blue (#2E7CF6) which reads as
 * a second, competing accent colour on every page that lists links.
 */
:root,
[data-bs-theme="light"] {
    --bs-link-color: #3C3489;
    --bs-link-color-rgb: 60, 52, 137;
    --bs-link-hover-color: #2E285F;
    --bs-link-hover-color-rgb: 46, 40, 95;
}

/*
 * DataTables ships its own unstyled search box and header casing. Bring both in line with
 * the app's solid inputs and uppercase table headers.
 */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 0;
    color: var(--bs-gray-600);
    font-size: .925rem;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
    min-width: 240px;
    padding: .55rem .9rem;
    border: 0;
    border-radius: .625rem;
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
}

.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
    background-color: var(--bs-gray-200);
    outline: 0;
}

table.dataTable thead th {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-gray-500);
}

/*
 * Page toolbar: a white surface with a hairline rule, so the primary colour is spent on
 * emphasis (active states, primary actions) rather than on a full-width band.
 */
#kt_app_toolbar {
    background-color: #ffffff !important;
    color: var(--bs-gray-700) !important;
    border-bottom: 1px solid var(--bs-gray-200);
}

#kt_app_toolbar h1 {
    color: var(--bs-gray-900) !important;
}

/*
 * Module (sub) menu shown in the page toolbar next to the module name.
 * Instance stylesheets override these colours when they repaint the toolbar.
 */
.module-menu-item {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    margin: .25rem .5rem .25rem 0;
    border: 1px solid transparent;
    border-radius: 2rem;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.module-menu-item:hover {
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-900);
}

.module-menu-item.active,
.module-menu-item.active:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #ffffff;
}

.module-menu-divider {
    width: 1px;
    height: 30px;
    background-color: var(--bs-gray-300);
}

/*
 * The dark header layout compiles its active menu state to a hardcoded #400400,
 * which is off-brand. Use a neutral white wash instead.
 */
[data-kt-app-layout=dark-header] .app-header-menu .menu > .menu-item.here > .menu-link,
[data-kt-app-layout=dark-header] .app-header-menu .menu > .menu-item > .menu-link.active {
    background-color: rgba(255, 255, 255, .14);
    color: #ffffff;
}

[data-kt-app-layout=dark-header] .app-header-menu .menu > .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout=dark-header] .app-header-menu .menu > .menu-item > .menu-link.active .menu-title {
    color: #ffffff;
}



.app-activity-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(1px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.app-activity-overlay.show { display: flex; }
.app-activity-overlay .overlay-spinner {
    width: 54px;
    height: 54px;
    border: 5px solid #d9d9e3;
    border-top-color: #2d4bd6;
    border-radius: 50%;
    animation: dashboardSwitcherSpin 0.8s linear infinite;
}
.app-activity-overlay .overlay-text {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}


/*
 * Metronic's --bs-light-inverse (#78829D) on a .btn-light background sits at
 * roughly 3.9:1, under the 4.5:1 AA threshold, so secondary actions such as
 * Cancel read as disabled. Darken the label only, leaving the token alone.
 */
.btn.btn-light,
.btn.btn-light i,
.btn.btn-light .svg-icon {
    color: var(--bs-gray-800);
}

.btn.btn-light:hover:not(.btn-active),
.btn.btn-light:focus:not(.btn-active),
.btn.btn-light:active:not(.btn-active) {
    color: var(--bs-gray-900);
}