.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);
}


/*
 * Employee profile identity header, lifted verbatim out of the per-page
 * <style> block in employee/_employee-summary.blade.php.
 */
.employee-identity {
    position: relative;
    overflow: hidden;
}

.employee-identity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--bs-primary);
}

.employee-identity .employee-initials {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
}

.employee-identity .employee-meta-dot::before {
    content: "•";
    margin: 0 .6rem;
    color: var(--bs-gray-400);
}

.employee-identity .employee-fact {
    padding: 0 1.25rem;
}

.employee-identity .employee-fact + .employee-fact {
    border-left: 1px solid var(--bs-gray-200);
}

.employee-identity .employee-fact:first-child {
    padding-left: 0;
}

@media (max-width: 991.98px) {
    .employee-identity .employee-fact {
        padding: 0 0 0 1rem;
    }

    .employee-identity .employee-fact:nth-child(2n + 1) {
        padding-left: 0;
        border-left: 0;
    }
}

.employee-identity .employee-copy {
    border: 0;
    background: transparent;
    padding: 0 0 0 .35rem;
    line-height: 1;
    color: var(--bs-gray-500);
}

.employee-identity .employee-copy:hover {
    color: var(--bs-primary);
}


/*
 * Non-production environment banding. These three colours previously lived in
 * the $environment array in the header partial and were emitted as inline
 * styles; the partial now only picks a slug, so the colours live here alone.
 */
.app-header--env-sandbox {
    border-top: 6px solid #0000ff !important;
}

.app-header--env-staging {
    border-top: 6px solid #8950fc !important;
}

.app-header--env-uat {
    border-top: 6px solid #ffa500 !important;
}

.badge-env-sandbox {
    background-color: #0000ff;
}

.badge-env-staging {
    background-color: #8950fc;
}

.badge-env-uat {
    background-color: #ffa500;
}


/*
 * Notifications dropdown header artwork. As an inline style the URL was
 * document-relative, so it 404'd on any nested route such as
 * /employees/view/{id}; resolved against this stylesheet it is stable.
 */
.menu-header-bg {
    background-image: url("../media/misc/menu-header-bg.jpg");
}


/*
 * Bootstrap's .text-break is word-wrap: break-word, which will not split a
 * long unbroken address, so the account menu needs its own utility.
 */
.text-break-all {
    word-break: break-all;
}