/* ==========================================================
   Agile AI University
   Student & Executive Portal

   File      : toolbar.css
   Version   : 1.2.0
   Status    : ACTIVE
   Phase     : Portal Identity Experience

   Purpose
   ----------------------------------------------------------
   Shared Student & Executive Portal Toolbar

   Responsibilities
   ----------------------------------------------------------
   ✓ Toolbar Layout
   ✓ Breadcrumb
   ✓ Page Title
   ✓ Search
   ✓ Notifications
   ✓ Learner Identity Presentation
   ✓ Learner Avatar Presentation
   ✓ Learner Name Truncation
   ✓ Role Presentation
   ✓ Responsive Behaviour
   ✓ Light and Dark Theme Compatibility
   ✓ Accessible Focus States

   Non Responsibilities
   ----------------------------------------------------------
   ✗ Authentication
   ✗ Authorization
   ✗ Identity Resolution
   ✗ Entitlement Resolution
   ✗ Sidebar
   ✗ Dashboard Cards
   ✗ Page Content
   ✗ User Menu Behaviour (owned by toolbar.js)
   ✗ Profile Persistence

   Architectural Position
   ----------------------------------------------------------
   Resolved Learner Identity
        ↓
   toolbar.js
        ↓
   toolbar.css
        ↓
   Shared Portal Toolbar

   Governance
   ----------------------------------------------------------
   • Shared UI Component

   • Enterprise Dashboard Standard

   • HBR / MIT Inspired

   • Light Theme Default

   • Design Token Driven

   • Learner name is the primary identity label.

   • Portal role is secondary supporting information.

   • Long learner names must truncate safely without
     widening or breaking the toolbar.

   • Avatar initials must remain compact and readable.

   • Mobile presentation may hide identity text while
     preserving the learner avatar.

   Change History
   ----------------------------------------------------------
   v1.2.0

   • Added governed learner account-menu presentation
   • Added account identity summary and email truncation
   • Added accessible open, focus and keyboard states
   • Added professional Sign out action presentation
   • Added signing-out, disabled and error states
   • Added responsive and dark-theme menu support

   v1.1.0

   • Added learner identity copy container
   • Added two-line learner name and role presentation
   • Added safe long-name truncation
   • Added minimum and maximum user-control widths
   • Added avatar flex protection
   • Added responsive identity behaviour
   • Added dark-theme compatibility
   • Improved user-control hover and focus states
   • Preserved existing toolbar architecture

   v1.0.0

   • Initial governed toolbar styling
   • Added breadcrumb and page title
   • Added search and notification controls
   • Added placeholder user menu
   • Added responsive behaviour

========================================================== */


/* ==========================================================
   TOOLBAR
========================================================== */

.portal-toolbar {

    position:
        sticky;

    top:
        0;

    z-index:
        var(
            --z-sticky
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    min-width:
        0;

    padding:
        20px 40px;

    background:
        var(
            --surface-card
        );

    border-bottom:
        1px solid
        var(
            --border-default
        );

}


/* ==========================================================
   LEFT
========================================================== */

.portal-toolbar-left {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    min-width:
        0;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.portal-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-width:
        0;

    color:
        var(
            --text-muted
        );

    font-size:
        var(
            --font-size-sm
        );

}

.breadcrumb-home {

    color:
        var(
            --text-secondary
        );

}

.breadcrumb-separator {

    opacity:
        0.5;

}

.breadcrumb-current {

    min-width:
        0;

    overflow:
        hidden;

    color:
        var(
            --text-primary
        );

    font-weight:
        var(
            --font-semibold
        );

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ==========================================================
   PAGE TITLE
========================================================== */

.portal-page-title {

    min-width:
        0;

    margin:
        0;

    overflow:
        hidden;

    color:
        var(
            --text-primary
        );

    font-size:
        2rem;

    font-weight:
        var(
            --font-bold
        );

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ==========================================================
   RIGHT
========================================================== */

.portal-toolbar-right {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        18px;

    min-width:
        0;

}


/* ==========================================================
   SEARCH
========================================================== */

.portal-search {

    width:
        320px;

    min-width:
        180px;

}

.portal-search input {

    width:
        100%;

    height:
        44px;

    padding:
        0 16px;

    background:
        var(
            --surface-card
        );

    border:
        1px solid
        var(
            --border-default
        );

    border-radius:
        var(
            --radius-pill
        );

    color:
        var(
            --text-primary
        );

    font-size:
        var(
            --font-size-sm
        );

    transition:
        background
        var(
            --transition-fast
        ),
        border-color
        var(
            --transition-fast
        ),
        box-shadow
        var(
            --transition-fast
        );

}

.portal-search input:hover {

    background:
        var(
            --surface-secondary
        );

}

.portal-search input:focus {

    outline:
        none;

    border-color:
        var(
            --brand-primary
        );

    box-shadow:
        var(
            --focus-ring
        );

}

.portal-search input::placeholder {

    color:
        var(
            --text-muted
        );

}


/* ==========================================================
   FOCUS STATES
========================================================== */

.toolbar-button:focus-visible,
.toolbar-user:focus-visible,
.toolbar-account-action:focus-visible {

    outline:
        2px solid
        var(
            --border-focus
        );

    outline-offset:
        2px;

}


/* ==========================================================
   ICON BUTTONS
========================================================== */

.toolbar-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    padding:
        0;

    background:
        var(
            --surface-card
        );

    border:
        1px solid
        var(
            --border-default
        );

    border-radius:
        50%;

    color:
        var(
            --text-primary
        );

    cursor:
        pointer;

    transition:
        background
        var(
            --transition-fast
        ),
        border-color
        var(
            --transition-fast
        ),
        box-shadow
        var(
            --transition-fast
        );

}

.toolbar-button:hover {

    background:
        var(
            --surface-secondary
        );

    border-color:
        var(
            --brand-primary
        );

}


/* ==========================================================
   USER MENU
========================================================== */

.toolbar-account {

    position: relative;
    flex: 0 1 auto;
    min-width: 0;

}

.toolbar-user {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        210px;

    max-width:
        320px;

    min-height:
        54px;

    padding:
        6px 12px 6px 7px;

    overflow:
        hidden;

    background:
        var(
            --surface-card
        );

    border:
        1px solid
        var(
            --border-default
        );

    border-radius:
        var(
            --radius-pill
        );

    color:
        var(
            --text-primary
        );

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background
        var(
            --transition-fast
        ),
        border-color
        var(
            --transition-fast
        ),
        box-shadow
        var(
            --transition-fast
        );

}

.toolbar-user:hover {

    background:
        var(
            --surface-secondary
        );

    border-color:
        var(
            --brand-primary
        );

}

.toolbar-user:active {

    background:
        var(
            --surface-secondary
        );

}


/* ==========================================================
   AVATAR
========================================================== */

.toolbar-avatar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    overflow:
        hidden;

    background:
        var(
            --brand-primary
        );

    border-radius:
        50%;

    color:
        var(
            --text-inverse
        );

    font-size:
        var(
            --font-size-sm
        );

    font-weight:
        var(
            --font-bold
        );

    letter-spacing:
        0.02em;

    line-height:
        1;

    text-align:
        center;

    text-transform:
        uppercase;

}


/* ==========================================================
   USER IDENTITY COPY
========================================================== */

.toolbar-user-copy {

    display:
        flex;

    flex:
        1 1 auto;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        2px;

    min-width:
        0;

    overflow:
        hidden;

}


/* ==========================================================
   USER NAME
========================================================== */

.toolbar-name {

    display:
        block;

    min-width:
        0;

    overflow:
        hidden;

    color:
        var(
            --text-primary
        );

    font-size:
        var(
            --font-size-sm
        );

    font-weight:
        var(
            --font-semibold
        );

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ==========================================================
   USER ROLE
========================================================== */

.toolbar-role {

    display:
        block;

    min-width:
        0;

    overflow:
        hidden;

    color:
        var(
            --text-muted
        );

    font-size:
        0.75rem;

    font-weight:
        var(
            --font-medium,
            500
        );

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ==========================================================
   DROPDOWN
========================================================== */

.toolbar-arrow {

    flex:
        0 0 auto;

    color:
        var(
            --text-muted
        );

    font-size:
        12px;

    line-height:
        1;

}


/* ==========================================================
   DARK THEME FALLBACKS
========================================================== */

html[data-theme="dark"]
.portal-toolbar,
body[data-theme="dark"]
.portal-toolbar,
.dark-theme
.portal-toolbar,
.theme-dark
.portal-toolbar {

    background:
        var(
            --surface-card,
            #111827
        );

    border-bottom-color:
        var(
            --border-default,
            #334155
        );

}

html[data-theme="dark"]
.toolbar-button,
body[data-theme="dark"]
.toolbar-button,
.dark-theme
.toolbar-button,
.theme-dark
.toolbar-button,
html[data-theme="dark"]
.toolbar-user,
body[data-theme="dark"]
.toolbar-user,
.dark-theme
.toolbar-user,
.theme-dark
.toolbar-user,
html[data-theme="dark"]
.portal-search input,
body[data-theme="dark"]
.portal-search input,
.dark-theme
.portal-search input,
.theme-dark
.portal-search input {

    background:
        var(
            --surface-card,
            #111827
        );

    border-color:
        var(
            --border-default,
            #334155
        );

}

html[data-theme="dark"]
.toolbar-button:hover,
body[data-theme="dark"]
.toolbar-button:hover,
.dark-theme
.toolbar-button:hover,
.theme-dark
.toolbar-button:hover,
html[data-theme="dark"]
.toolbar-user:hover,
body[data-theme="dark"]
.toolbar-user:hover,
.dark-theme
.toolbar-user:hover,
.theme-dark
.toolbar-user:hover,
html[data-theme="dark"]
.portal-search input:hover,
body[data-theme="dark"]
.portal-search input:hover,
.dark-theme
.portal-search input:hover,
.theme-dark
.portal-search input:hover {

    background:
        var(
            --surface-secondary,
            #1e293b
        );

}

html[data-theme="dark"]
.toolbar-name,
body[data-theme="dark"]
.toolbar-name,
.dark-theme
.toolbar-name,
.theme-dark
.toolbar-name,
html[data-theme="dark"]
.portal-page-title,
body[data-theme="dark"]
.portal-page-title,
.dark-theme
.portal-page-title,
.theme-dark
.portal-page-title,
html[data-theme="dark"]
.breadcrumb-current,
body[data-theme="dark"]
.breadcrumb-current,
.dark-theme
.breadcrumb-current,
.theme-dark
.breadcrumb-current {

    color:
        var(
            --text-primary,
            #f8fafc
        );

}

html[data-theme="dark"]
.toolbar-role,
body[data-theme="dark"]
.toolbar-role,
.dark-theme
.toolbar-role,
.theme-dark
.toolbar-role,
html[data-theme="dark"]
.toolbar-arrow,
body[data-theme="dark"]
.toolbar-arrow,
.dark-theme
.toolbar-arrow,
.theme-dark
.toolbar-arrow,
html[data-theme="dark"]
.portal-breadcrumb,
body[data-theme="dark"]
.portal-breadcrumb,
.dark-theme
.portal-breadcrumb,
.theme-dark
.portal-breadcrumb {

    color:
        var(
            --text-muted,
            #94a3b8
        );

}


/* ==========================================================
   RESPONSIVE — DESKTOP
========================================================== */

@media (max-width: 1200px) {

    .portal-toolbar {

        padding:
            18px 24px;

    }

    .portal-search {

        width:
            240px;

    }

    .toolbar-user {

        min-width:
            190px;

        max-width:
            260px;

    }

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 992px) {

    .portal-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            16px;

    }

    .portal-toolbar-right {

        justify-content:
            space-between;

        width:
            100%;

    }

    .portal-search {

        flex:
            1 1 auto;

        width:
            auto;

        min-width:
            0;

    }

    .toolbar-user {

        flex:
            0 1 280px;

        min-width:
            180px;

        max-width:
            280px;

    }

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 640px) {

    .portal-toolbar {

        padding:
            16px;

    }

    .portal-page-title {

        font-size:
            1.5rem;

    }

    .portal-search {

        display:
            none;

    }

    .portal-toolbar-right {

        justify-content:
            flex-end;

        gap:
            12px;

    }

    .toolbar-user {

        width:
            54px;

        min-width:
            54px;

        max-width:
            54px;

        min-height:
            54px;

        padding:
            6px;

        justify-content:
            center;

        gap:
            0;

    }

    .toolbar-user-copy,
    .toolbar-arrow {

        display:
            none;

    }

    .toolbar-avatar {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .portal-toolbar {

        gap:
            12px;

    }

    .portal-breadcrumb {

        font-size:
            0.78rem;

    }

    .portal-page-title {

        font-size:
            1.35rem;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .portal-search input,
    .toolbar-button,
    .toolbar-user {

        transition:
            none;

    }

}

.toolbar-user[aria-expanded="true"] {

    background: var(--surface-secondary);
    border-color: var(--brand-primary);
    box-shadow: var(--focus-ring);

}

.toolbar-user[disabled],
.toolbar-user[aria-disabled="true"] {

    cursor: not-allowed;
    opacity: 0.7;

}


/* ==========================================================
   ACCOUNT MENU — v1.2.0
========================================================== */

.toolbar-user[aria-expanded="true"] .toolbar-arrow {
    transform: rotate(180deg);
}

.toolbar-arrow {
    transition: transform var(--transition-fast);
}

.toolbar-account-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: calc(var(--z-sticky, 100) + 1);
    width: 300px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(
        --shadow-lg,
        0 18px 45px rgba(15, 23, 42, 0.16)
    );
}

.toolbar-account-menu[hidden],
.toolbar-account-status[hidden] {
    display: none;
}

.toolbar-account-summary {
    padding: 18px;
}

.toolbar-account-name,
.toolbar-account-email {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar-account-name {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    line-height: 1.4;
}

.toolbar-account-email {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.toolbar-account-separator {
    height: 1px;
    margin: 0;
    background: var(--border-default);
    border: 0;
}

.toolbar-account-actions {
    padding: 8px;
}

.toolbar-account-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 10px);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium, 500);
    text-align: left;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.toolbar-account-action:hover {
    background: var(--surface-secondary);
}

.toolbar-account-action[disabled],
.toolbar-account-action[aria-disabled="true"] {
    cursor: wait;
    opacity: 0.7;
}

.toolbar-account-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 1rem;
    line-height: 1;
}

.toolbar-account-status {
    margin: 0;
    padding: 0 12px 12px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.toolbar-account-status[data-status="error"] {
    color: var(--color-danger, #b42318);
}

.portal-signing-out .toolbar-user,
.portal-signing-out .toolbar-account-action {
    pointer-events: none;
}

html[data-theme="dark"] .toolbar-account-menu,
body[data-theme="dark"] .toolbar-account-menu,
.dark-theme .toolbar-account-menu,
.theme-dark .toolbar-account-menu {
    background: var(--surface-card, #111827);
    border-color: var(--border-default, #334155);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .toolbar-account-action:hover,
body[data-theme="dark"] .toolbar-account-action:hover,
.dark-theme .toolbar-account-action:hover,
.theme-dark .toolbar-account-action:hover {
    background: var(--surface-secondary, #1e293b);
}

html[data-theme="dark"] .toolbar-account-name,
body[data-theme="dark"] .toolbar-account-name,
.dark-theme .toolbar-account-name,
.theme-dark .toolbar-account-name,
html[data-theme="dark"] .toolbar-account-action,
body[data-theme="dark"] .toolbar-account-action,
.dark-theme .toolbar-account-action,
.theme-dark .toolbar-account-action {
    color: var(--text-primary, #f8fafc);
}

@media (max-width: 992px) {
    .toolbar-account {
        flex: 0 1 280px;
        min-width: 180px;
        max-width: 280px;
    }

    .toolbar-account .toolbar-user {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .toolbar-account {
        width: 54px;
        min-width: 54px;
        max-width: 54px;
        flex: 0 0 54px;
    }

    .toolbar-account-menu {
        width: min(300px, calc(100vw - 32px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .toolbar-arrow,
    .toolbar-account-action {
        transition: none;
    }
}