/* ============================================================================
   Client Navigator — header active-status pill
   ========================================================================== */
.cn-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cn-status-pill-active {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.cn-status-pill-inactive {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #d1d5db;
}

.cn-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ============================================================================
   Header identity widget (avatar + name + subtitle) — sits on the gradient banner
   ========================================================================== */
.cn-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    width: 100%;
}

.cn-avatar {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    /* Solid brand color (#4147d5 — Entirety:IconColor / nav component color). */
    background: #4147d5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Entity image rendered as a white silhouette (mask) on the blue tile */
.cn-avatar-icon {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cn-avatar-initials {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .5px;
}

.cn-identity-text {
    min-width: 0;
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.cn-identity-name {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tight, single row of pills under the name. Pills reuse the shared .cp-pill /
   .tag-pill styles (same height + 4px corners); only the gap is set here. */
.cn-pill-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: 11px;
}

/* The tag PillsRenderer wrapper must sit inline in the row, not span full width. */
.cn-pill-row .pr-wrapper {
    width: auto;
    min-height: 0;
    align-items: center;
}

.cn-pill-row .pr-pills {
    gap: 5px;
}

/* ── Uniform pill sizing: every header pill is exactly 20px tall, same font ── */
.cn-pill-row .tag-pill,
.cn-pill-row .cp-pill,
.cn-pill-row .pr-pill {
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    letter-spacing: 0;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Inner segments: kill vertical padding, center vertically so the fixed height holds */
.cn-pill-row .tp-left,
.cn-pill-row .cp-pill-l,
.cn-pill-row .cp-pill-r,
.cn-pill-row .pr-pill {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* Icons inside the pills match the text size */
.cn-pill-row .cp-pill-party-icon,
.cn-pill-row .pr-pill-icon {
    font-size: 11px;
}

/* Active-status pill: a tag-pill-shaped chip with a leading status dot. */
.cn-pill-row .cn-status .tp-left {
    gap: 5px;
    font-weight: 600;
}

.cn-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Customer number — client-name typography in the brand color. */
.cn-identity > .cn-customer-no {
    margin-left: auto;
    align-self: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    /* First theme / brand color (#4147d5 — matches the avatar tile). */
    color: #4147d5;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* The "Numer klienta:" caption stays regular weight; only the number is bold. */
.cn-customer-no .cn-customer-no-label {
    font-weight: 400;
}

/* Inside the client popup, the Save/Close toolbar sits in a separate region to the
   right of the header content, so normal flow can't reach under it. Anchor the number
   to the popup header (nearest positioned ancestor) and pin it just below that toolbar.
   Offsets are measured against the popup header's top-right corner. */
.dxbl-modal-content .cn-identity > .cn-customer-no {
    position: absolute;
    top: 46px;
    right: 47px;
    margin: 0;
    z-index: 2;
}

/* ============================================================================
   Business-profile overview widget (sketch-style key/value panel)
   ========================================================================== */
.cn-kv {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px 14px;
    font-size: 12.5px;
    align-items: start;
}

.cn-kv .cn-k {
    color: #6b7280;
}

.cn-kv .cn-v {
    color: #111827;
    word-break: break-word;
}

.cn-section-label {
    color: #6b7280;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    margin: 12px 0 6px;
}

.cn-description {
    font-size: 12.5px;
    line-height: 1.5;
    color: #111827;
    white-space: pre-wrap;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 8px 10px;
    background: #fff;
}

/* ── Service-agreement selector (Documents tab) ─────────────────────────── */
.sa-selector-radio {
    padding: 4px 2px 8px;
}

/* Horizontal radio group of contract pills: space the rows out and vertically
   center each pill with its radio circle. */
.sa-selector-radio .dxbl-radio-list-item {
    align-items: center;
    margin-right: 14px;
    margin-bottom: 6px;
}

.sa-selector-empty {
    padding: 12px 4px;
    font-size: 12.5px;
    color: #6b7280;
    font-style: italic;
}