/* ===========================================================================
   Client partner dropdown — opens under the navbar client badge (left side).
   =========================================================================== */

.sp { position: relative; }
.sp-trigger { cursor: pointer; user-select: none; transition: border-color .15s ease, box-shadow .15s ease; }
.sp-trigger:hover { border-color: #d9c3c9; }
.sp-trigger.is-open, .sp-trigger:focus-visible { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.sp-chev { font-size: 16px !important; margin-left: 2px; transition: transform .15s ease; }
.sp-trigger.is-open .sp-chev { transform: rotate(180deg); }

/* The navbar is its own (sticky, z-index:10) stacking layer; lift it above the page while open. */
.app-navbar:has(.sp-panel) { z-index: 3000; }

.sp-backdrop { position: fixed; inset: 0; z-index: 3000; background: transparent; }

.sp-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 3001;
    width: 320px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 14px;
    box-shadow: 0 12px 34px rgba(20, 20, 40, .22), 0 0 0 1px rgba(20, 20, 40, .04);
    animation: sp-pop .14s ease-out;
}
/* little notch pointing at the badge */
.sp-panel::before {
    content: ""; position: absolute; top: -6px; left: 28px; width: 12px; height: 12px;
    background: #fbf3f5; transform: rotate(45deg); border-radius: 2px 0 0 0;
}
@keyframes sp-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.sp-panel__head {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; background: #fbf3f5; border-radius: 14px 14px 0 0;
}
.sp-panel__title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a6f73; }
.sp-panel__count { font-size: .74rem; font-weight: 700; color: var(--primary-color); background: #f6e9ed; border-radius: 999px; padding: 1px 9px; }

.sp-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 0 10px; border: 1px solid #d9dde3; border-radius: 9px; }
.sp-search .material-symbols-rounded { font-size: 18px; color: #8a8f99; }
.sp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 0; font: inherit; font-size: .88rem; }
.sp-search:focus-within { border-color: var(--primary-color); }

.sp-list { max-height: 300px; overflow-y: auto; padding: 6px; }
.sp-item {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    border: 0; background: none; cursor: pointer; text-align: left; font: inherit;
    padding: 9px 10px; border-radius: 10px; color: #2b2f36;
}
.sp-item:hover { background: #faf3f5; }
.sp-item.is-selected { background: #f6e9ed; }
.sp-item__name { flex: 1; min-width: 0; font-size: .94rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-item.is-selected .sp-item__name { color: var(--primary-color); }
.sp-item__check { font-size: 20px; color: var(--primary-color); flex: none; }
.sp-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1e4e8; color: var(--primary-color); font-size: .74rem; font-weight: 700;
}
.sp-item.is-selected .sp-avatar { background: var(--primary-color); color: #fff; }
.sp-empty { padding: 16px 12px; text-align: center; font-size: .86rem; color: #8a8f99; }

.sp-retry { border: 0; background: none; padding: 0; margin-left: 4px; font: inherit; font-weight: 600; color: var(--primary-color); cursor: pointer; }
.sp-retry:hover { text-decoration: underline; }

/* Client & Partner drawer: reuses the Datebook's overlay / panel / header; the body is two dropdown fields. */
.app-navbar:has(.sp-drawer) { z-index: 3000; }
.sp-drawer__body { padding: 8px 24px 28px; display: flex; flex-direction: column; gap: 20px; }
.sp-field { display: flex; flex-direction: column; gap: 8px; }
.sp-field__label { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a6f73; }
.sp-field__btn {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    padding: 12px 14px; border: 1px solid #e3d8db; border-radius: 12px; background: #fff;
    font: inherit; font-size: .96rem; font-weight: 600; color: #2b2f36; cursor: pointer; text-align: left;
    box-shadow: 0 1px 2px rgba(28, 20, 22, .05);
}
.sp-field__btn:hover { border-color: #cdbfc3; }
/* Client & Partner drawer, client-portal login: the client is fixed, not a dropdown. */
.sp-field__btn--static { cursor: default; }
.sp-field__btn--static:hover { border-color: #e3d8db; }
.sp-field__btn.is-open { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.sp-field__icon { font-size: 22px; color: var(--primary-color); flex: none; }
.sp-field__value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-field__value.is-placeholder { color: #8a8f99; font-weight: 500; }
.sp-field__chev { font-size: 22px; color: #8a8f99; flex: none; transition: transform .15s ease; }
.sp-field__btn.is-open .sp-field__chev { transform: rotate(180deg); }
.sp-field__list { background: #fff; border: 1px solid #e6e1e3; border-radius: 12px; box-shadow: 0 6px 18px rgba(20, 20, 40, .08); }
.sp-search--tight { margin: 10px 10px 4px; }
.sp-field__items { max-height: 320px; overflow-y: auto; padding: 4px 6px 8px; }
.sp-item--client { padding: 9px 10px; }
.sp-drawer__hint { margin: 4px 2px 0; font-size: .84rem; color: #6b5f63; }
.sp-avatar--all .material-symbols-rounded { font-size: 20px; }