/* Shared responsive and collapsible portal shell. Scoped data attributes avoid
   changing legacy page behaviour outside dashboard layouts. */


:root {
    --app-sidebar-width: 250px;
    --app-sidebar-collapsed-width: 76px;
    --app-shell-transition: 220ms ease;
}

html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, iframe { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }

/* Keep action labels centered across portal buttons without changing their
   colors, dimensions, click targets, or page-specific layouts. */
:is(a, button, input)[class~="btn"],
:is(a, button)[class*="-btn"],
input[type="submit"],
input[type="button"] { text-align: center; }

[data-app-shell] {
    display: grid !important;
    grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
    width: 100%;
    min-height: 100vh;
    transition: grid-template-columns var(--app-shell-transition);
}

[data-app-sidebar] {
    width: var(--app-sidebar-width) !important;
    min-width: 0 !important;
    max-width: 100%;
    transition: width var(--app-shell-transition), transform var(--app-shell-transition);
}

[data-app-main] {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

/*
 * Desktop dashboard scrolling modes.
 * Standalone portals keep the shell at viewport height and scroll only the
 * content pane. Dashboards embedded in the public layout use a sticky sidebar
 * so the surrounding website header and footer remain reachable.
 */
@media (min-width: 992px) {
    [data-app-shell][data-fixed-sidebar] {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    [data-app-shell][data-fixed-sidebar] > [data-app-sidebar] {
        position: sticky !important;
        top: 0 !important;
        align-self: start;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    [data-app-shell][data-fixed-sidebar] > [data-app-main] {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: stable;
    }

    [data-app-shell][data-sticky-sidebar] > [data-app-sidebar] {
        position: sticky !important;
        top: 0 !important;
        align-self: start;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

[data-sidebar-toggle] {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 10px;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
}

[data-sidebar-toggle]:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .35);
    outline-offset: 2px;
}

.app-sidebar-toggle-icon,
.app-sidebar-toggle-icon::before,
.app-sidebar-toggle-icon::after {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--app-shell-transition), opacity var(--app-shell-transition);
}

.app-sidebar-toggle-icon { position: relative; }
.app-sidebar-toggle-icon::before,
.app-sidebar-toggle-icon::after { position: absolute; left: 0; content: ""; }
.app-sidebar-toggle-icon::before { top: -6px; }
.app-sidebar-toggle-icon::after { top: 6px; }

.app-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1035;
    display: none;
    border: 0;
    background: rgba(2, 6, 23, .58);
    backdrop-filter: blur(2px);
}

.app-content,
[data-app-main] main { min-width: 0; }
.app-content .table-responsive { -webkit-overflow-scrolling: touch; }

/* Shared header sizing for every role portal. Long page titles truncate while
   navigation and account controls retain their complete click targets. */
[data-app-main] > header,
.app-topbar,
.investor-topbar,
.mentor-topbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

[data-app-main] > header > :first-child,
.app-topbar > :first-child,
.investor-topbar > :first-child,
.mentor-topbar > :first-child {
    min-width: 0;
}

[data-app-main] > header .role-account-menu,
.app-topbar .role-account-menu,
.investor-topbar .role-account-menu,
.mentor-topbar .role-account-menu {
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    [data-app-shell].is-sidebar-collapsed {
        grid-template-columns: var(--app-sidebar-collapsed-width) minmax(0, 1fr);
    }

    [data-app-shell].is-sidebar-collapsed [data-app-sidebar] {
        width: var(--app-sidebar-collapsed-width) !important;
        padding-inline: 10px !important;
        overflow-x: hidden;
    }

    [data-app-shell].is-sidebar-collapsed .app-sidebar-label,
    [data-app-shell].is-sidebar-collapsed .app-sidebar-section,
    [data-app-shell].is-sidebar-collapsed .app-sidebar-user,
    [data-app-shell].is-sidebar-collapsed [data-app-sidebar] nav a > span:not(:first-child) {
        display: none !important;
    }

    [data-app-shell].is-sidebar-collapsed .app-sidebar-brand {
        justify-content: center !important;
        padding-inline: 0 !important;
    }

    [data-app-shell].is-sidebar-collapsed .app-sidebar-brand img {
        width: 46px !important;
        height: 46px !important;
        object-fit: contain;
    }

    [data-app-shell].is-sidebar-collapsed .simple-nav-children {
        display: none !important;
    }

    [data-app-shell].is-sidebar-collapsed .simple-nav-parent {
        justify-content: center;
        gap: 0 !important;
        padding-inline: 8px !important;
    }

    [data-app-shell].is-sidebar-collapsed [data-app-sidebar] nav a,
    [data-app-shell].is-sidebar-collapsed [data-app-sidebar] nav button {
        justify-content: center;
        gap: 0 !important;
        padding-inline: 8px !important;
    }
}

@media (max-width: 991.98px) {
    [data-app-shell] {
        display: block !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
    }

    [data-app-main] {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    [data-app-sidebar] {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 1040 !important;
        width: min(var(--app-sidebar-width), 86vw) !important;
        height: 100dvh !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        transform: translateX(-105%);
        box-shadow: 18px 0 40px rgba(2, 6, 23, .24);
    }

    [data-app-shell].is-sidebar-open [data-app-sidebar] { transform: translateX(0); }
    [data-app-shell].is-sidebar-open .app-sidebar-overlay { display: block; }
    body.app-sidebar-lock { overflow: hidden; touch-action: none; }
}

@media (max-width: 767.98px) {
    [data-app-main] > header,
    .app-topbar { padding-inline: 16px !important; }
    .app-content { padding: 18px 14px 28px !important; }
    .app-content .card-body { padding: 16px; }
    .app-content table { font-size: .82rem; }
    .app-content .btn { white-space: normal; }
}

@media (max-width: 575.98px) {
    [data-app-main] > header,
    .app-topbar,
    .investor-topbar,
    .mentor-topbar { gap: 8px !important; }

    [data-app-main] > header h1,
    .app-topbar h1,
    .investor-topbar h1,
    .mentor-topbar h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .role-account-menu__dropdown {
        max-width: calc(100vw - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-app-shell], [data-app-sidebar], .app-sidebar-toggle-icon,
    .app-sidebar-toggle-icon::before, .app-sidebar-toggle-icon::after { transition: none !important; }
}

/* Shared profile security section used by every role portal. */
.account-profile-overview {
    width: min(100%, 980px);
}

.account-profile-overview__header {
    margin-bottom: 20px;
}

.account-profile-overview__header > span,
.account-security__kicker {
    display: block;
    margin-bottom: 5px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.account-profile-overview__header h2 {
    margin: 0 0 6px;
    color: #172033;
    font-size: clamp(24px, 3vw, 31px);
    font-weight: 800;
}

.account-profile-overview__header p,
.account-security__header p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.account-profile-overview__card,
.account-security {
    padding: clamp(20px, 3vw, 26px);
    border: 1px solid #e5e9f0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .05);
}

.account-profile-overview__card {
    margin-bottom: 20px;
}

.account-profile-overview__card h3 {
    padding-bottom: 14px;
    margin: 0 0 4px;
    color: #182230;
    border-bottom: 1px solid #eef1f5;
    font-size: 14px;
    font-weight: 800;
}

.account-profile-overview__card h3 i {
    margin-right: 8px;
    color: #2563eb;
}

.account-profile-overview__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    margin: 0;
}

.account-profile-overview__details > div {
    min-width: 0;
    padding: 16px 0;
    border-bottom: 1px solid #eef1f5;
}

.account-profile-overview__details dt {
    margin-bottom: 5px;
    color: #667085;
    font-size: 10px;
    font-weight: 600;
}

.account-profile-overview__details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #182230;
    font-size: 12px;
    font-weight: 700;
}

.account-security {
    scroll-margin-top: 90px;
}

.account-security__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eef1f5;
}

.account-security__header h2 {
    margin: 0 0 5px;
    color: #182230;
    font-size: 20px;
    font-weight: 800;
}

.account-security__icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 12px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 20px;
}

.account-security__alert,
.account-security__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #166534;
    background: #f0fdf4;
    font-size: 11px;
    line-height: 1.6;
}

.account-security__note {
    color: #475467;
    border-color: #dbe5f0;
    background: #f8fafc;
}

.account-security__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.account-security__field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.account-security__field--wide,
.account-security__actions {
    grid-column: 1 / -1;
}

.account-security__field label {
    color: #344054;
    font-size: 11px;
    font-weight: 700;
}

.account-security__field input {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    border: 1px solid #d7dee8;
    border-radius: 9px;
    color: #182230;
    background: #fff;
    font: inherit;
    font-size: 12px;
}

.account-security__field input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: 0;
}

.account-security__error {
    color: #b42318;
    font-size: 10px;
}

.account-security__actions button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(100deg, #2563eb, #7c3aed);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.account-security--dark {
    color: #eaf3ff;
    border-color: rgba(0, 217, 245, .17);
    background: linear-gradient(145deg, #0c2036, #081726);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .14);
}

.account-security--dark .account-security__header {
    border-color: rgba(113, 181, 226, .12);
}

.account-security--dark .account-security__kicker,
.account-security--dark .account-security__icon {
    color: #71e4f7;
}

.account-security--dark .account-security__header h2 {
    color: #fff;
}

.account-security--dark .account-security__header p,
.account-security--dark .account-security__note {
    color: #9eb2c9;
}

.account-security--dark .account-security__icon,
.account-security--dark .account-security__note {
    border-color: rgba(0, 217, 245, .13);
    background: rgba(0, 217, 245, .05);
}

.account-security--dark .account-security__alert {
    color: #99f6d2;
    border-color: rgba(52, 211, 153, .28);
    background: rgba(16, 185, 129, .09);
}

.account-security--dark .account-security__field label {
    color: #cfe0f1;
}

.account-security--dark .account-security__field input {
    color: #eef7ff;
    border-color: rgba(0, 217, 245, .17);
    background: #08182a;
}

.account-security--dark .account-security__field input:focus {
    border-color: #00d9f5;
    box-shadow: 0 0 0 3px rgba(0, 217, 245, .11);
}

.account-security--dark .account-security__error {
    color: #fda4af;
}

.account-security--dark .account-security__actions button {
    color: #031526;
    background: linear-gradient(100deg, #00e1e9, #238cff 65%, #aa4bff);
}

@media (max-width: 650px) {
    .account-profile-overview__details,
    .account-security__form {
        grid-template-columns: 1fr;
    }

    .account-security__field--wide,
    .account-security__actions {
        grid-column: auto;
    }

    .account-security__actions button {
        width: 100%;
    }
}