/* Integrated Edunexa navigation, chooser, responsive, and Kanban presentation. */

/* Reserved for temporary emergency overrides only.
   Core app styles are maintained in SCSS source files. */

/* Mobile navigation and tab controls */
.edx-mobile-tabs-source {
    display: none !important;
}

.edx-mobile-tabs-wrap {
    display: none;
}

.edx-mobile-tabs-host {
    position: relative;
}

@media (max-width: 767px) {
    .edx-mobile-tabs-host {
        min-height: 58px;
    }

    .edx-mobile-tabs-host h1 {
        width: 100%;
        padding-right: 64px !important;
    }

    .edx-mobile-tabs-wrap {
        position: fixed;
        top: calc(var(--edx-topbar-height, 65px) + 8px);
        right: 14px;
        display: inline-flex;
        vertical-align: middle;
        margin: 0 !important;
        transform: none;
        z-index: 4100;
    }

    .edx-mobile-tabs-trigger {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--theme-primary, #7b61ff) 28%, transparent);
        border-radius: 11px;
        background: linear-gradient(135deg, var(--theme-primary-soft, #f1ecff), color-mix(in srgb, var(--theme-primary, #7b61ff) 12%, #ffffff));
        color: var(--theme-primary, #6f52ee);
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb, 123, 97, 255), .14);
    }

    .edx-mobile-tabs-wrap.is-open .edx-mobile-tabs-trigger {
        position: relative;
        z-index: 1;
    }

    .edx-mobile-tabs-trigger:focus-visible {
        outline: 2px solid var(--theme-primary, #7b61ff);
        outline-offset: 2px;
    }

    .edx-mobile-tabs-panel {
        position: fixed;
        top: calc(var(--edx-topbar-height, 65px) + 10px);
        left: 12px;
        right: 12px;
        max-height: min(70dvh, 520px);
        padding: 8px;
        display: none;
        overflow-y: auto;
        border: 1px solid color-mix(in srgb, var(--theme-primary, #7b61ff) 22%, transparent);
        border-radius: 17px;
        background: var(--theme-card-bg, #fff);
        box-shadow: 0 18px 44px rgba(var(--theme-primary-rgb, 123, 97, 255), .2);
    }

    .edx-mobile-tabs-wrap.is-open .edx-mobile-tabs-panel {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .edx-mobile-tab-option {
        width: 100%;
        min-height: 42px;
        padding: 9px 12px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: #4d5c76;
        text-align: left;
        font-size: 14px;
        cursor: pointer;
    }

    .edx-mobile-tab-option:hover,
    .edx-mobile-tab-option:focus-visible {
        background: var(--theme-primary-soft, #f1edff);
        color: var(--theme-primary, #6f52ee);
        outline: 0;
    }

    body.color-1E202D .edx-mobile-tabs-panel,
    body[data-color="1E202D"] .edx-mobile-tabs-panel {
        background: #252932;
        border-color: color-mix(in srgb, var(--theme-primary, #667eea) 35%, #3a3f52);
        background: color-mix(in srgb, var(--theme-primary, #667eea) 10%, #252932);
    }

    body.color-1E202D .edx-mobile-tab-option,
    body[data-color="1E202D"] .edx-mobile-tab-option {
        color: #d4d7e6;
    }

    body.color-1E202D .edx-mobile-tab-option:hover,
    body.color-1E202D .edx-mobile-tab-option:focus-visible,
    body[data-color="1E202D"] .edx-mobile-tab-option:hover,
    body[data-color="1E202D"] .edx-mobile-tab-option:focus-visible {
        background: color-mix(in srgb, var(--theme-primary, #667eea) 20%, #34394a);
        color: var(--theme-primary-soft, #c4b9ff);
    }
}

/* Nexa project chooser: one compact entry point, with the full selector in a
   right-hand drawer on every screen size. */
.nexa-ai-chat-page .nexa-ai-empty-state {
    position: relative;
    min-height: 0;
    margin: clamp(22px, 7vh, 72px) auto 24px;
    padding: 0 18px;
}

.nexa-ai-chat-page .nexa-ai-project-chooser-button {
    min-width: 190px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    border: 1px solid rgba(123, 97, 255, .32);
    border-radius: 14px;
    background: rgba(123, 97, 255, .09);
    color: #6f52ee;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(94, 73, 202, .08);
}

.nexa-ai-chat-page .nexa-ai-project-chooser-button:hover,
.nexa-ai-chat-page .nexa-ai-project-chooser-button:focus-visible {
    background: rgba(123, 97, 255, .16);
    outline: 2px solid rgba(123, 97, 255, .24);
    outline-offset: 2px;
}

.nexa-ai-project-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: rgba(29, 25, 53, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.nexa-ai-project-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    width: min(560px, 50vw);
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid rgba(123, 97, 255, .18);
    box-shadow: -18px 0 46px rgba(42, 35, 95, .2);
    transform: translateX(105%);
    transition: transform .23s ease;
}

.nexa-ai-chat-page.is-project-drawer-open .nexa-ai-project-drawer {
    transform: translateX(0);
}

.nexa-ai-chat-page.is-project-drawer-open .nexa-ai-project-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.nexa-ai-project-drawer-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(123, 97, 255, .14);
    color: #202946;
}

.nexa-ai-project-drawer-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: rgba(123, 97, 255, .1);
    color: #6f52ee;
    cursor: pointer;
}

.nexa-ai-project-drawer-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
}

.nexa-ai-project-drawer .nexa-ai-project-chips {
    width: 100%;
    margin: 0;
}

body.color-1E202D .nexa-ai-project-drawer,
body[data-color="1E202D"] .nexa-ai-project-drawer {
    background: #1f222d;
    border-color: #3a3f52;
}

body.color-1E202D .nexa-ai-project-drawer-header,
body[data-color="1E202D"] .nexa-ai-project-drawer-header {
    color: #f2f3fa;
    border-color: #3a3f52;
}

@media (max-width: 767px) {
    .nexa-ai-chat-page .nexa-ai-empty-state {
        margin: 20px auto 16px;
        padding: 0 12px;
    }

    .nexa-ai-chat-page .nexa-ai-empty-logo img {
        max-height: 72px;
        width: auto;
    }

    .nexa-ai-chat-page .nexa-ai-empty-subtitle {
        margin-bottom: 16px;
    }

    .nexa-ai-chat-page .nexa-ai-composer-tools {
        display: none !important;
    }

    .nexa-ai-chat-page .nexa-ai-composer {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .nexa-ai-chat-page .nexa-ai-chat-panel,
    .nexa-ai-chat-page .nexa-ai-chat-body {
        background-size: cover;
        background-position: center;
    }

    .nexa-ai-chat-page .nexa-ai-chat-sidebar-col {
        position: fixed;
        top: var(--edx-topbar-height, 65px);
        left: 0;
        bottom: var(--edx-pwa-bottom-nav-height, 72px);
        z-index: 1400;
        width: min(360px, calc(100vw - 24px));
        max-height: none;
        background: var(--nexa-ai-surface, #fff);
        box-shadow: 18px 0 42px rgba(42, 35, 95, .18);
    }

    .nexa-ai-chat-page .nexa-ai-chat-sidebar {
        height: 100%;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nexa-ai-chat-page .nexa-ai-conversation-list {
        max-height: none;
    }

    .nexa-ai-chat-page.is-sidebar-collapsed .nexa-ai-chat-sidebar-col {
        display: none;
    }

    .nexa-ai-project-drawer {
        width: min(460px, 100vw);
        max-width: 100vw;
    }

    .nexa-ai-project-drawer-body {
        padding: 14px;
    }

    #install-pwa-button {
        display: none !important;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--edx-pwa-bottom-nav-height, 72px) + 12px);
        z-index: 1600;
        margin: 0 !important;
        color: #f8f7ff;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 16px;
        background: linear-gradient(135deg, #30275f 0%, #6551c9 56%, #7b61ff 100%);
        box-shadow: 0 16px 40px rgba(48, 39, 95, .3);
    }

    #install-pwa-button.is-available { display: block !important; }

    #install-pwa-button #install-pwa { padding-right: 48px !important; }
    #install-pwa-button .btn-close { filter: invert(1); opacity: .8; }

    .init-chat-icon {
        right: 16px !important;
        bottom: calc(var(--edx-pwa-bottom-nav-height, 72px) + 16px) !important;
        z-index: 1500 !important;
    }

    .nexa-ai-chat-page .nexa-ai-chat-body {
        min-height: 0;
        background-image: var(--nexa-ai-art-url, none);
    }

    /* The calendar redesign intentionally uses an internal desktop scroller.
       On phones the document itself must own the vertical scroll instead. */
    body.events-page #left-menu-toggle-mask,
    body.events-page .page-container,
    body.events-page .main-scrollable-page,
    body.events-page .main-scrollable-page > [id^="page-content"],
    body.events-page .nexa-events-calendar-redesign,
    body.events-page .nexa-events-calendar-redesign > .card,
    body.events-page .nexa-events-calendar-redesign .card-body,
    body.events-page .nexa-events-calendar-redesign .event-calendar-instance,
    body.events-page .nexa-events-calendar-redesign .event-calendar-instance .fc {
        height: auto !important;
        max-height: none !important;
        min-height: 0;
        overflow: visible !important;
    }

    body.events-page .main-scrollable-page {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.events-page .nexa-events-calendar-redesign > .card {
        display: block !important;
    }

    body.events-page .nexa-events-calendar-redesign .event-calendar-instance .fc-scroller,
    body.events-page .nexa-events-calendar-redesign .event-calendar-instance .fc-scroller-liquid,
    body.events-page .nexa-events-calendar-redesign .event-calendar-instance .fc-scroller-liquid-absolute {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .nexa-events-calendar-redesign.events-calendar-browser-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1070 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .nexa-events-calendar-redesign.events-calendar-browser-fullscreen > .card {
        height: auto !important;
        min-height: 100%;
        overflow: visible !important;
    }

    body.events-filters-sidebar-open .page-container {
        z-index: 2098 !important;
    }

    .nexa-events-calendar-redesign .events-filter-sidebar-backdrop {
        z-index: 2099 !important;
    }

    .nexa-events-calendar-redesign .events-filter-sidebar {
        z-index: 2100 !important;
    }

    /* The dashboard Sessions Kanban is intentionally unavailable on phones. */
    .sessions-kanban-dashboard-card {
        display: none !important;
    }

    .project-events-kanban-tab {
        display: none !important;
    }

}
@media (min-width: 991px) {
    body.sidebar-toggled .sidebar.sidebar-off {
        position: fixed !important;
        top: 0;
        bottom: 0;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    body.sidebar-toggled .sidebar.sidebar-off .sidebar-menu {
        transition: transform 120ms ease-out;
        will-change: transform;
    }
}

#profile-image-section .profile-image {
    position: relative;
}

#profile-image-section .profile-image-actions {
    position: absolute;
    z-index: 4;
    top: 24px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#profile-image-section .profile-image-actions .profile-image-upload {
    position: relative;
    inset: auto !important;
    width: 38px;
    height: 34px;
    margin: 0;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#profile-image-section .profile-image-actions .profile-image-upload.file-upload {
    position: relative;
    padding: 0;
}

/* Keep the PWA prompt identical in portrait and landscape, clear of chat. */
@media (max-width: 1200px) {
    #install-pwa-button {
        display: none !important;
        position: fixed !important;
        left: 12px !important;
        right: 86px !important;
        bottom: calc(var(--edx-pwa-bottom-nav-height, 72px) + 12px) !important;
        z-index: 2100 !important;
        margin: 0 !important;
        color: #29234d !important;
        border: 1px solid #bdb2f5 !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #f1efff 0%, #d9d2ff 100%) !important;
        box-shadow: 0 12px 30px rgba(67, 54, 145, .22) !important;
    }

    #install-pwa-button.is-available { display: block !important; }

    #install-pwa-button #install-pwa,
    #install-pwa-button #install-pwa a,
    #install-pwa-button #install-pwa svg {
        color: #29234d !important;
        stroke: #29234d !important;
    }

    #install-pwa-button #install-pwa { padding-right: 44px !important; }
    #install-pwa-button .btn-close { filter: none !important; opacity: .72 !important; }
}

#pwa-install-message-fallback {
    display: none;
    position: fixed;
    z-index: 2300;
    left: 50%;
    top: 50%;
    width: min(390px, calc(100vw - 32px));
    transform: translate(-50%, -50%);
    padding: 22px;
    border: 1px solid #c8c0f4;
    border-radius: 16px;
    color: #29234d;
    background: #f7f5ff;
    box-shadow: 0 22px 70px rgba(26, 20, 62, .32);
}

#pwa-install-message-fallback .install-message { margin: 12px 0 18px; line-height: 1.5; }

body:has(#install-pwa-button) #iguider-tour-launcher { display: none !important; }

/* The dropdown owns the viewport height; its list is the only scroll area. */
@media (max-width: 900px) {
    .notification-dropdown {
        position: fixed !important;
        top: var(--edx-topbar-height, 65px) !important;
        bottom: calc(var(--edx-pwa-bottom-nav-height, 72px) + 8px) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        height: calc(100dvh - var(--edx-topbar-height, 65px) - var(--edx-pwa-bottom-nav-height, 72px) - 16px) !important;
        max-height: none !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .notification-dropdown > .card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .notification-dropdown #notificaion-popup-list,
    .notification-dropdown .dropdown-details {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}