@import '_content/Kazzola.AdminTokens/Kazzola.AdminTokens.bundle.scp.css';
@import '_content/Kazzola.AI/Kazzola.AI.bundle.scp.css';
@import '_content/Kazzola.Delivery/Kazzola.Delivery.bundle.scp.css';
@import '_content/Kazzola.Shared/Kazzola.Shared.bundle.scp.css';
@import '_content/Kazzola.Shipping/Kazzola.Shipping.bundle.scp.css';
@import '_content/Kazzola.Users/Kazzola.Users.bundle.scp.css';

/* /Shared/ContactsPanel.razor.rz.scp.css */
/* ContactsPanel.razor.css — frame styled directly; child rows/sections via ::deep
   (OnlineContacts/OnlineTeams/OnlineContact/OnlineTeam live in Kazzola.Shared).
   Tokenized to match the mock. */

.kz-contacts[b-ohudk7j10p] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 300px;
    flex: none;
    box-sizing: border-box;
    background: var(--panel);
    border-radius: var(--radius-bubble, 18px);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

/* ---------- header ---------- */
.kz-contacts__head[b-ohudk7j10p] { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; }
.kz-contacts__titlebar[b-ohudk7j10p] { display: flex; align-items: center; gap: 8px; }
.kz-contacts__title[b-ohudk7j10p] { flex: 1; margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; letter-spacing: -.01em; color: var(--ink); }

.kz-contacts__add[b-ohudk7j10p] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 13px; border: 0;
    border-radius: var(--radius-pill, 99px);
    background: var(--accent); color: var(--sent-fg);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: filter .14s ease;
}
.kz-contacts__add:hover[b-ohudk7j10p] { filter: brightness(1.08); }

.kz-contacts__collapse[b-ohudk7j10p] {
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; border-radius: var(--radius-chip, 8px);
    background: transparent; color: var(--muted); cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.kz-contacts__collapse:hover[b-ohudk7j10p] { background: var(--hover); color: var(--ink); }

/* ---------- search ---------- */
.kz-contacts__search[b-ohudk7j10p] { position: relative; }
.kz-contacts__search-ic[b-ohudk7j10p] { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.kz-contacts__search-input[b-ohudk7j10p] {
    width: 100%; height: 38px; box-sizing: border-box;
    padding: 0 14px 0 36px; border: 0; outline: none;
    border-radius: var(--radius-pill, 99px);
    background: var(--panel-2); color: var(--ink); font-size: 13px;
}
.kz-contacts__search-input[b-ohudk7j10p]::placeholder { color: var(--faint); }
.kz-contacts__search-input:focus[b-ohudk7j10p] { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---------- body ---------- */
.kz-contacts__body[b-ohudk7j10p] { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 12px; }

/* ---------- child sections (::deep) ---------- */
.kz-contacts__body[b-ohudk7j10p]  .kz-sec { margin-top: 4px; }
.kz-contacts__body[b-ohudk7j10p]  .kz-sec__head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 8px 6px; background: var(--panel);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
.kz-contacts__body[b-ohudk7j10p]  .kz-sec__ic { color: var(--faint); flex: none; }
.kz-contacts__body[b-ohudk7j10p]  .kz-sec__label { flex: 1; }
.kz-contacts__body[b-ohudk7j10p]  .kz-sec__count { font-weight: 600; color: var(--faint); }
.kz-contacts__body[b-ohudk7j10p]  .kz-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.kz-contacts__body[b-ohudk7j10p]  .kz-dot--on { background: var(--on); }
.kz-contacts__body[b-ohudk7j10p]  .kz-dot--off { background: var(--off); }

/* ---------- child rows (::deep) ---------- */
.kz-contacts__body[b-ohudk7j10p]  .kz-row {
    display: flex; align-items: center; gap: 11px;
    width: 100%; box-sizing: border-box;
    padding: 9px 8px; margin: 1px 0;
    border: 0; border-radius: var(--radius-panel, 14px);
    background: transparent; font: inherit; text-align: left; cursor: pointer;
    transition: background .14s ease;
}
.kz-contacts__body[b-ohudk7j10p]  .kz-row:hover { background: var(--hover); }

.kz-contacts__body[b-ohudk7j10p]  .kz-avwrap { position: relative; flex: none; }
.kz-contacts__body[b-ohudk7j10p]  .kz-av {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center; object-fit: cover;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
    font-size: 12.5px; font-weight: 700;
}
.kz-contacts__body[b-ohudk7j10p]  .kz-av--sq { border-radius: 11px; }

.kz-contacts__body[b-ohudk7j10p]  .kz-status {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--panel); box-sizing: border-box;
}
.kz-contacts__body[b-ohudk7j10p]  .kz-status.is-on { background: var(--on); }
.kz-contacts__body[b-ohudk7j10p]  .kz-status.is-off { background: var(--off); }

.kz-contacts__body[b-ohudk7j10p]  .kz-row__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.kz-contacts__body[b-ohudk7j10p]  .kz-row__name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kz-contacts__body[b-ohudk7j10p]  .kz-row__sub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.kz-contacts__body[b-ohudk7j10p]  .kz-row__dev { font-size: 11px; color: var(--on); }

.kz-contacts__body[b-ohudk7j10p]  .kz-row__badge {
    flex: none; min-width: 22px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill, 99px);
    background: var(--accent-soft); color: var(--accent-ink);
    font-size: 11px; font-weight: 700;
}

/* ---------- collapsed rail ---------- */
.kz-contacts__reopen[b-ohudk7j10p] { display: none; width: 100%; height: 44px; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.kz-contacts.is-rail[b-ohudk7j10p] { width: 52px; }
.kz-contacts.is-rail .kz-contacts__head[b-ohudk7j10p],
.kz-contacts.is-rail .kz-contacts__body[b-ohudk7j10p] { display: none; }
.kz-contacts.is-rail .kz-contacts__reopen[b-ohudk7j10p] { display: grid; }

/* ---------- hover-only thin scrollbar: no arrow buttons, invisible until the panel is hovered ---------- */
.kz-contacts__body[b-ohudk7j10p]::-webkit-scrollbar { width: 10px; height: 10px; }
.kz-contacts__body[b-ohudk7j10p]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.kz-contacts__body[b-ohudk7j10p]::-webkit-scrollbar-corner { background: transparent; }
.kz-contacts__body[b-ohudk7j10p]::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.kz-contacts__body[b-ohudk7j10p]::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box; border: 3px solid transparent; border-radius: 99px; min-height: 40px; }
.kz-contacts__body:hover[b-ohudk7j10p]::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--faint) 70%, transparent); }
.kz-contacts__body[b-ohudk7j10p]::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
@supports not selector(::-webkit-scrollbar) {
    .kz-contacts__body[b-ohudk7j10p] { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .kz-contacts__body:hover[b-ohudk7j10p] { scrollbar-color: var(--faint) transparent; }
}

/* no black click-border; ring only for keyboard focus */
.kz-contacts__add:focus[b-ohudk7j10p],
.kz-contacts__collapse:focus[b-ohudk7j10p],
.kz-contacts__reopen:focus[b-ohudk7j10p],
.kz-contacts__body[b-ohudk7j10p]  .kz-row:focus { outline: none; }
.kz-contacts__add:focus-visible[b-ohudk7j10p],
.kz-contacts__collapse:focus-visible[b-ohudk7j10p],
.kz-contacts__reopen:focus-visible[b-ohudk7j10p],
.kz-contacts__body[b-ohudk7j10p]  .kz-row:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
/* /Shared/MainHeader.razor.rz.scp.css */
/* MainHeader.razor.css — footer cluster for the Option-1 sidebar.
   Logic unchanged; this lays out bell + theme + profile and styles the
   custom profile popup to match the mock. Tokenized. */

.kz-mh[b-nmt3qtez3c] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* feed-search is hidden here — the menu filter lives in NavMenu now.
   (Tell me if you'd rather keep this search at the sidebar top instead.) */
.search-wrapper[b-nmt3qtez3c] { display: none !important; }

/* notifications (.hidden-xs) + member-requests (.notif-pos): small icon slots */
.hidden-xs[b-nmt3qtez3c],
.notif-pos[b-nmt3qtez3c] {
    position: static !important;
    flex: none;
    display: inline-flex;
    align-items: center;
}

.badge1[b-nmt3qtez3c],
.hidden-xs .fa-bell[b-nmt3qtez3c],
.notif-pos .fa-user-plus[b-nmt3qtez3c] {
    color: var(--muted);
    font-size: 16px;
}

/* theme toggle */
.kz-mh__icon[b-nmt3qtez3c] {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-chip, 8px);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.kz-mh__icon:hover[b-nmt3qtez3c] {
    background: var(--hover);
    color: var(--ink);
}

/* ---- profile ---- */
.kz-mh__profile[b-nmt3qtez3c] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.kz-mh__profile-trigger[b-nmt3qtez3c] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 6px;
    border: 0;
    border-radius: var(--radius-row, 11px);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background .14s ease;
}

.kz-mh__profile-trigger:hover[b-nmt3qtez3c],
.kz-mh__profile-trigger.is-open[b-nmt3qtez3c] {
    background: var(--hover);
}

.kz-mh__avatar[b-nmt3qtez3c] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.kz-mh__avatar--lg[b-nmt3qtez3c] {
    width: 40px;
    height: 40px;
}

.kz-mh__meta[b-nmt3qtez3c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.kz-mh__name[b-nmt3qtez3c] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kz-mh__status[b-nmt3qtez3c] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
}

.kz-mh__dot[b-nmt3qtez3c] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--on);
    flex: none;
}

/* ---- popup (opens upward, since footer is at the bottom) ---- */
.kz-mh__menu[b-nmt3qtez3c] {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    width: 244px;
    max-width: 80vw;
    padding: 6px;
    background: var(--panel);
    border-radius: var(--radius-panel, 14px);
    box-shadow: var(--sh-3);
    z-index: 80;
    animation: kzpop .16s ease-out;
}

.kz-mh__menu-head[b-nmt3qtez3c] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 8px 10px;
}

.kz-mh__menu-id[b-nmt3qtez3c] { min-width: 0; }

.kz-mh__email[b-nmt3qtez3c] {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kz-mh__sep[b-nmt3qtez3c] {
    height: 1px;
    background: var(--line);
    margin: 4px 8px;
}

.kz-mh__menu-item[b-nmt3qtez3c] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-row, 11px);
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.kz-mh__menu-item i[b-nmt3qtez3c] {
    width: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.kz-mh__menu-item:hover[b-nmt3qtez3c] {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.kz-mh__menu-item:hover i[b-nmt3qtez3c] { color: var(--accent-ink); }

.kz-mh__menu-item--danger[b-nmt3qtez3c] { color: var(--alert); }
.kz-mh__menu-item--danger i[b-nmt3qtez3c] { color: var(--alert); }
.kz-mh__menu-item--danger:hover[b-nmt3qtez3c] {
    background: color-mix(in srgb, var(--alert) 12%, transparent);
    color: var(--alert);
}
.kz-mh__menu-item--danger:hover i[b-nmt3qtez3c] { color: var(--alert); }


/* notifications bell (clean, no dependency on legacy .hidden-xs/.badge1) */
.kz-mh__notif[b-nmt3qtez3c] {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
}
.kz-mh__notif > div[b-nmt3qtez3c] { display: inline-flex; align-items: center; }
.kz-mh__notif a[b-nmt3qtez3c] {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-chip, 8px);
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.kz-mh__notif a:hover[b-nmt3qtez3c] { background: var(--hover); color: var(--ink); }
.kz-mh__notif .fa-bell[b-nmt3qtez3c] { font-size: 16px; margin: 0 !important; }

/* --- alignment fix ---
   Bootstrap's .nav-link puts padding: 8px 16px on the bell <a>. Inside a 32x32 box that
   leaves 0px of content width, so the icon spills out to the right and sits off-centre.
   Zero it and centre the icon; same for the member-requests icon. */
.kz-mh__notif a[b-nmt3qtez3c],
.notif-pos a[b-nmt3qtez3c] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
    box-sizing: border-box;
}
.notif-pos a[b-nmt3qtez3c] { position: relative; border-radius: var(--radius-chip, 8px); color: var(--muted); cursor: pointer; }
.notif-pos a:hover[b-nmt3qtez3c] { background: var(--hover); color: var(--ink); }
.kz-mh__notif a i[b-nmt3qtez3c],
.notif-pos a i[b-nmt3qtez3c] { margin: 0 !important; line-height: 1; }

/* Syncfusion's own (invisible) trigger button was taking up layout space next to the bell.
   Overlay it on the bell instead, so the popup still anchors to the bell but nothing shifts. */
.kz-mh__notif > div[b-nmt3qtez3c],
.notif-pos > div[b-nmt3qtez3c] { position: relative; }
.kz-mh__notif[b-nmt3qtez3c]  .e-dropdown-btn,
.notif-pos[b-nmt3qtez3c]  .e-dropdown-btn {
    position: absolute !important;
    inset: 0;
    width: 32px !important;
    height: 32px !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.kz-mh__notif a[data-badge]:not([data-badge=""]):not([data-badge="0"])[b-nmt3qtez3c]::after {
    content: attr(data-badge);
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    background: var(--alert);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border-radius: 99px;
    box-shadow: 0 0 0 2px var(--panel);
}

/* ---- collapsed sidebar rail: bell on top, profile avatar below (vertical); avatar opens the same popup ---- */
.kz-mh.is-rail[b-nmt3qtez3c] { flex-direction: column; justify-content: center; gap: 6px; }
.kz-mh.is-rail > :not(.kz-mh__profile):not(.kz-mh__notif):not(.kz-mh__backdrop)[b-nmt3qtez3c] { display: none !important; }
.kz-mh.is-rail .kz-mh__profile[b-nmt3qtez3c] { flex: none; }
.kz-mh.is-rail .kz-mh__profile-trigger[b-nmt3qtez3c] { justify-content: center; width: auto; padding: 5px; }
.kz-mh.is-rail .kz-mh__meta[b-nmt3qtez3c] { display: none; }

/* ---- no black click-border; subtle ring only for keyboard focus ---- */
.kz-mh button:focus[b-nmt3qtez3c],
.kz-mh a:focus[b-nmt3qtez3c],
.kz-noti button:focus[b-nmt3qtez3c],
.kz-noti__row:focus[b-nmt3qtez3c] { outline: none; }
.kz-mh button:focus-visible[b-nmt3qtez3c],
.kz-mh a:focus-visible[b-nmt3qtez3c],
.kz-noti button:focus-visible[b-nmt3qtez3c],
.kz-noti__row:focus-visible[b-nmt3qtez3c] { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.kz-mh button[b-nmt3qtez3c], .kz-mh a[b-nmt3qtez3c], .kz-noti button[b-nmt3qtez3c], .kz-noti__row[b-nmt3qtez3c] { -webkit-tap-highlight-color: transparent; }

/* ---- notification popup (light, tokenized; replaces the black header/footer bars) ---- */
.kz-noti[b-nmt3qtez3c] {
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--panel);
    color: var(--ink);
    font-size: 13px;
    border-radius: var(--radius-panel, 14px);
    overflow: hidden;
}
.kz-noti__head[b-nmt3qtez3c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
}
.kz-noti__title[b-nmt3qtez3c] { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.kz-noti__count[b-nmt3qtez3c] {
    min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill, 99px);
    background: var(--accent-soft); color: var(--accent-ink);
    font-size: 11px; font-weight: 700;
}
.kz-noti__link[b-nmt3qtez3c] {
    margin-left: auto;
    padding: 5px 9px; border: 0; border-radius: var(--radius-chip, 8px);
    background: transparent; color: var(--accent);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .14s ease;
}
.kz-noti__link:hover[b-nmt3qtez3c] { background: var(--accent-soft); }

.kz-noti__body[b-nmt3qtez3c] {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}
.kz-noti__list[b-nmt3qtez3c] { list-style: none; margin: 0; padding: 6px; }
.kz-noti__item[b-nmt3qtez3c] { list-style: none; margin: 0; padding: 0; }
.kz-noti__row[b-nmt3qtez3c] {
    display: block;
    border-radius: var(--radius-row, 11px);
    cursor: pointer;
    transition: background .14s ease;
}
.kz-noti__row:hover[b-nmt3qtez3c] { background: var(--hover); }
.kz-noti__inner[b-nmt3qtez3c] { display: flex; align-items: flex-start; gap: 12px; padding: 10px; }
.kz-noti__avatar[b-nmt3qtez3c] { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; }
.kz-noti__file[b-nmt3qtez3c] { flex: none; }
.kz-noti__thumb[b-nmt3qtez3c] { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.kz-noti__video[b-nmt3qtez3c] { width: 70px; height: 70px; border-radius: 8px; }
.kz-noti__msg[b-nmt3qtez3c] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.kz-noti__text[b-nmt3qtez3c] { font-size: 13px; color: var(--ink); }
.kz-noti__time[b-nmt3qtez3c] { font-size: 11.5px; color: var(--faint); }

.kz-noti__empty[b-nmt3qtez3c] {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 30px 20px 32px; text-align: center;
}
.kz-noti__empty i[b-nmt3qtez3c] { font-size: 26px; color: var(--faint); margin-bottom: 8px; }
.kz-noti__empty strong[b-nmt3qtez3c] { font-size: 14px; color: var(--ink); }
.kz-noti__empty span[b-nmt3qtez3c] { font-size: 12.5px; color: var(--faint); }

/* ---- bell (own <a>) + popup placement; same pattern as the profile menu ---- */
.kz-mh__bell.is-open[b-nmt3qtez3c] { background: var(--hover); color: var(--ink); }

/* transparent click-catcher: clicking anywhere outside closes the open popup */
.kz-mh__backdrop[b-nmt3qtez3c] { position: fixed; inset: 0; z-index: 70; background: transparent; }

.kz-noti-wrap[b-nmt3qtez3c] {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 80;
    border-radius: var(--radius-panel, 14px);
    background: var(--panel);
    box-shadow: var(--sh-3);
    animation: kzpop .16s ease-out;
}

.kz-noti__foot[b-nmt3qtez3c] { border-top: 1px solid var(--line); padding: 6px; }
.kz-noti__more[b-nmt3qtez3c] {
    width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-row, 11px);
    background: transparent; color: var(--accent);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .14s ease;
}
.kz-noti__more:hover[b-nmt3qtez3c] { background: var(--accent-soft); }
.kz-noti__more span[b-nmt3qtez3c] { font-weight: 500; color: var(--faint); }
.kz-noti__more:focus[b-nmt3qtez3c] { outline: none; }
.kz-noti__more:focus-visible[b-nmt3qtez3c] { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- hover-only thin scrollbar: no arrow buttons, invisible until the panel is hovered ---------- */
.kz-noti__body[b-nmt3qtez3c]::-webkit-scrollbar { width: 10px; height: 10px; }
.kz-noti__body[b-nmt3qtez3c]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.kz-noti__body[b-nmt3qtez3c]::-webkit-scrollbar-corner { background: transparent; }
.kz-noti__body[b-nmt3qtez3c]::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.kz-noti__body[b-nmt3qtez3c]::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box; border: 3px solid transparent; border-radius: 99px; min-height: 40px; }
.kz-noti__body:hover[b-nmt3qtez3c]::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--faint) 70%, transparent); }
.kz-noti__body[b-nmt3qtez3c]::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
@supports not selector(::-webkit-scrollbar) {
    .kz-noti__body[b-nmt3qtez3c] { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .kz-noti__body:hover[b-nmt3qtez3c] { scrollbar-color: var(--faint) transparent; }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css — Option-1 flex shell. Tokenized against kazzola-tokens.css.
   No legacy #page-* IDs, so nothing here fights the 31K legacy stylesheet.
   NavMenu / ContactsPanel carry their own scoped styles; this file only lays
   out the three panels and the sidebar chrome. */

.kz-shell[b-qbslntipce] {
    height: 100vh;
    display: flex;
    gap: var(--space-10, 10px);
    padding: var(--space-10, 10px);
    box-sizing: border-box;
    background: var(--app);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    overflow: hidden;
}

/* ---------- sidebar ---------- */
.kz-sidebar[b-qbslntipce] {
    flex: none;
    width: 246px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    background: var(--panel);
    border-radius: var(--radius-bubble, 18px);
    box-shadow: var(--sh-1);
    overflow: visible;   /* let the profile popup open above the footer */
    transition: width .18s ease;
}

.kz-sidebar.is-rail[b-qbslntipce] {
    width: 62px;
}

.kz-sidebar__brand[b-qbslntipce] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 14px 12px 8px;
}

.kz-sidebar.is-rail .kz-sidebar__brand[b-qbslntipce] {
    justify-content: center;
    padding: 14px 7px 8px;
}

.kz-sidebar__logo[b-qbslntipce] {
    height: 30px;
    max-width: 100%;
    object-fit: contain;
}

.kz-sidebar.is-rail .kz-sidebar__logo[b-qbslntipce] {
    display: none;
}

.kz-sidebar__rail-btn[b-qbslntipce] {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-chip, 8px);
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.kz-sidebar__rail-btn:hover[b-qbslntipce] {
    background: var(--hover);
    color: var(--ink);
}

.kz-ic-15[b-qbslntipce] { width: 15px; height: 15px; }

/* MainHeader slot — one unit for now; hidden in the rail to avoid overflow */
.kz-sidebar__header[b-qbslntipce] {
    flex: none;
    min-width: 0;
}


/* NavMenu scroll area (NavMenu renders its own wrapper: pinned search + scrolling list) */
.kz-sidebar__nav[b-qbslntipce] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kz-sidebar__footer[b-qbslntipce] {
    flex: none;
    position: relative;
    padding: 8px 10px 10px;
}

.kz-sidebar.is-rail .kz-sidebar__footer[b-qbslntipce] {
    padding: 8px 7px 10px;
    border-top: 1px solid var(--line);   /* nav icons scroll away above this line */
}

/* ---------- center (neutral slot for @Body) ---------- */
/* Panel look to match the mock, but no padding / no imposed child layout, so
   feature pages keep control of their own content. If a page's layout breaks,
   drop the background/border-radius here and leave it a transparent flex slot. */
.kz-center[b-qbslntipce] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    background: var(--panel);
    border-radius: var(--radius-bubble, 18px);
    box-shadow: var(--sh-1);
    overflow-y: auto;
    overflow-x: hidden;   /* no sideways scrollbar; content must fit the panel width */
}

/* breathing room for regular pages (Messages keeps its own full-bleed layout) */
.kz-center.has-pad[b-qbslntipce] {
    padding: 16px 20px 24px;
}

/* ---------- narrow screens (light-touch; full mobile drawer TBD) ---------- */
@media (max-width: 1040px) {
    .kz-shell[b-qbslntipce] { gap: 8px; padding: 8px; }
}

/* ---------- hover-only thin scrollbar: no arrow buttons, invisible until the panel is hovered ---------- */
.kz-center[b-qbslntipce]::-webkit-scrollbar { width: 12px; height: 12px; }
.kz-center[b-qbslntipce]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.kz-center[b-qbslntipce]::-webkit-scrollbar-corner { background: transparent; }
.kz-center[b-qbslntipce]::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.kz-center[b-qbslntipce]::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box; border: 3px solid transparent; border-radius: 99px; min-height: 40px; }
.kz-center:hover[b-qbslntipce]::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--faint) 70%, transparent); }
.kz-center[b-qbslntipce]::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
@supports not selector(::-webkit-scrollbar) {
    .kz-center[b-qbslntipce] { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .kz-center:hover[b-qbslntipce] { scrollbar-color: var(--faint) transparent; }
}

/* no black click-border on the collapse button; ring only for keyboard focus */
.kz-sidebar__rail-btn:focus[b-qbslntipce] { outline: none; }
.kz-sidebar__rail-btn:focus-visible[b-qbslntipce] { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.kz-sidebar__rail-btn[b-qbslntipce] { -webkit-tap-highlight-color: transparent; }
/* /Shared/NavMenu.razor.rz.scp.css */
/* NavMenu.razor.css — scoped. Tokenized against kazzola-tokens.css.
   Item rules use ::deep (harmless; all items are authored <button>s). */

.kz-nav-wrap[b-4v0w2ukhr7] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* ---- search (filters the menu) ---- */
.kz-nav__search[b-4v0w2ukhr7] {
    position: relative;
    flex: none;
    padding: 4px 8px 8px;
}

.kz-nav__search-ic[b-4v0w2ukhr7] {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--faint);
    pointer-events: none;
}

.kz-nav__search-input[b-4v0w2ukhr7] {
    width: 100%;
    height: 35px;
    box-sizing: border-box;
    padding: 0 12px 0 33px;
    border: 0;
    outline: none;
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--ink);
    font-size: 12.5px;
}

.kz-nav__search-input[b-4v0w2ukhr7]::placeholder { color: var(--faint); }
.kz-nav__search-input:focus[b-4v0w2ukhr7] { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---- scrolling list ---- */
.kz-nav[b-4v0w2ukhr7] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);                 /* 2px */
    padding: 0 var(--space-8) var(--space-8);
    overflow-y: auto;
    overflow-x: hidden;
    /* soft fade at the top/bottom edge so scrolled icons dissolve instead of being cut off */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 18px), transparent 100%);
}

/* ---- item (parent / leaf) ---- */
.kz-nav[b-4v0w2ukhr7]  .kz-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-11);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 12px;
    padding: 9px var(--space-11);
    font: inherit;
    font-size: 13.5px;
    font-weight: 450;
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__item:hover { background: var(--hover); }

.kz-nav[b-4v0w2ukhr7]  .kz-nav__item.is-active {
    background: var(--accent-soft) !important;
    color: var(--accent-ink) !important;
    font-weight: 600;
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 18px;
    color: var(--muted);
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__icon > i { font-size: 16px; line-height: 1; }

.kz-nav[b-4v0w2ukhr7]  .kz-nav__item.is-active .kz-nav__icon { color: var(--accent); }

.kz-nav[b-4v0w2ukhr7]  .kz-nav__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__chev {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--faint);
    transition: transform .18s ease;
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__group.is-open .kz-nav__chev { transform: rotate(90deg); }

/* ---- submenu (buttons) ---- */
.kz-nav[b-4v0w2ukhr7]  .kz-nav__sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-2) 0 var(--space-4);
    animation: kzdrop .15s ease-out;
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__subitem {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 11px 7px 34px;
    border: 0;
    border-radius: var(--radius-row);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    color: var(--muted);
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__subitem:hover { background: var(--hover); color: var(--ink); }
.kz-nav[b-4v0w2ukhr7]  .kz-nav__subitem.is-active { color: var(--accent-ink) !important; font-weight: 600; }

.kz-nav[b-4v0w2ukhr7]  .kz-nav__dot {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: var(--off);
}

.kz-nav[b-4v0w2ukhr7]  .kz-nav__subitem.is-active .kz-nav__dot { background: var(--accent); }

/* ---- collapsed rail (62px) ---- */
.kz-nav-wrap.is-rail .kz-nav__search[b-4v0w2ukhr7] { display: none; }
.kz-nav-wrap.is-rail .kz-nav[b-4v0w2ukhr7] { padding: 4px 7px 8px; }
.kz-nav-wrap.is-rail[b-4v0w2ukhr7]  .kz-nav__item { justify-content: center; gap: 0; padding: 9px 0; }
.kz-nav-wrap.is-rail[b-4v0w2ukhr7]  .kz-nav__label,
.kz-nav-wrap.is-rail[b-4v0w2ukhr7]  .kz-nav__chev { display: none; }
.kz-nav-wrap.is-rail[b-4v0w2ukhr7]  .kz-nav__sub { display: none !important; }

/* ---------- hover-only thin scrollbar: no arrow buttons, invisible until the panel is hovered ---------- */
.kz-nav[b-4v0w2ukhr7]::-webkit-scrollbar { width: 10px; height: 10px; }
.kz-nav[b-4v0w2ukhr7]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.kz-nav[b-4v0w2ukhr7]::-webkit-scrollbar-corner { background: transparent; }
.kz-nav[b-4v0w2ukhr7]::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.kz-nav[b-4v0w2ukhr7]::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box; border: 3px solid transparent; border-radius: 99px; min-height: 40px; }
.kz-nav:hover[b-4v0w2ukhr7]::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--faint) 70%, transparent); }
.kz-nav[b-4v0w2ukhr7]::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
@supports not selector(::-webkit-scrollbar) {
    .kz-nav[b-4v0w2ukhr7] { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .kz-nav:hover[b-4v0w2ukhr7] { scrollbar-color: var(--faint) transparent; }
}

/* no black click-border on rows; subtle inset ring only for keyboard focus */
.kz-nav[b-4v0w2ukhr7]  .kz-nav__item:focus,
.kz-nav[b-4v0w2ukhr7]  .kz-nav__subitem:focus { outline: none; }
.kz-nav[b-4v0w2ukhr7]  .kz-nav__item:focus-visible,
.kz-nav[b-4v0w2ukhr7]  .kz-nav__subitem:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.kz-nav[b-4v0w2ukhr7]  .kz-nav__item,
.kz-nav[b-4v0w2ukhr7]  .kz-nav__subitem { -webkit-tap-highlight-color: transparent; }