/* Phase 1: shared visual foundation. Loaded after existing theme/CRM styles.
 * Keep framework spacing utilities and page-specific layouts authoritative.
 * mc-* tokens are namespaced to avoid Bootstrap/Tailwind collisions.
 */
:root {
    --mc-bg: #f6f7f9;
    --mc-surface: #ffffff;
    --mc-surface-secondary: #f9fafb;
    --mc-text-primary: #171a2b;
    --mc-text-secondary: #667085;
    /* Accessible helper text on white; #98a2b3 is reserved for decoration. */
    --mc-text-muted: #667085;
    --mc-border: #e7e9ee;
    --mc-control-border: #858d9d;
    --mc-brand: var(--mc-yellow, #fff63b);
    --mc-brand-dark: var(--mc-yellow-dark, #e6de20);
    --mc-focus: #344054;
    --mc-sidebar: #111111;
    --mc-sidebar-hover: #1a1a1a;
    --mc-sidebar-active: #242812;
    --mc-space-1: 4px;
    --mc-space-2: 8px;
    --mc-space-3: 12px;
    --mc-space-4: 16px;
    --mc-space-5: 24px;
    --mc-space-6: 32px;
    --mc-radius-control: 8px;
    --mc-radius-card: 12px;
    --mc-radius-container: 16px;
    --mc-success: #187044;
    --mc-success-bg: #edf8f1;
    --mc-info: #175cd3;
    --mc-info-bg: #eff6ff;
    --mc-warning: #854a0e;
    --mc-warning-bg: #fff8e6;
    --mc-error: #b42318;
    --mc-error-bg: #fff1f0;
    --mc-orange: #a3430b;
    --mc-orange-bg: #fff4eb;
    --mc-purple: #6941c6;
    --mc-purple-bg: #f5f0ff;
    --mc-neutral: #475467;
    --mc-neutral-bg: #f2f4f7;
}

[data-bs-theme="dark"] {
    --mc-bg: #111318;
    --mc-surface: #1b1e25;
    --mc-surface-secondary: #232730;
    --mc-text-primary: #f2f4f7;
    --mc-text-secondary: #b8c0cd;
    --mc-text-muted: #b8c0cd;
    --mc-border: #383e49;
    --mc-control-border: #778191;
    --mc-focus: #e4e7ec;
    --mc-success: #86efac;
    --mc-success-bg: #163526;
    --mc-info: #93c5fd;
    --mc-info-bg: #172f4d;
    --mc-warning: #fcd34d;
    --mc-warning-bg: #3d3019;
    --mc-error: #fda29b;
    --mc-error-bg: #462322;
    --mc-orange: #fdba74;
    --mc-orange-bg: #402b1e;
    --mc-purple: #d8b4fe;
    --mc-purple-bg: #342747;
    --mc-neutral: #d0d5dd;
    --mc-neutral-bg: #303641;
}

body.app-default, body.app-blank {
    background-color: var(--mc-bg) !important;
    color: var(--mc-text-primary);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}

/* Scope Bootstrap controls away from the sidebar; leave Dashboard utilities intact. */
:is(#kt_app_main, .app-blank) .card {
    --bs-card-bg: var(--mc-surface);
    --bs-card-border-color: var(--mc-border);
    --bs-card-border-radius: var(--mc-radius-card);
    background-color: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-card);
    box-shadow: 0 1px 2px rgb(16 24 40 / 3%);
}
:is(#kt_app_main, .app-blank) .card > .card-body { padding: var(--mc-space-5); }
:is(#kt_app_main, .app-blank) .card > .card-header {
    padding: var(--mc-space-4) var(--mc-space-5);
    min-height: 64px;
    border-bottom-color: var(--mc-border);
}
:is(#kt_app_main, .app-blank) .card-title { font-size: 18px; line-height: 1.5; }
#kt_app_main .page-heading { font-size: 24px !important; line-height: 1.4; color: var(--mc-text-primary) !important; }
:is(#kt_app_main, .app-blank) .text-muted { color: var(--mc-text-muted) !important; }
:is(#kt_app_main, .app-blank) .form-label { color: var(--mc-text-primary); font-size: 14px; font-weight: 500; }
:is(#kt_app_main, .app-blank) :is(.form-text, .form-text-hint) { font-size: 13px; line-height: 1.5; color: var(--mc-text-secondary); }
:is(#kt_app_main, .app-blank) :is(.form-control, .form-select, .select2-selection) {
    border-radius: var(--mc-radius-control) !important;
    border-color: var(--mc-control-border);
    color: var(--mc-text-primary);
    font-size: 14px;
    line-height: 1.5;
}
:is(#kt_app_main, .app-blank) :is(.form-control-solid, .form-select-solid) {
    background-color: var(--mc-surface-secondary);
}
:is(#kt_app_main, .app-blank) .form-control::placeholder { color: var(--mc-text-secondary); opacity: 1; }
:is(#kt_app_main, .app-blank) .btn {
    border-radius: var(--mc-radius-control);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}
:is(#kt_app_main, .app-blank) :is(.btn.btn-primary, .btn.btn-mc-signin) {
    background-color: var(--mc-brand) !important;
    border-color: var(--mc-brand-dark) !important;
    color: #171a2b !important;
}
:is(#kt_app_main, .app-blank) :is(.btn.btn-primary, .btn.btn-mc-signin):not(:disabled):not(.disabled):is(:hover, :active, .active) {
    background-color: var(--mc-brand-dark) !important;
    border-color: var(--mc-brand-dark) !important;
}
:is(#kt_app_main, .app-blank) .btn.btn-light-primary:not(.keep-yellow) {
    background-color: var(--mc-surface-secondary) !important;
    border-color: var(--mc-border) !important;
    color: var(--mc-text-primary) !important;
}
:is(#kt_app_main, .app-blank) .btn.btn-light-primary:not(.keep-yellow):hover {
    background-color: var(--mc-neutral-bg) !important;
}
:is(#kt_app_main, .app-blank) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--mc-focus) !important;
    outline-offset: 3px;
}
:is(#kt_app_main, .app-blank) :is(.form-control, .form-select):focus {
    border-color: var(--mc-focus) !important;
    /* A single border avoids stacking the theme shadow and keyboard outline. */
    box-shadow: none !important;
    outline: none !important;
}
:is(#kt_app_main, .app-blank) a.text-primary:hover { color: var(--mc-text-primary) !important; text-decoration: underline; }

/* Status labels always include text; never convey financial state using brand. */
.mc-status-badge {
    --mc-status-color: var(--mc-neutral);
    --mc-status-bg: var(--mc-neutral-bg);
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: var(--mc-status-bg);
    color: var(--mc-status-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    vertical-align: middle;
}
.mc-status-badge::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.mc-status-badge--success { --mc-status-color: var(--mc-success); --mc-status-bg: var(--mc-success-bg); }
.mc-status-badge--info { --mc-status-color: var(--mc-info); --mc-status-bg: var(--mc-info-bg); }
.mc-status-badge--warning { --mc-status-color: var(--mc-warning); --mc-status-bg: var(--mc-warning-bg); }
.mc-status-badge--error { --mc-status-color: var(--mc-error); --mc-status-bg: var(--mc-error-bg); }
.mc-status-badge--orange { --mc-status-color: var(--mc-orange); --mc-status-bg: var(--mc-orange-bg); }
.mc-status-badge--purple { --mc-status-color: var(--mc-purple); --mc-status-bg: var(--mc-purple-bg); }
@media (prefers-reduced-motion: reduce) {
    div.dataTables_wrapper .dataTables_processing::after { animation: none; }
}

/* Override legacy dark theme's low-contrast placeholder/helper colors. */
[data-bs-theme="dark"] :is(#kt_app_main, .app-blank) .form-control::placeholder {
    color: var(--mc-text-secondary) !important;
}
[data-bs-theme="dark"] :is(#kt_app_main, .app-blank) :is(.form-control, .form-select) {
    border-color: var(--mc-control-border) !important;
}
[data-bs-theme="dark"] :is(#kt_app_main, .app-blank) :is(.form-control, .form-select):focus {
    border-color: var(--mc-focus) !important;
}

:is(#kt_app_main, .app-blank) .form-check-input:not(:checked) {
    border: 1px solid var(--mc-control-border);
}
:is(#kt_app_main, .app-blank) .btn:disabled {
    opacity: .55;
}

/* Restrained brand: neutral working surfaces, yellow reserved for primary actions.
 * Visual shell adjustments only; menu structure and toggle behavior stay intact.
 */
#kt_app_sidebar.app-sidebar { background-color: var(--mc-sidebar) !important; }
#kt_app_sidebar .app-sidebar-logo { border-bottom-color: #303030 !important; }
#kt_app_sidebar :is(.menu-section, .menu-heading) { color: #a3a3a3 !important; }
#kt_app_sidebar .menu-link,
#kt_app_sidebar .menu-link .menu-title { color: #d4d4d4 !important; }
#kt_app_sidebar .menu-link:hover { background-color: var(--mc-sidebar-hover) !important; }
#kt_app_sidebar .menu-link.active {
    background-color: var(--mc-sidebar-active) !important;
    box-shadow: inset 3px 0 0 var(--mc-brand);
}
#kt_app_sidebar .menu-link.active,
#kt_app_sidebar .menu-link.active .menu-title { color: #ffffff !important; }
#kt_app_sidebar .menu-link.active .menu-icon { color: var(--mc-brand) !important; }
#kt_app_sidebar .menu-link:focus-visible { outline: 2px solid var(--mc-brand); outline-offset: -2px; }
#kt_app_sidebar .app-sidebar-toggle { border-color: #525252 !important; }

:is(#kt_app_main, .app-blank) .btn.btn-light {
    background-color: var(--mc-surface-secondary) !important;
    border-color: var(--mc-border) !important;
    color: var(--mc-text-primary) !important;
}
:is(#kt_app_main, .app-blank) .btn.btn-light:not(:disabled):not(.disabled):hover {
    background-color: var(--mc-neutral-bg) !important;
}

/* Toolbar Back: visibly grey so it does not blend into the white page chrome. */
#kt_app_main .btn.mc-btn-back {
    background-color: #e8eaef !important;
    border: 1px solid #d0d5dd !important;
    color: var(--mc-text-primary) !important;
    font-weight: 500;
}
#kt_app_main .btn.mc-btn-back:hover {
    background-color: #dce0e7 !important;
    border-color: #c5cbd6 !important;
    color: var(--mc-text-primary) !important;
}
[data-bs-theme="dark"] #kt_app_main .btn.mc-btn-back {
    background-color: var(--mc-neutral-bg) !important;
    border-color: var(--mc-border) !important;
    color: var(--mc-text-primary) !important;
}
[data-bs-theme="dark"] #kt_app_main .btn.mc-btn-back:hover {
    background-color: #3a414d !important;
}

/* Preset filter action (e.g. Last month): outline, distinct from Clear and Search. */
#kt_app_main .btn.mc-btn-preset {
    background-color: var(--mc-surface) !important;
    border: 1px solid #98a2b3 !important;
    color: var(--mc-text-primary) !important;
    font-weight: 500;
}
#kt_app_main .btn.mc-btn-preset:hover {
    background-color: var(--mc-surface-secondary) !important;
    border-color: #667085 !important;
    color: var(--mc-text-primary) !important;
}
[data-bs-theme="dark"] #kt_app_main .btn.mc-btn-preset {
    background-color: var(--mc-surface) !important;
    border-color: var(--mc-control-border) !important;
    color: var(--mc-text-primary) !important;
}
[data-bs-theme="dark"] #kt_app_main .btn.mc-btn-preset:hover {
    background-color: var(--mc-neutral-bg) !important;
}
:is(#kt_app_main, .app-blank) :is(.text-primary, .link-primary) {
    color: var(--mc-text-primary) !important;
}
:is(#kt_app_main, .app-blank) :is(.badge-primary, .badge-light-primary, .badge.bg-primary) {
    background-color: var(--mc-neutral-bg) !important;
    color: var(--mc-neutral) !important;
}
:is(#kt_app_main, .app-blank) .alert-primary {
    background-color: var(--mc-info-bg) !important;
    border-color: var(--mc-info) !important;
    color: var(--mc-info) !important;
}
:is(#kt_app_main, .app-blank) .page-item.active .page-link {
    background-color: var(--mc-text-primary) !important;
    border-color: var(--mc-text-primary) !important;
    color: var(--mc-surface) !important;
}
:is(#kt_app_main, .app-blank) .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: var(--mc-neutral-bg) !important;
    color: var(--mc-text-primary) !important;
}
/* Select2 dropdowns are appended to body, so they intentionally use a global scope. */
body :is(.select2-container--bootstrap5) .select2-results__option--highlighted {
    background-color: var(--mc-neutral-bg) !important;
    color: var(--mc-text-primary) !important;
}
body :is(.select2-container--bootstrap5) .select2-results__option--selected {
    background-color: var(--mc-text-primary) !important;
    color: var(--mc-surface) !important;
}
:is(#kt_app_main, .app-blank) .select2-container--focus .select2-selection,
:is(#kt_app_main, .app-blank) .select2-container--open .select2-selection {
    border-color: var(--mc-focus) !important;
    box-shadow: none !important;
}
:is(#kt_app_main, .app-blank) .form-check-input:checked {
    background-color: var(--mc-brand) !important;
    border-color: var(--mc-brand-dark) !important;
}
/* Preserve clear validation feedback when controls receive focus. */
:root :is(#kt_app_main, .app-blank) :is(.form-control, .form-select).is-invalid {
    border-color: var(--mc-error) !important;
}
:root :is(#kt_app_main, .app-blank) :is(.form-control, .form-select).is-valid {
    border-color: var(--mc-success) !important;
}

/* Login password visibility control; native button supports Enter and Space. */
.mc-password-field { position: relative; }
.mc-password-field .form-control { padding-inline-end: 52px; }
.mc-password-toggle {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mc-text-secondary);
    cursor: pointer;
}
.mc-password-toggle[hidden] { display: none; }
.mc-password-toggle:hover { background: var(--mc-neutral-bg); color: var(--mc-text-primary); }

/* Superadmin-only technical logic: tiny icon, expand on click */
.mc-logic-hint__btn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    opacity: 0.55;
}
.mc-logic-hint__btn:hover,
.mc-logic-hint__btn[aria-expanded="true"] {
    opacity: 1;
}
.mc-logic-hint__body {
    display: inline-block;
    max-width: min(100%, 720px);
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.04);
    line-height: 1.45;
    word-break: break-word;
}

/* Quiet account identity: initials remain recognizable without brand emphasis. */
#kt_header_user_menu_toggle .mc-user-avatar {
    border: 1px solid var(--mc-border);
    border-radius: 10px !important;
    background-color: #f2f4f7;
}
#kt_header_user_menu_toggle .mc-user-summary > .d-flex { min-width: 0; }
#kt_header_user_menu_toggle .mc-user-summary { padding-top: 8px; padding-bottom: 12px; }
#kt_header_user_menu_toggle .mc-user-summary .fw-bold { font-size: 15px !important; overflow-wrap: anywhere; }
#kt_header_user_menu_toggle .mc-user-email {
    color: var(--mc-text-secondary) !important;
    font-size: 12px !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
}