/* EngageX brand foundation. Original artwork is retained; the approved dark
   treatment overlays only the Concators lettering using its exact alpha mask.
   Entry surfaces are light; existing custom product content retains its theme. */
:root {
    --vx-brand-blue: #0052cc;
    --vx-brand-navy: #003366;
    --vx-brand-orange: #ff8a00;
}

.vx-brand-identity {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    max-width: 100%;
    text-align: left;
}
.vx-brand-copy { display: flex; flex-direction: column; min-width: 0; }
.vx-brand-name {
    font-size: 20px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
.vx-brand-x { color: var(--vx-brand-orange); }
.vx-brand-product { font-size: 12px; font-weight: 500; line-height: 1.5; color: inherit; opacity: .85; }
.vx-brand-tenant-logo { display: block; max-width: 100px; max-height: 36px; width: auto; height: auto; object-fit: contain; }
.vx-brand-identity--wordmark { flex-direction: column; align-items: flex-start; gap: 2px; }
.vx-brand-identity--wordmark .vx-brand-tenant-logo { max-width: 190px; max-height: 36px; }
.vx-navbar .vx-brand-product { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-company-endorsement { display: flex; align-items: center; gap: .6rem; max-width: 100%; }
.vx-company-caption { font-size: .8rem; font-weight: 500; color: inherit; }
.vx-company-logo-surface { display: inline-flex; min-width: 0; }
.vx-company-logo { display: block; width: 192px; max-width: 100%; height: auto; }
.vx-company-wordmark { display: inline-flex; position: relative; max-width: 100%; flex-shrink: 0; }
.vx-company-wordmark-ink {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #fff;
    /* Boundaries lie in the transparent gaps around Concators in the 1169px asset. */
    clip-path: inset(0 28.6% 0 27.5%);
    -webkit-mask: url('../brand/concatorsvertex-company.png') center / 100% 100% no-repeat;
    mask: url('../brand/concatorsvertex-company.png') center / 100% 100% no-repeat;
}
:is(.vx-navbar, .vx-sidebar, .vx-login-left, .vx-hub-nav) .vx-company-wordmark-ink { display: block; }

.vx-navbar { background: var(--vx-brand-navy); }
.vx-navbar .navbar-brand { min-width: 0; max-width: 250px; flex: 0 1 auto; margin-right: 1.25rem; }
.vx-navbar .vx-brand-name { font-size: 16px; }
.vx-navbar .vx-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-navbar .vx-brand-identity { width: 100%; }
.vx-navbar .vx-brand-tenant-logo { flex-shrink: 0; }
.vx-product-switcher { position: relative; flex-shrink: 0; }
.vx-navbar .vx-product-switcher { display: block !important; }
.vx-product-switcher-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 36px; min-height: 36px; padding: 6px 10px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff;
    font-size: 12px; cursor: pointer;
}
.vx-product-switcher-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vx-product-switcher-menu { padding: 12px; min-width: 172px; }
.vx-product-switcher-menu { max-width: calc(100vw - 24px); max-height: 75vh; overflow-y: auto; }
.vx-navbar .vx-product-switcher-menu { width: 280px; min-width: 0; padding: 8px; left: auto; right: 0; }
.vx-product-unavailable { color: var(--vx-text-muted); cursor: default; white-space: normal; }
.vx-product-unavailable small { display: block; font-size: 11px; }
.vx-profile-card { max-width: 640px; padding: 24px; border: 1px solid var(--vx-border); border-radius: 8px; background: var(--vx-surface); font-size: 14px; }
.vx-profile-card h2 { font-size: 20px; }
.vx-profile-card dt { margin-top: 16px; color: var(--vx-text-muted); }
.vx-profile-card dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.vx-error-summary { margin-bottom: 20px; font-size: 14px; overflow-wrap: anywhere; }
.vx-error-summary a { color: inherit; text-decoration: underline; }
.vx-field-error { color: #ffadb5; margin-top: 6px; font-size: 13px; }
.vx-form :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid #e55365; }
.vx-brand-entry .vx-field-error { color: #a51b2b; }
.vx-form :is(input, select, textarea) { max-width: 100%; }
.vx-form { font-size: 14px; }
.vx-form .form-label { display: block; font-size: 14px; margin-bottom: 6px; }
.vx-form :is(.form-control, .form-select) { display: block; width: 100%; font-size: 14px; min-height: 40px; }
.vx-form .form-select { padding: 8px; color: var(--vx-text); background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: 4px; }
.vx-form .form-text { font-size: 12px; margin-top: 6px; }
.vx-form .form-check { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.vx-form .form-check-input { width: 16px; height: 16px; margin: 0; }
.vx-form .form-check-label { margin: 0; }
.vx-form-actions .btn { min-height: 40px; font-size: 14px; }
.vx-search .position-relative { position: relative; }
.vx-search .bi-search.position-absolute { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.vx-search .form-control { padding-left: 36px; font-size: 14px; }
.vx-campaign-panel > .row { margin-left: 0; margin-right: 0; }
.vx-form > .mb-3 { margin-bottom: 20px; }
.vx-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-error-summary:focus, .table-responsive:focus-visible, [data-vx-tabs] [role="tab"]:focus-visible { outline: 3px solid #70b5ff; outline-offset: 3px; }
.vx-product-switcher-menu.show { display: flex; flex-direction: column; gap: 8px; }
.vx-navbar-right .vx-product-switcher-menu .dropdown-item {
    display: flex !important;
    width: auto !important; height: auto !important; min-height: 36px;
    justify-content: flex-start !important; gap: 10px; padding: 8px 10px;
    font-size: 14px !important;
}
.vx-product-switcher-menu .dropdown-item > span { min-width: 0; overflow-wrap: anywhere; }
.vx-sidebar { background: #06294d; }
.vx-sidebar-footer .vx-company-endorsement { padding: .25rem 0 .8rem; color: #e2e8f0; }
.vx-sidebar-footer .vx-company-logo { width: 160px; }
.vx-sidebar--collapsed .vx-company-endorsement { display: none; }

/* The legacy Bootstrap CSS sets html to 10px. Correct only these entry
   surfaces; custom product screens need a separate typography migration. */
.vx-brand-entry-root { font-size: 16px; }
.vx-brand-entry {
    --vx-primary: var(--vx-brand-blue);
    --vx-primary-hover: #003f9e;
    --vx-text: #172b4d;
    --vx-text-muted: #526277;
    --vx-text-light: #526277;
    --vx-text-faint: #526277;
    --vx-border: #d7e0ea;
    --vx-surface: #fff;
    background: #f5f7fb;
    font-family: "Segoe UI", system-ui, sans-serif;
}
.vx-brand-entry .vx-login-left,
.vx-brand-entry .vx-hub-nav { background: var(--vx-brand-navy); }
.vx-brand-entry .vx-login-right { background: #fff; }
.vx-brand-entry .vx-login-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; color: #fff; }
.vx-brand-entry .vx-login-logo .vx-brand-name { font-size: 2rem; }
.vx-brand-entry .vx-login-logo .vx-brand-product { font-size: .9rem; }
.vx-brand-entry .vx-hub-brand { min-width: 0; max-width: 340px; color: #fff; }
.vx-brand-entry .vx-hub-hero { background: #edf3fb; padding-block: 3rem; }
.vx-brand-entry .vx-hub-hero-title { color: var(--vx-brand-navy); }
.vx-brand-entry .vx-hub-hero-eyebrow { color: var(--vx-brand-blue); }
.vx-brand-entry .vx-hub-hero-sub { color: #526277; }
.vx-brand-entry .vx-hub-hero .vx-company-endorsement { justify-content: center; margin-top: 1.5rem; color: #526277; }
.vx-brand-entry .vx-hub-main { background: #f5f7fb; }
.vx-brand-entry .vx-hub-card { box-shadow: 0 2px 10px rgba(0, 51, 102, .04); }
.vx-brand-entry .vx-hub-card--crm .vx-hub-card-icon { color: #0052cc; background: #e9f1ff; }
.vx-brand-entry .vx-hub-card--cms .vx-hub-card-icon { color: #6f42c1; background: #f2ecfc; }
.vx-brand-entry .vx-hub-card--email .vx-hub-card-icon { color: #137a4a; background: #e8f5ed; }
.vx-brand-entry .vx-hub-card--campaign .vx-hub-card-icon { color: #a44800; background: #fff0de; }
.vx-brand-entry .vx-hub-card--soon { opacity: 1; }
.vx-brand-entry .vx-hub-card--disabled { cursor: default; }
.vx-brand-entry .vx-hub-card--disabled:hover { transform: none; }
.vx-brand-entry .vx-hub-card--disabled .vx-hub-card-soon-badge { color: #fff; }
.vx-brand-entry .vx-hub-card--soon .vx-hub-card-soon-badge { background: #e7eef7; color: #334c6b; }
.vx-brand-entry .vx-login-btn,
.vx-brand-entry .vx-hub-signin-btn { background: var(--vx-brand-blue); color: #fff; box-shadow: none; }
.vx-brand-entry .vx-login-btn:hover,
.vx-brand-entry .vx-hub-signin-btn:hover { background: #003f9e; color: #fff; }
.vx-brand-entry .vx-hub-avatar { background: #ff8a00; color: #003366; }
.vx-brand-entry .vx-login-forgot,
.vx-brand-entry .vx-login-register a { color: var(--vx-brand-blue); }
.vx-brand-entry .vx-login-btn:focus-visible,
.vx-brand-entry .vx-hub-signin-btn:focus-visible { outline: 3px solid #0052cc; outline-offset: 3px; }
.vx-brand-mobile { display: none; }

@media (max-width: 991.98px) {
    .vx-navbar .vx-nav-tabs { display: none; }
    .vx-brand-mobile { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; color: #003366; }
    .vx-brand-mobile .vx-brand-name { font-size: 1.65rem; }
    .vx-brand-mobile .vx-company-logo-surface { padding: 0; }
    .vx-brand-mobile .vx-company-logo { width: 192px; }
}
@media (max-width: 575.98px) {
    .vx-navbar .vx-product-switcher-menu { position: fixed; top: 64px; right: 12px; left: auto; }
    .vx-product-switcher-toggle span { display: none; }
    .vx-navbar .navbar-brand { flex: 1 1 auto; max-width: none; margin-right: .5rem; }
    .vx-navbar .vx-brand-name { font-size: 14px; }
    .vx-navbar .vx-brand-product { font-size: 11px; }
    .vx-navbar .vx-brand-tenant-logo { max-width: 55px; max-height: 28px; }
    .vx-brand-entry .vx-hub-brand { flex: 1 1 auto; }
    .vx-brand-entry .vx-hub-nav-user { flex-shrink: 0; }
    .vx-brand-entry .vx-hub-brand .vx-brand-name { font-size: 1rem; }
    .vx-brand-entry .vx-hub-nav-inner { height: auto; min-height: 70px; padding-block: .65rem; }
    .vx-brand-entry .vx-login-form-wrap { padding-top: 4.5rem; }
}

/* Full wordmarks keep their embedded company name readable on narrow screens. */
.vx-navbar .vx-brand-identity--wordmark .vx-brand-tenant-logo { max-width: 138px; max-height: 30px; }
.vx-brand-identity--wordmark .vx-brand-copy { max-width: 100%; }