/* /Components/Layout/MainLayout.razor.rz.scp.css */
.crm-shell[b-niealslekx] {
    display: flex;
    height: 100vh;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #f4f5f7;
    /* Shared header height: the sidebar logo strip and the top bar both use this so their
       bottom borders form one continuous line across the whole top of the window. */
    --crm-header-h: 64px;
}

.crm-side[b-niealslekx] {
    width: 224px;
    background: #191F45;
    color: #dfe5f5;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.crm-logo[b-niealslekx] {
    height: var(--crm-header-h);
    box-sizing: border-box;
    padding: 8px 22px 0;   /* nudge the logo down a touch within the header band */
    display: flex;
    align-items: center;
}

.crm-logo img[b-niealslekx] {
    width: 120px;
    height: auto;
    display: block;
}

.crm-nav[b-niealslekx] {
    flex: 1;
    padding: 10px 0;
    overflow-y: auto;
}

/* A menu item is a link, or — for a section, which only opens and closes its list — a BUTTON.
   The button resets below make the two indistinguishable. */
.crm-nav-item[b-niealslekx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px;
    color: #c3cbe4;
    text-decoration: none;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: 0 solid transparent;
    border-left-width: 3px;
    cursor: pointer;
}

.crm-nav-item:hover[b-niealslekx] {
    background: rgba(255, 255, 255, .06);
    color: #dfe5f5;
}

.crm-nav-item.active[b-niealslekx] {
    background: rgba(255, 255, 255, .1);
    color: #dfe5f5;
    border-left-color: #6f8fd6;
}

.crm-nav-icon[b-niealslekx] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* THE SECTION YOU ARE IN, when the screen on show is one of its children: a brighter label and
   nothing else, so the child below keeps the single "you are here" marker. */
.crm-nav-item.inside[b-niealslekx] { color: #dfe5f5; }

/* Everything that rides at the right of an item — the count, "soon", the section arrow — on ONE
   auto margin, so the label keeps its natural width and never wraps. */
.crm-nav-end[b-niealslekx] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* The section arrow: DOWN means it will open, UP means it will close. Shape, never colour. */
.crm-chev[b-niealslekx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    opacity: .8;
    transition: transform .16s ease;
}

/* EVERY LOCK IN ONE COLUMN (Steven, 2026-10-10: "align the locks, always"): a screen's, a locked section's in place of
   its arrow, and a screen inside a section's - each in a box the arrow's width at the item's right, so they line up
   whatever the label's length. */
.crm-lock[b-niealslekx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    font-size: 15px;
}
.crm-nav-item.open .crm-chev[b-niealslekx] { transform: rotate(180deg); }

/* A SCREEN INSIDE A SECTION. Indented to 57px — 3px border + 22px padding + the 20px icon and its
   12px gap — so a child's text starts exactly under its section's label. */
.crm-sub-item[b-niealslekx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 22px 7px 54px;
    color: #a8b2ce;
    text-decoration: none;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border: 0 solid transparent;
    border-left-width: 3px;
    cursor: pointer;
}
.crm-sub-item:hover[b-niealslekx] { background: rgba(255, 255, 255, .06); color: #dfe5f5; }
.crm-sub-item.active[b-niealslekx] {
    background: rgba(255, 255, 255, .08);
    border-left-color: #6f8fd6;
    color: #fff;
    font-weight: 600;
}
.crm-sub-item.disabled[b-niealslekx] { color: #6d7590; cursor: not-allowed; opacity: .75; }
.crm-sub-item.disabled:hover[b-niealslekx] { background: none; color: #6d7590; }


.crm-nav-badge[b-niealslekx] {
    /* Neutral count — informational, never an alert. */
    background: rgba(255, 255, 255, .16);
    color: #dfe5f5;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
}

.crm-main[b-niealslekx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Navy top band — continues the sidebar colour full width, with the same subtle
   white borderline used under the sidebar logo, so the top of the window reads as
   one continuous navy header from the Davidson logo across to the user avatar. */
.crm-top[b-niealslekx] {
    height: var(--crm-header-h);
    box-sizing: border-box;
    background: #191F45;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Breathing room between the tab strip's nav icons and the avatar circle. */
    gap: 22px;
    padding: 0 24px 0 6px;   /* tight to the left edge — the scroll arrow + Home start almost flush */
    flex: 0 0 auto;
}

/* Left side of the top bar is intentionally empty for now (title lives in the page). */
.crm-top-spacer[b-niealslekx] { flex: 1; }

.crm-user[b-niealslekx] {
    position: relative;
}

/* The header avatar is the shared <Avatar/> now, so its look lives with every other avatar
   in app.css (.who, .who.av-lg, .crm-avatar). Nothing can go here: scoped CSS is stamped
   with this component's attribute and the avatar's markup belongs to Avatar.razor, so a
   .crm-avatar rule in this file would never match it. */

.crm-user-menu[b-niealslekx] {
    position: absolute;
    right: 0;
    top: 46px;
    background: #fff;
    border: 1px solid #e3e6ee;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    min-width: 200px;
    overflow: hidden;
    z-index: 50;
    display: none;
}

.crm-user-menu.open[b-niealslekx] {
    display: block;
}

.crm-user-head[b-niealslekx] {
    padding: 12px 14px;
    border-bottom: 1px solid #eef0f4;
}

.crm-user-head .n[b-niealslekx] {
    font-size: 14px;
    font-weight: 600;
    color: #191F45;
}

.crm-user-head .e[b-niealslekx] {
    font-size: 12px;
    color: #7a8195;
}

.crm-user-menu a[b-niealslekx],
.crm-user-signout[b-niealslekx] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    font-size: 13px;
    color: #2b3142;
    text-decoration: none;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.crm-user-menu a:hover[b-niealslekx],
.crm-user-signout:hover[b-niealslekx] {
    background: #f4f5f7;
}

.crm-user-menu svg[b-niealslekx] {
    width: 16px;
    height: 16px;
}

.crm-body[b-niealslekx] {
    flex: 1;
    padding: 24px 26px;
    overflow-y: auto;
}

/* Coming-later items (Steven, 2026-09-08): visibly disabled — greyed, no pointer, the reason on
   hover — never a dead link that looks live. The small "soon" tag went on 2026-09-14. */
.crm-nav-item.disabled[b-niealslekx] {
    color: #6d7590;
    cursor: not-allowed;
    opacity: .75;
}
.crm-nav-item.disabled:hover[b-niealslekx] { background: none; color: #6d7590; }