/* /Layout/MainLayout.razor.rz.scp.css */
/* Layout for the technician shell. Mobile first: BYOD phones are a first-class client
   (FR-13.1), so the base rules are the 360 px ones and the wider layout is the override. */

.page[b-4x8imbxlvb] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.top-row[b-4x8imbxlvb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d6d5d5;
    background: #f7f7f7;
}

.brand[b-4x8imbxlvb] {
    font-weight: 600;
    text-decoration: none;
    color: #1b6ec2;
    margin-right: auto;
}

/* Long UPNs must not push the sign-out button off a 360 px screen. */
.user[b-4x8imbxlvb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45vw;
    font-size: 0.875rem;
    color: #444;
}

.content[b-4x8imbxlvb] {
    padding: 1rem;
}

/* 44 px: the minimum comfortable touch target, and the reason this is a button rather
   than a bare link. */
button.link[b-4x8imbxlvb] {
    min-height: 44px;
    padding: 0 0.75rem;
    background: none;
    border: 1px solid transparent;
    color: #1b6ec2;
    cursor: pointer;
    font: inherit;
}

button.link:hover[b-4x8imbxlvb],
button.link:focus-visible[b-4x8imbxlvb] {
    text-decoration: underline;
    border-color: #1b6ec2;
}

/* Phone: logo, then the account menu next to it; name and sign-out live inside the menu
   (owner's decision, 2026-09-17). Wide screens keep them in the header, where there is room. */
.wide-only[b-4x8imbxlvb] { display: none; }

.brand[b-4x8imbxlvb] { margin-right: 0; }

/* The panel is anchored to the header, full width, so it can never clip off a 360 px screen
   the way a small dropdown aligned to the button would. */
.top-row[b-4x8imbxlvb] { position: relative; }

[b-4x8imbxlvb] .account-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 1px solid #d6d5d5;
    border-radius: 999px;
    background: #fff;
    color: #1b4f9c;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

[b-4x8imbxlvb] .account-btn[aria-expanded="true"] { background: #e8eefa; border-color: #1b4f9c; }
[b-4x8imbxlvb] .account-btn:focus-visible { outline: 2px solid #1b4f9c; outline-offset: 2px; }

[b-4x8imbxlvb] .account-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 10;
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem 0.6rem;
    background: #fff;
    border-bottom: 1px solid #d6d5d5;
    box-shadow: 0 6px 14px rgba(18, 21, 26, 0.12);
}

[b-4x8imbxlvb] .account-panel p { margin: 0; overflow-wrap: anywhere; }
[b-4x8imbxlvb] .account-label { font-size: 0.6875rem; color: #6d7684; text-transform: uppercase; letter-spacing: 0.06em; }
[b-4x8imbxlvb] .account-name { font-weight: 600; }
[b-4x8imbxlvb] .account-email { font-size: 0.8125rem; color: #454d59; }
[b-4x8imbxlvb] .account-role { font-size: 0.8125rem; color: #454d59; margin-bottom: 0.4rem; }
[b-4x8imbxlvb] .account-signout { justify-self: start; padding: 0; }

/* On a phone the navigation takes a row of its own, under the logo and account menu.
   Squeezed into one row, a second link was enough to push sign-out off a 360 px screen and
   ellipsize the signed-in name to nothing -- found in the intake screen renders. */
.main-nav[b-4x8imbxlvb] {
    order: 1;
    flex-basis: 100%;
    display: flex;
    gap: 0.25rem;
    margin: -0.25rem 0 -0.5rem -0.5rem;
}

@media (min-width: 768px) {
    .content[b-4x8imbxlvb] {
        padding: 1.5rem 2rem;
    }

    .main-nav[b-4x8imbxlvb] {
        order: 0;
        flex-basis: auto;
        margin: 0;
    }

    .brand[b-4x8imbxlvb] { margin-right: auto; }
    .wide-only[b-4x8imbxlvb] { display: revert; }
    [b-4x8imbxlvb] .account { display: none; }
}

.nav-link[b-4x8imbxlvb] {
    color: #1b4f9c;
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0 0.5rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.nav-link:hover[b-4x8imbxlvb],
.nav-link:focus-visible[b-4x8imbxlvb] {
    text-decoration: underline;
}

/* The mark, sized by height so the SVG's own proportions decide the width. */
.brand-logo[b-4x8imbxlvb] {
    height: 30px;
    width: auto;
    display: block;
}

/* Brand values. A quiet strip under the header: present, and never competing with a
   ticket subject for attention. Hidden below 768 px, where the header already carries
   everything a technician needs and the screen belongs to the work. */
.values[b-4x8imbxlvb] {
    display: none;
}

@media (min-width: 768px) {
    .values[b-4x8imbxlvb] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 1.25rem;
        margin: 0;
        padding: 0.4rem 1rem;
        border-bottom: 1px solid #e6e9ef;
        background: #fbfcfd;
        font-size: 0.6875rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6d7684;
    }

    /* A separator drawn rather than typed, so it is not read aloud by a screen reader. */
    .values span + span[b-4x8imbxlvb]::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #29ABE2;
        vertical-align: middle;
        margin-right: 1.25rem;
        margin-left: -0.75rem;
    }

    .brand-logo[b-4x8imbxlvb] { height: 34px; }
}