/*
 * MEC User Dashboard — CVX adaptive navigation (2.0.4-cvx.7)
 *
 * React/MEC owns routes and expanded state. This file only changes geometry.
 * JS adds either .cvx-nav-horizontal or .cvx-nav-drawer according to the real
 * width available inside the CVX profile, not the browser viewport alone.
 */

/* Shared guards: navigation surfaces must never inherit clipping from the
   legacy vertical dashboard shell. */
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-main-content,
.cvx-mec-ud.cvx-nav-horizontal #mec-ud-dashboard-app,
.cvx-mec-ud.cvx-nav-horizontal #mec-ud-dashboard-app > .col-md-3,
.cvx-mec-ud.cvx-nav-horizontal #mec-ud-sidebar,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-sidebar-drawer,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu-group {
    overflow: visible !important;
}

/* ===========================
   Horizontal / wide mode
   =========================== */
.cvx-mec-ud.cvx-nav-horizontal #mec-ud-dashboard-app.mec-ud-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    border-radius: 0 0 18px 18px !important;
}

.cvx-mec-ud.cvx-nav-horizontal #mec-ud-dashboard-app > .col-md-3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cvx-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 120 !important;
}

.cvx-mec-ud.cvx-nav-horizontal #mec-ud-dashboard-app > .col-md-9 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    float: none !important;
    padding: 24px 26px 30px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-mobile-bar,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-mobile-overlay {
    display: none !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-sidebar-drawer,
.cvx-mec-ud.cvx-nav-horizontal #mec-ud-sidebar {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu-user {
    display: none !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    background: #fff !important;
    border: 0 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a:not(.mec-ud-menu-logout),
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    color: #344054 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 11.25px !important;
    line-height: 1 !important;
    font-weight: 680 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a:not(.mec-ud-menu-logout) > span,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle > span {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    line-height: 1 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a:not(.mec-ud-menu-logout) svg,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a:not(.mec-ud-menu-logout):hover,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle:hover,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle[aria-expanded="true"] {
    color: var(--cvx-blue) !important;
    background: #f5f8fc !important;
    border-color: #e2eaf5 !important;
}

/* Active route / active descendant. JS supplies cvx-has-active as a fallback
   for browsers where :has() is unavailable. */
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a.active,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a[aria-current="page"],
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group.cvx-has-active > .mec-ud-menu-toggle {
    color: var(--cvx-blue) !important;
    background: var(--cvx-blue-50) !important;
    border-color: #cfe0f8 !important;
    font-weight: 760 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a.active::after,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a[aria-current="page"]::after,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group.cvx-has-active > .mec-ud-menu-toggle::after {
    content: "" !important;
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;
    bottom: -7px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--cvx-blue) !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu-toggle .mec-ud-menu-toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 1px !important;
    transition: transform .15s ease !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu-toggle[aria-expanded="true"] > .mec-ud-menu-toggle-icon {
    transform: rotate(90deg) !important;
}

/* React aria-expanded is the source of truth. Inline display from React is
   deliberately normalized so old sidebar CSS cannot suppress the dropdown. */
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    min-width: 220px !important;
    max-width: min(330px, calc(100vw - 30px)) !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow: visible !important;
    white-space: normal !important;
    background: #fff !important;
    border: 1px solid #dfe7f1 !important;
    border-radius: 10px !important;
    box-shadow: 0 7px 20px rgba(16, 24, 40, .075), 0 1px 3px rgba(16, 24, 40, .035) !important;
    z-index: 5000 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle[aria-expanded="true"] + .mec-ud-submenu {
    display: block !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group.cvx-align-right > .mec-ud-submenu {
    left: auto !important;
    right: 0 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu::before {
    content: "" !important;
    position: absolute !important;
    top: -5px !important;
    left: 22px !important;
    width: 9px !important;
    height: 9px !important;
    background: #fff !important;
    border-left: 1px solid #dfe7f1 !important;
    border-top: 1px solid #dfe7f1 !important;
    transform: rotate(45deg) !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group.cvx-align-right > .mec-ud-submenu::before {
    left: auto !important;
    right: 22px !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > a,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > .mec-ud-menu-group > .mec-ud-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 32px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    color: #344054 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 11.25px !important;
    line-height: 1.35 !important;
    font-weight: 620 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > a:hover,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > .mec-ud-menu-group > .mec-ud-menu-toggle:hover {
    color: var(--cvx-blue) !important;
    background: #f5f8fc !important;
    border-color: #e8eef6 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > a.active,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > a[aria-current="page"] {
    color: var(--cvx-blue) !important;
    background: var(--cvx-blue-50) !important;
    border-color: #d8e6f9 !important;
    font-weight: 720 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
}

/* Nested "Participantes" remains an accordion INSIDE its dropdown. */
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > .mec-ud-menu-group {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > .mec-ud-menu-group > .mec-ud-submenu {
    display: none !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 3px 0 5px !important;
    padding: 4px 4px 4px 17px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #edf1f6 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > .mec-ud-menu-group > .mec-ud-menu-toggle[aria-expanded="true"] + .mec-ud-submenu {
    display: block !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > .mec-ud-menu-group > .mec-ud-submenu a {
    width: 100% !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* CVX account already exposes sign-out elsewhere in the profile shell.
   Remove the duplicate MEC logout action from desktop and drawer navigation. */
.cvx-mec-ud .mec-ud-menu .mec-ud-menu-logout {
    display: none !important;
}



/* CVX 2.0.4-cvx.7: quieter navigation. Keep hierarchy through color/border,
   not tall pills or heavy elevation. */
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a:not(.mec-ud-menu-logout):hover,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle:hover,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-menu-toggle[aria-expanded="true"] {
    background: #f7f9fc !important;
    border-color: #e6ebf2 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a.active,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > a[aria-current="page"],
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group.cvx-has-active > .mec-ud-menu-toggle {
    background: #f2f6fc !important;
    border-color: #dbe6f4 !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > a.active,
.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu > .mec-ud-menu-group > .mec-ud-submenu > a[aria-current="page"] {
    background: #f2f6fc !important;
    border-color: transparent !important;
}

.cvx-mec-ud.cvx-nav-horizontal .mec-ud-menu::-webkit-scrollbar,
.cvx-mec-ud.cvx-nav-horizontal #mec-ud-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Empty route shell: collapse unexplained white space while React has no
   meaningful tab body. Once a spinner/content/error is rendered this class is
   removed automatically by cvx-horizontal-nav.js. */
.cvx-mec-ud .mec-ud-tab-content-wrap.cvx-tab-shell-empty {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===========================
   Drawer / constrained mode
   =========================== */
.cvx-mec-ud.cvx-nav-drawer .mec-ud-main-content {
    overflow: visible !important;
}

.cvx-mec-ud.cvx-nav-drawer #mec-ud-dashboard-app.mec-ud-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-mobile-bar {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 990 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 10px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--cvx-line) !important;
    box-shadow: none !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-mobile-bar__toggle {
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cvx-blue) !important;
    background: #fff !important;
    border: 1px solid #d9e4f2 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.03) !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-mobile-bar__title {
    color: #1d2939 !important;
    font-size: 13px !important;
    font-weight: 720 !important;
}

.cvx-mec-ud.cvx-nav-drawer #mec-ud-dashboard-app > .col-md-3,
.cvx-mec-ud.cvx-nav-drawer #mec-ud-dashboard-app > .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
}

.cvx-mec-ud.cvx-nav-drawer #mec-ud-dashboard-app > .col-md-3 {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.cvx-mec-ud.cvx-nav-drawer #mec-ud-dashboard-app > .col-md-9 {
    padding: 20px !important;
    margin: 0 !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-mobile-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(1px) !important;
    z-index: 10000 !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-sidebar-drawer {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(304px, 88vw) !important;
    max-width: 304px !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    background: #f8fafc !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    visibility: hidden !important;
    transform: translateX(-102%) !important;
    transition: transform .22s ease, visibility 0s linear .22s !important;
    box-shadow: 5px 0 22px rgba(15,23,42,.10) !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-sidebar-drawer.is-open {
    visibility: visible !important;
    transform: translateX(0) !important;
    transition: transform .22s ease, visibility 0s linear 0s !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-menu {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 18px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    white-space: normal !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-menu-user {
    display: grid !important;
}

/* In drawer mode React aria-expanded also wins over old sidebar CSS. */
.cvx-mec-ud.cvx-nav-drawer .mec-ud-menu-group > .mec-ud-submenu {
    display: none !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-menu-group > .mec-ud-menu-toggle[aria-expanded="true"] + .mec-ud-submenu {
    display: block !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-menu-toggle[aria-expanded="true"] > .mec-ud-menu-toggle-icon {
    transform: rotate(90deg) !important;
}

.cvx-mec-ud.cvx-nav-drawer .mec-ud-menu a,
.cvx-mec-ud.cvx-nav-drawer .mec-ud-menu-toggle {
    min-height: 38px !important;
    border-radius: 8px !important;
}

/* Keep CVX primary action hierarchy for empty screens in both modes. */
.cvx-mec-ud .mec-ud-empty-state .mec-ud-btn:not(.mec-ud-btn--danger),
.cvx-mec-ud .mec-ud-empty-state a.mec-ud-btn:not(.mec-ud-btn--danger),
.cvx-mec-ud .mec-ud-empty-state button.mec-ud-btn:not(.mec-ud-btn--danger) {
    color: #fff !important;
    background: var(--cvx-blue) !important;
    border-color: var(--cvx-blue) !important;
    box-shadow: none !important;
}

.cvx-mec-ud .mec-ud-empty-state .mec-ud-btn:not(.mec-ud-btn--danger):hover {
    color: #fff !important;
    background: var(--cvx-blue-700) !important;
    border-color: var(--cvx-blue-700) !important;
}

/* Keyboard focus must remain obvious in both presentation modes. */
.cvx-mec-ud .mec-ud-menu a:focus-visible,
.cvx-mec-ud .mec-ud-menu-toggle:focus-visible,
.cvx-mec-ud .mec-ud-mobile-bar__toggle:focus-visible {
    outline: 2px solid #77a9ec !important;
    outline-offset: 2px !important;
}

@media (max-width: 600px) {
    .cvx-mec-ud.cvx-nav-drawer #mec-ud-dashboard-app > .col-md-9 {
        padding: 15px !important;
    }

    .cvx-mec-ud.cvx-nav-drawer .mec-ud-sidebar-drawer {
        width: min(292px, 91vw) !important;
        max-width: 292px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cvx-mec-ud .mec-ud-sidebar-drawer,
    .cvx-mec-ud .mec-ud-menu-toggle-icon {
        transition: none !important;
    }
}