/* Client list: shared purchase-list visual language, six stable columns. */
#clientsView .clients-table-wrapper {
    flex: 1 1 auto; min-height: 0; min-width: 0;
    overflow: auto; scrollbar-gutter: auto; scrollbar-width: none;
}
#clientsView .clients-table-wrapper::-webkit-scrollbar { display: none; }
#clientsView #clientsTable {
    width: 100%; min-width: 880px; table-layout: fixed;
    border-collapse: collapse; background: white; overflow: visible;
    flex: none; min-height: 0; border: 0; box-shadow: none;
}
#clientsView #clientsTable thead { position: sticky; top: 0; z-index: 20; background: transparent; }
#clientsView #clientsTable th {
    height: 50px; padding: 0 12px; background: linear-gradient(#f5f8fd, #e7eef8);
    color: #3d526e; font-size: var(--crm-text-size); font-weight: 600; text-align: center;
    vertical-align: middle; border-bottom: 1px solid #dce5f1;
    box-shadow: inset 0 1px #fff, inset 0 -1px #dce5f1;
}
#clientsView #clientsTable td {
    height: 66px; padding: 10px 12px; border-bottom: 1px solid #edf1f6;
    line-height: 1.4; text-align: center; vertical-align: middle; color: #334155;
}
#clientsView #clientsTable :is(th, td) { box-sizing: border-box; }
#clientsView #clientsTable :is(th, td):nth-child(2) { width: 200px; }
#clientsView #clientsTable :is(th, td):nth-child(3) { width: 108px; }
#clientsView #clientsTable :is(th, td):nth-child(4) { width: 140px; }
#clientsView #clientsTable :is(th, td):nth-child(5) { width: 170px; }
#clientsView #clientsTable :is(th, td):nth-child(6) { width: 91px; padding-left: 6px; padding-right: 6px; }
#clientsView #clientsTable :is(th, td):nth-child(7) { width: 115px; padding-left: 12px; padding-right: 12px; }
#clientsView #clientsTable .client-identity { text-align: left; }
#clientsView .client-row { display: table-row; cursor: pointer; background: white; transition: background .15s ease; scroll-margin-top: 50px; }
#clientsView .client-row:hover { background: #f8faff; }
#clientsView .client-identity-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
#clientsView .client-display-name { color: #28476d; font-weight: 700; overflow-wrap: anywhere; }
#clientsView .client-contact-name { margin-top: 4px; color: #7d8da1; font-size: var(--crm-text-size); overflow-wrap: anywhere; }
#clientsView .client-phones { white-space: nowrap; font-size: var(--crm-text-size); font-variant-numeric: tabular-nums; }
:is(#clientsView, #clientView) .client-blocked-pill {
    position: relative; isolation: isolate; display: inline-block;
    padding: 5px 9px; border: 0; border-radius: 9px;
    background: transparent; box-shadow: none;
    color: #fff; font-size: var(--crm-text-size); font-weight: 600; line-height: 1.4;
    text-shadow: 0 1px 2px #6b102b; white-space: nowrap;
}
:is(#clientsView, #clientView) .client-blocked-pill::before {
    content: ''; position: absolute; inset: -7px; z-index: -1; pointer-events: none;
    border-image: url('/clients/alphabet-glass-key.webp') 90 fill / 16px / 0 stretch;
    filter: hue-rotate(125deg) saturate(.85);
}
#clientsView .client-count-pill {
    display: inline-block; min-width: 32px; padding: 4px 9px; border: 1px solid #d2deed;
    border-radius: 9px; background: linear-gradient(#fff, #e9f0fa);
    color: #28476d; box-shadow: inset 0 1px #fff, 0 2px #dce5f1; font-weight: 600;
}
#clientsView .client-list-money { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#clientsView .client-list-money :is(img, crm-icon) { width: 20px; height: 20px; object-fit: contain; }
#clientsView .client-list-money strong { color: #2e4f78; font-size: var(--crm-text-size); }
#clientsView #clientsTable .client-last-order { color: #52677f; font-size: var(--crm-text-size); white-space: nowrap; }

#clientsView mark.search-hit, .orders-module mark.search-hit {
    background: linear-gradient(180deg, #e9faff 0%, #b9e7ff 42%, #8dcfff 100%);
    color: #063b78;
    box-shadow: inset 0 1px 1px #ffffffed, inset 0 -1px 1px #368edc66, 0 1px 3px #2589d52b;
    font-weight: 700;
    padding: 0 1px;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

#alphabet {
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 8px 0;
    background: transparent;
    border: 0;
}

.alphabet-switch {
    display: flex;
    gap: 5px;
}

.alphabet-mode {
    padding: 0 11px;
}

.alphabet-letters {
    display: flex;
    align-items: center;
    gap: 4px;
}

.alphabet-letter {
    min-width: 29px;
    padding: 0 6px;
    font-size: var(--crm-text-size);
}

.client-fields-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 170px 105px 180px;
    gap: 16px;
    align-items: end;
}

.client-note-field {
    margin-top: 16px;
}

#clientNoteModalInput {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid #d5deeb;
    border-radius: 9px;
    outline: 0;
    color: #1e293b;
}

#clientNoteModalInput:focus {
    border-color: var(--crm-blue);
    box-shadow: 0 0 0 3px rgb(65 105 225 / 9%);
}

#saveClientNoteModal {
    width: 125px;
    height: 40px;
}

#clientNote {
    min-height: 58px;
}

#contactsList,
#deliveriesList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.contact-block,
.delivery-block {
    position: relative;
    min-width: 0;
    height: 100%;
    padding: 16px;
    background: var(--crm-surface);
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgb(15 23 42 / 3%);
}

.item-header--remove-only {
    height: 0;
    margin: 0;
}

.contact-content {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1.15fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 18px;
    row-gap: 8px;
}

.contact-content > .contact-field-header:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.contact-content > .contact-field-header:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.contact-name-cell {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.phones-list {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.contact-email-container {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    line-height: 1;
}

.contact-email-container .field,
.contact-email-container .email-row {
    width: 100%;
    min-width: 0;
}

.phone-add-button {
    grid-column: 2;
    grid-row: 3;
}

.contact-field-header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 22px;
}

.contact-field-header label {
    margin: 0;
    color: var(--crm-muted);
    font-size: var(--crm-text-size);
    font-weight: bold;
}

.contact-field-header .remove-contact {
    position: static;
    width: auto;
    height: auto;
    padding: 2px 7px;
    font-size: var(--crm-text-size);
}

.phone-block {
    width: 100%;
    max-width: none;
}

.phone-row,
.email-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
}

.phone-row .contact-phone,
.phone-row .delivery-phone,
.email-row .contact-email {
    min-width: 0;
    flex: 1 1 auto;
}

.field input.client-phone--error,
.field input.client-phone--error:hover,
.field input.client-phone--error:focus {
    border-color: #dc2626;
}

.field input.client-phone--error:focus {
    box-shadow: 0 0 0 3px rgb(220 38 38 / 15%);
}

.add-email,
.phone-add-button {
    display: flex;
    align-items: center;
    width: auto;
    height: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--crm-blue);
    font-size: var(--crm-text-size);
    font-weight: 700;
    line-height: 1;
    text-align: left;
    cursor: pointer;
}

.add-email:hover,
.phone-add-button:hover {
    background: transparent;
    text-decoration: underline;
}

.remove-email {
    flex: 0 0 42px;
    height: 42px;
}

.phone-row .remove-phone {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
}

.delivery-block > .delivery-actions {
    position: absolute;
    top: 2px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
}

.delivery-block > .delivery-actions .default-delivery,
.delivery-block > .delivery-actions .remove-delivery {
    width: 32px;
    height: 32px;
    margin: 0;
    line-height: 1;
}

.delivery-block > .delivery-actions .default-delivery {
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #ca8a04;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.delivery-block > .delivery-actions .default-delivery:hover {
    background: #fef9c3;
}

.delivery-block--default {
    border-color: #16a34a;
}

.delivery-first-row,
.delivery-second-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1.15fr);
    gap: 18px;
}

.delivery-first-row {
    margin-bottom: 14px;
}

.delivery-name-field,
.delivery-phone-field,
.delivery-address-field,
.delivery-carrier-field {
    min-width: 0;
}

@media (max-width: 1250px) {
    .client-fields-row {
        grid-template-columns: minmax(240px, 1fr) 160px 95px 170px;
    }

    .contact-content,
    .delivery-first-row,
    .delivery-second-row {
        grid-template-columns: minmax(0, 1.1fr) minmax(260px, 1.2fr);
    }
}

@media (max-width: 1050px) {
    #contactsList,
    #deliveriesList {
        grid-template-columns: 1fr;
    }

    .client-fields-row {
        grid-template-columns: 1fr 160px 100px 170px;
    }
}

@media (max-width: 900px) {
    .client-fields-row {
        grid-template-columns: 1fr 1fr;
    }
}

.client-company-field {
    align-self: start;
}

.clients-main[hidden],
.search-box[hidden],
#addClient[hidden],
#addMessageTemplate[hidden] {
    display: none !important;
}

.templates-table-pane {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.templates-table-pane .templates-table-header {
    flex: 0 0 52px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    position: sticky;
    top: 0;
    z-index: 4;
}

#templatesTable {
    overflow: visible;
    flex: none;
    background: white;
    border: 0;
    box-shadow: none;
}

.templates-main .templates-table-header,
.templates-main .template-row {
    grid-template-columns: 36px minmax(160px, 240px) minmax(0, 1fr) 52px;
}

.table-header.templates-table-header > div {
    justify-content: center;
    text-align: center;
}

.templates-main .template-row {
    display: grid;
    align-items: center;
    min-height: 58px;
    background: white;
    border-bottom: 1px solid var(--crm-table-line);
    cursor: pointer;
}

.templates-main .template-row:hover {
    background: var(--crm-hover);
}

.templates-main .template-row > div {
    padding: 10px 16px;
    line-height: 1.35;
    overflow: hidden;
    text-align: left;
}

.template-row-handle-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    overflow: visible !important;
}

.template-row-handle {
    display: grid;
    grid-template-columns: 3px 3px;
    grid-template-rows: repeat(4, 3px);
    gap: 3px 3px;
    box-sizing: content-box;
    width: 9px;
    height: 21px;
    flex-shrink: 0;
    padding: 2px 0;
    border: 0;
    background: transparent;
    cursor: grab;
}

.template-row-handle:active {
    cursor: grabbing;
}

.template-row-handle span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #94a3b8;
}

.templates-main .template-row--dragging {
    opacity: 0.45;
}

.template-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.template-row-delete {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--crm-danger, #dc2626);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.template-row-delete:hover {
    background: #fee2e2;
    color: #991b1b;
}

.template-delete-text {
    margin: 0 0 8px;
    color: #475569;
    font-size: var(--crm-text-size);
    line-height: 1.4;
}

.template-delete-card .comment-modal-actions {
    gap: 10px;
}

.template-delete-card .comment-modal-actions .btn-secondary,
.template-delete-confirm {
    height: 40px;
    padding: 0 16px;
}

.template-delete-confirm {
    border: 0;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.template-delete-confirm:hover {
    background: #b91c1c;
}

.template-row-name {
    font-weight: 700;
    color: var(--crm-text-strong);
}

.template-row-body {
    color: #475569;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    text-indent: 0;
}

.templates-empty {
    padding: 28px 16px;
    color: #64748b;
    font-size: var(--crm-text-size);
}

.template-modal-card {
    width: min(560px, 100%);
}

.template-modal-label {
    display: block;
    margin: 0 0 6px;
    color: #334155;
    font-size: var(--crm-text-size);
    font-weight: 700;
}

.template-modal-card input,
.template-modal-card textarea {
    width: 100%;
    margin-bottom: 14px;
    padding: 9px 12px;
    border: 1px solid #cbd6e7;
    border-radius: 8px;
    font: inherit;
}

.template-modal-card textarea {
    resize: vertical;
    min-height: 120px;
}

.template-variables {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.template-variables-label {
    width: 100%;
    color: #64748b;
    font-size: var(--crm-text-size);
    font-weight: 700;
}

.template-variable {
    padding: 6px 10px;
    border: 1px solid #cbd6e7;
    border-radius: 8px;
    background: #f8fafc;
    color: var(--crm-blue-deep);
    font-size: var(--crm-text-size);
    font-weight: 700;
    cursor: pointer;
}

.template-variable:hover {
    background: #edf2ff;
}

.template-modal-card .comment-modal-actions {
    gap: 10px;
}

.template-modal-card .comment-modal-actions .btn-secondary,
.template-modal-card .orders-primary-button {
    height: 40px;
    padding: 0 16px;
}

.duplicate-hint {
    position: relative;
    margin-top: 8px;
    padding: 10px 12px 10px 42px;
    background: linear-gradient(180deg, #fff7e8ed, #ffe6b6d9 45%, #efb34fd9);
    border: 0;
    border-radius: 14px;
    box-shadow: inset 3px 0 #ffffffed, inset 9px 0 #e9a32766, inset -3px 0 3px #fff, inset 0 2px #fff, inset 0 -2px #ffffffb3;
    backdrop-filter: blur(14px);
    color: #795114;
    font-size: var(--crm-text-size);
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.duplicate-hint::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    background: url('/icons/modal-warning-style4.png') center / contain no-repeat;
}

.duplicate-hint-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #af7c3770;
    text-underline-offset: 3px;
    cursor: pointer;
}

.duplicate-hint-link:hover { color: #51320d; text-decoration-color: currentColor; }

.client-view-header {
    height: auto;
    min-height: 80px;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.client-card-stats {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.client-card-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 84px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 18px;
    background: var(--client-ribbon-fill);
    box-shadow: inset 3px 0 #ffffffed, inset 9px 0 #64baff66, inset -3px 0 3px #fff, inset 0 2px #fff, inset 0 -2px #ffffffb3;
    text-align: center;
}

.client-card-stat-label {
    color: #64748b;
    font-size: var(--crm-text-size);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.client-card-stat-value,
.client-card-stat strong {
    color: #173c70;
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.2;
}

.client-stat-money, .client-stat-value-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.client-stat-money :is(img, crm-icon), .client-stat-value-row :is(img, crm-icon) { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
.client-overview { display: flex; align-items: center; gap: 20px; min-width: 0; }
.client-discount-control { display: flex; align-items: center; gap: 8px; color: #173c70; font-weight: 800; font-size: 22px; white-space: nowrap; }
:is(#openClientDiscount, #deleteClientButton) { position: relative; display: block; flex: 0 0 70px; width: 70px; height: 70px; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; transition: transform 160ms ease, filter 160ms ease; }
:is(#openClientDiscount, #deleteClientButton) :is(img, crm-icon) { position: absolute; inset: 0; width: 70px; height: 70px; object-fit: contain; z-index: 1; }
#clientView :is(#addContact, #addDelivery) { position: relative; display: block; flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; transition: transform 160ms ease, filter 160ms ease; }
#clientView :is(#addContact, #addDelivery) :is(img, crm-icon) { position: absolute; inset: 0; width: 40px; height: 40px; object-fit: contain; z-index: 1; }
#clientView :is(#addContact, #addDelivery):hover { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#clientView :is(#addContact, #addDelivery):active { transform: translateY(1px) scale(.96); filter: none; }
:is(#openClientDiscount, #deleteClientButton):hover { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
:is(#openClientDiscount, #deleteClientButton):active { transform: translateY(1px) scale(.96); filter: none; }
#clientDiscountDraft { width: 140px; max-width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid #accbea; border-radius: 12px; background: #ffffffd9; color: #173c70; text-align: center; font: 400 var(--crm-text-size)/1.5 var(--crm-font); }
#clientDiscountModal #clientDiscountError { color: #a12530; }
#clientDiscountDraft { appearance: textfield; -moz-appearance: textfield; }
#clientDiscountDraft::-webkit-inner-spin-button,
#clientDiscountDraft::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#clientDiscountModal button:disabled { opacity: .4; cursor: default; }
@media (prefers-reduced-motion: reduce) { :is(#openClientDiscount, #deleteClientButton) { transition: none; } }
@container client-card (max-width: 680px) {
    .client-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

#clientView .client-status-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.client-changes-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 220px));
    height: 100vh;
    background: white;
    border-left: 1px solid var(--crm-line-strong);
    box-shadow: -12px 0 32px rgb(15 23 42 / 10%);
}

.client-changes-panel[hidden] {
    display: none;
}

.client-changes-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--crm-line);
}

.client-changes-head h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.client-changes-head > div {
    min-width: 0;
    flex: 1 1 auto;
}

.client-changes-client-name {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 18px;
    color: #173c70;
    font-size: var(--crm-text-size);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.client-changes-client-name::after {
    content: '';
    display: block;
    width: 72%;
    max-width: 200px;
    height: 2px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, transparent, #78caff 30%, #b6e7ff 50%, #78caff 70%, transparent);
    filter: drop-shadow(0 1px 3px #65bdff80);
}

.client-changes-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--crm-danger);
    font-size: 24px;
    line-height: 1;
}

.client-changes-close:hover {
    background: #fee2e2;
}

.client-changes-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0 16px;
}

.client-changes-empty {
    padding: 24px 16px;
    color: var(--crm-muted);
}

.client-changes-event {
    padding: 12px 16px;
    border-bottom: 1px solid var(--crm-line);
}

.client-changes-event-head {
    margin: 0 0 8px;
    color: #172033;
    font-size: var(--crm-text-size);
    font-weight: 700;
}

.client-changes-event-meta {
    margin: 0 0 8px;
    color: var(--crm-muted);
    font-size: var(--crm-text-size);
    line-height: 1.4;
}

.client-changes-order-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--crm-blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.client-changes-order-link:hover {
    text-decoration: underline;
}

.client-changes-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.client-changes-line,
.client-changes-block {
    color: #334155;
    font-size: var(--crm-text-size);
    line-height: 1.45;
}

.client-changes-block-title {
    margin: 0 0 4px;
    font-weight: 700;
}

.client-changes-block-lines {
    margin: 0;
    padding: 0 0 0 14px;
}

/* Header uses the purchase icon selectors and action sizing. */
#clientsView { display: flex; flex-direction: column; height: 100vh; }
#clientsView[hidden] { display: none; }
#clientsView .clients-toolbar { flex: 0 0 var(--crm-toolbar-h); gap: 20px; }
#clientsView .clients-toolbar .search-box { position: static; transform: none; flex: 1; width: auto; min-width: 140px; max-width: 620px; margin: 0 auto; }
#clientsView .clients-main { flex: 1; min-height: 0; height: auto; }
#clientsView .clients-list-filters, .clients-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker { width: 70px; flex: 0 0 70px; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger { width: 70px; height: 70px; padding: 0; border: 0; background: transparent; box-shadow: none; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger :is(img, crm-icon) { display: block; width: 70px; height: 70px; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger::after { display: none; }
/* Icon hover extends outside its slot; text-select ellipsis must not clip it. */
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger > span { display: block; flex: 0 0 70px; width: 70px; height: 70px; overflow: visible; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger:focus { outline: none !important; box-shadow: none !important; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger:focus-visible :is(img, crm-icon) { filter: drop-shadow(0 2px 3px #2563eb88); }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-menu { min-width: min(280px, calc(100vw - 24px)); }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-option { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; justify-content: start; gap: 10px; min-height: 90px; padding: 10px 12px; text-align: left; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-option::after { content: none; display: none; }
:is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-option :is(img, crm-icon) { display: block; width: 70px; height: 70px; object-fit: contain; margin: 0; }
:is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon { display: inline-flex; align-items: center; justify-content: center; position: static; flex: 0 0 70px; width: 70px; min-width: 70px; height: 70px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; }
:is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon :is(img, crm-icon) { display: block; width: 70px; height: 70px; object-fit: contain; }
:is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon :is(img, crm-icon), :is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger :is(img, crm-icon) { object-fit: contain; transition: transform 160ms ease, filter 160ms ease; }
:is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon:hover :is(img, crm-icon), :is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger:hover:not(:disabled) :is(img, crm-icon) { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
:is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon:active :is(img, crm-icon), :is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger:active :is(img, crm-icon) { transform: translateY(1px) scale(.96); filter: none; }
@media (prefers-reduced-motion: reduce) { :is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon :is(img, crm-icon), :is(#clientsView, #clientView, #suppliersView, #purchaseCardView, #ordersListView, #orderCardView, #warehouseView, #physicalStockPanel) .client-icon-picker .purchase-select-trigger :is(img, crm-icon) { transition: none; } }
:is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
:is(#clientsView, #clientView, #messageTemplatesView, #physicalStockPanel) .client-header-icon[hidden], #clientsView #clientsListTitle[hidden], #clientsView .clients-list-filters[hidden], #clientsView #clientsTemplatesNavigation[hidden] { display: none; }
#clientsSearchScope { position: absolute; top: calc(50% + 27px); left: 190px; color: #687d99; font-size: var(--crm-text-size); }
@media (max-width: 1000px) { #clientsView .clients-toolbar { gap: 10px; } #clientsView .clients-list-filters, .clients-header-actions { gap: 4px; } }

/* Local preview: blue glass search, scoped to Clients until approved. */
#clientsView .clients-toolbar .search-box {
    height: 52px; padding: 0 12px; gap: 12px; border-radius: 14px;
    border: 1px solid #aac9eb;
    background: linear-gradient(175deg, #fafdff 0%, #e5f3ff 35%, #d5e9fb 74%, #eaf6ff 100%);
    box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #a8cae859, 0 3px 7px #365b8520;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
#clientsView .clients-toolbar .search-box:hover { border-color: #83b5e6; }
#clientsView .clients-toolbar .search-box:focus-within {
    border-color: #70acf0;
    outline: 2px solid #83baff !important; outline-offset: 2px !important;
    box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #a8cae859, 0 0 14px #74b6ff45 !important;
}
#clientsView .clients-search-icon { flex: 0 0 36px; width: 36px; height: 36px; object-fit: contain; pointer-events: none; }
#clientsView .search-box input { min-width: 0; color: #254c78; background: transparent; font-size: var(--crm-text-size); }
#clientsView .search-box input::placeholder { color: #7391b2; opacity: 1; }
#clientsView .search-clear { flex: 0 0 28px; width: 28px; height: 28px; color: #789abd; font-size: 25px; text-shadow: 0 1px #fff; }
#clientsView .search-clear:hover { color: #285d9a; background: #ffffff70; }
@media (prefers-reduced-motion: reduce) { #clientsView .clients-toolbar .search-box { transition: none; } }

/* Message templates: purchase-style list and dialogs. */
#messageTemplatesView .templates-table-pane { scrollbar-gutter: stable; padding: 8px 0 16px; }
#messageTemplatesView #templatesTable { display: grid; gap: 12px; padding: 4px; background: transparent; }
#messageTemplatesView .template-row {
    grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; min-height: 76px;
    border: 1px solid #e0e8f3; border-radius: 14px;
    background: linear-gradient(120deg, #eef5ff, #fff 75%);
    box-shadow: 0 3px 9px #28476d08;
    transition: background 160ms ease, box-shadow 160ms ease;
}
#messageTemplatesView .template-row:hover { background: #eaf3ff; box-shadow: 0 4px 12px #28476d12; }
#messageTemplatesView .template-card-content {
    display: block; min-width: 0; width: 100%; padding: 20px 16px 20px 4px;
    border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer;
}
#messageTemplatesView .template-card-content:focus-visible { outline: 2px solid #83baff; outline-offset: -4px; border-radius: 8px; }
#messageTemplatesView .template-row-name { display: block; color: #28476d; font-size: var(--crm-text-size); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
#messageTemplatesView .template-row-edit { display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-right:16px; padding:0; border:0; background:transparent; box-shadow:none; }
#messageTemplatesView .template-row-edit img { width:40px; height:40px; object-fit:contain; transition:transform 160ms ease,filter 160ms ease; }
#messageTemplatesView .template-row-edit:hover img { transform:translateY(-2px) scale(1.06); filter:drop-shadow(0 3px 3px #1e40af26); }
#messageTemplatesView .template-row-edit:active img { transform:translateY(1px) scale(.96); filter:none; }
@media(prefers-reduced-motion:reduce) { #messageTemplatesView .template-row-edit img { transition:none; } }
#messageTemplatesView .template-row-handle { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; }
#messageTemplatesView .template-row-handle .template-drag-lines {
    display: block; width: 18px; height: 14px; border: 0; border-radius: 0;
    background: linear-gradient(to bottom, #173c70 0 2px, transparent 2px 6px, #173c70 6px 8px, transparent 8px 12px, #173c70 12px 14px);
    box-shadow: none; pointer-events: none;
}
#messageTemplatesView .template-row-handle :is(img, crm-icon) { width: 36px; height: 36px; object-fit: contain; pointer-events: none; transition: transform 160ms ease, filter 160ms ease; }
#messageTemplatesView .template-row-handle:hover :is(img, crm-icon) { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#messageTemplatesView .template-row-handle:active :is(img, crm-icon) { transform: translateY(1px) scale(.96); filter: none; }
@media (prefers-reduced-motion: reduce) { #messageTemplatesView .template-row-handle :is(img, crm-icon) { transition: none; } }
#messageTemplatesView .template-row-delete,
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 70px; width: 70px; min-width: 70px; height: 70px;
    padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer;
}
#messageTemplatesView .template-row-delete :is(img, crm-icon),
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action :is(img, crm-icon) { display: block; width: 70px; height: 70px; object-fit: contain; transition: transform 160ms ease, filter 160ms ease; }
#messageTemplatesView .template-row-delete:hover :is(img, crm-icon),
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action:hover:not(:disabled) :is(img, crm-icon) { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#messageTemplatesView .template-row-delete:hover :is(img, crm-icon) { filter: drop-shadow(0 3px 3px #dc262626); }
#messageTemplatesView .template-row-delete:active :is(img, crm-icon),
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action:active:not(:disabled) :is(img, crm-icon) { transform: translateY(1px) scale(.96); filter: none; }
#messageTemplatesView .templates-empty { padding: 48px 24px; text-align: center; color: #7d8da1; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) { background: rgb(15 23 42 / 38%); padding: 24px; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-card {
    position: relative; box-sizing: border-box; max-height: calc(100dvh - 48px); overflow-y: auto;
    padding: 24px 28px 28px; border: 0; border-radius: 22px;
    background: #fff; box-shadow: 0 24px 64px rgb(23 40 63 / 22%);
}
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-modal-card { width: min(700px, 100%); }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; padding: 0 52px; text-align: center; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-editor-symbol { width: 120px; height: 120px; object-fit: contain; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-header strong { color: #17283f; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.4px; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-header > button { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; margin: 0; color: #94a3b8; border: 0; border-radius: 10px; background: transparent; font-size: 28px; line-height: 1; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-header > button:hover { background: #f1f5f9; color: #64748b; }
:is(#orderCardView, #commentModal, #ttnModal, #orderCommentPanel, #templateModal, #clientNoteModal, #purchaseCommentModal, #clientTypeModal) .template-modal-label { color: #52677f; font-weight: 600; margin-bottom: 8px; text-align: left; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) :is(input, textarea) { box-sizing: border-box; border: 1px solid #cbd9eb; border-radius: 10px; background: #fff; color: #28405f; padding: 12px 14px; font-size: var(--crm-text-size); line-height: 1.5; box-shadow: inset 0 1px 3px #28476d06; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) input { height: 46px; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) textarea { min-height: 71px; height: 71px; resize: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) textarea::-webkit-scrollbar { display: none; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-variables { padding: 0; gap: 10px; border: 0; background: transparent; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-variables-label { color: #7d8da1; font-weight: 500; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-variable { min-height: 40px; padding: 10px 14px; border: 0; border-radius: 10px; background: linear-gradient(120deg, #eef5ff, #f8fbff); color: #28476d; box-shadow: 0 2px 6px #28476d0c; font-size: var(--crm-text-size); font-weight: 600; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-variable:hover { background: #e5efff; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .comment-modal-actions { display: flex; justify-content: space-between; border-top: 1px solid #e6edf6; padding-top: 16px; margin-top: 24px; }
@media (max-width: 700px) { :is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) { padding: 12px; } :is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-card { padding: 20px; max-height: calc(100dvh - 24px); } #clientsView.clients-view--templates #clientsListTitle { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { #messageTemplatesView .template-row-delete :is(img, crm-icon), :is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action :is(img, crm-icon) { transition: none; } }

:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) #deleteEditingTemplate[hidden] { display: none; }
#templateModal #deleteEditingTemplate { margin: 0 auto 0 0; }
#templateModal #saveTemplate { margin: 0; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) #deleteEditingTemplate:hover :is(img, crm-icon) { filter: drop-shadow(0 3px 3px #dc262626); }

:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) { z-index: calc(var(--crm-z-modal) + 1); }
#templateDeleteModal, :is(#templateDiscardModal, #noteDiscardModal) { z-index: calc(var(--crm-z-modal) + 2); }
#messageTemplatesView .templates-table-pane { padding: 0; }
#messageTemplatesView .templates-add-top { flex: 0 0 70px; width: 70px; min-width: 70px; height: 70px; margin: 0 auto 10px; }
@media (max-height: 600px) {
}
#messageTemplatesView #templatesPanelTitle { margin-bottom: 22px; }



/* Approved glass concept: scoped to the client list, not cards or drawers. */
#clientsView { background: #dceeff url('/clients/glass-background.webp') center / cover no-repeat; height: 100dvh; }
#clientsView .clients-toolbar { background: transparent; border: 0; box-shadow: none; flex-basis: 112px; padding: 16px 30px; }
#clientsView .clients-main { margin: 0 22px; padding-bottom: 24px; overflow: hidden; }
#clientsView .clients-table-wrapper { margin-top: 12px; padding: 0 8px 16px; overscroll-behavior: contain; }
#clientsView .clients-table-wrapper > .table-frame { background: transparent; border: 0; box-shadow: none; border-radius: 0; min-width: 1120px; }
#clientsView #clientsTable { min-width: 1120px; margin-top: -12px; background: transparent; border-collapse: separate; border-spacing: 0 12px; }
#clientsView #clientsTable thead { background: transparent; }
#clientsView #clientsTable th { height: 56px; color: #102b70; font-weight: 600; background: linear-gradient(#f4fafff5, #d9e9fbf5); border: 0; box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #afcbed60; }
#clientsView #clientsTable th:first-child { border-radius: 24px 0 0 24px; }
#clientsView #clientsTable th:last-child { border-radius: 0 24px 24px 0; }
#clientsView #clientsTable td { height: 80px; border: 0; color: #112e70; background: linear-gradient(165deg, #ffffffed, #f4f9ffd9 45%, #d8eaffd9); box-shadow: inset 0 2px 2px #fff, inset 0 -2px 2px #fff9, 0 9px 10px #376eb21a; }
#clientsView #clientsTable .client-row { background: transparent; scroll-margin-top: 80px; }
#clientsView #clientsTable .client-row td { transition: background 160ms ease; }
#clientsView #clientsTable .client-row:is(:hover, .highlight) td { background: linear-gradient(165deg, #effaff, #c4e3ff 48%, #9ccfff); }
#clientsView #clientsTable td:first-child { position: relative; border-radius: 26px 0 0 26px; padding-left: 92px; box-shadow: inset 4px 0 3px #ffffffed, inset 10px 0 7px #64baff99, inset 0 2px 2px #fff, inset 0 -2px 2px #fff9, 0 9px 10px #376eb21a; }
#clientsView #clientsTable td:last-child { border-radius: 0 26px 26px 0; box-shadow: inset -3px 0 3px #fff, inset 0 2px 2px #fff, inset 0 -2px 2px #fff9, 0 9px 10px #376eb21a; }
#clientsView .client-identity::before { content: attr(data-initials); position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 52px; height: 56px; border-radius: 15px; background: linear-gradient(145deg, #6aaeff, #1262ce 42%, #063781); box-shadow: inset 0 2px 2px #ffffffb3, inset 0 -3px 5px #001c675e, 0 5px 8px #19589e38; color: #f4f9ff; text-shadow: 0 2px 2px #073476; font-size: 21px; font-weight: 700; }
#clientsView .client-display-name { color: #102970; font-size: var(--crm-text-size); }
#clientsView .client-contact-name { color: #456490; font-size: var(--crm-text-size); }
#clientsView .client-count-pill {
    position: relative; min-width: 60px; padding: 8px 12px;
    border: 1px solid #2c83ef; border-radius: 19px;
    color: white; font-size: 20px; text-shadow: 0 1px 3px #06388d;
    background: linear-gradient(180deg, #82c8ff 0%, #147dff 16%, #075ace 42%, #0042a7 76%, #199afa 100%);
    box-shadow: inset 0 2px 1px #f1fcff, inset 2px 0 2px #85d5ff,
        inset -2px 0 2px #70c5ff, inset 0 -3px 2px #70e6ff,
        0 2px 0 #1264c0, 0 5px 8px #1676cf55;
}
#clientsView .client-list-money :is(img, crm-icon) { width: 20px; height: 20px; }
#clientsView .client-list-money strong { color: #122f73; font-size: var(--crm-text-size); }
#clientsView #clientsTable .client-last-order { color: #254579; }
:is(#clientsView, #ordersListView) .client-note .order-comment-button { position: relative; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(ellipse at 30% 12%, #ffffffdb, transparent 32%), linear-gradient(155deg, #72c2ff, #1474f7 42%, #0345b5 76%, #39a8ff); box-shadow: inset 0 2px 2px #fff9, 0 5px 7px #236dd142; }
:is(#clientsView, #ordersListView) .client-note .order-comment-button::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 70% 50%, #fff 0 2px, transparent 2.6px); }
:is(#clientsView, #ordersListView) .client-note .order-comment-button svg { display: none; }
:is(#clientsView, #ordersListView) .client-note .order-comment-button--filled { background: linear-gradient(145deg, #3c9bff, #0054d1 48%, #002d88); }
#clientsView .clients-toolbar .search-box {
    position: relative; left: auto; top: auto; border-radius: 30px; height: 56px; border: 1px solid #267bef;
    background: linear-gradient(180deg, #a4daff 0%, #3d97f8 10%, #1c62bb 24%, #124994 74%, #338cde 100%);
    box-shadow: inset 0 2px 1px #f3fcff, inset 3px 0 3px #94dcff,
        inset -3px 0 3px #73c7ff, inset 0 -3px 2px #78e2ff,
        0 2px 0 #1663bf, 0 6px 12px #126bc34d;
}
#clientsView .clients-toolbar .search-box::before,
#clientsView .client-count-pill::before {
    content: ''; position: absolute; inset: 3px; pointer-events: none;
    border-radius: inherit; border: 1px solid #b2e4ff;
    box-shadow: inset 0 2px 2px #002f8073, 0 1px 1px #00348599;
}
#clientsView .search-box input, #ordersListView #orderSearch { color: #fff; }
#clientsView .search-box input::placeholder, #ordersListView #orderSearch::placeholder { color: #d4e8ff; opacity: 1; }
#clientsView .search-clear { color: #e6f3ff; text-shadow: none; }
#clientsView #alphabet { flex: 0 0 auto; margin: 10px 8px 0; padding: 6px 12px 10px; min-height: 66px; border-radius: 24px; background: linear-gradient(170deg, #ffffffb8, #aed5ffad 55%, #e9f5ffcc); box-shadow: inset 0 2px 3px white, inset 0 -2px 3px #fff, 0 8px 15px #3169b12b; overflow-x: auto; overflow-y: hidden; }
#clientsView #alphabet[hidden] { display: none; }
#clientsView .alphabet-letters { width: 100%; height: 50px; flex-shrink: 0; justify-content: space-between; gap: 2px; }
#clientsView .alphabet-letter { flex: 1 0 27px; min-width: 27px; height: 46px; padding: 0 5px; background: transparent; color: #173c70; border-radius: 13px; box-shadow: none; font-size: var(--crm-text-size); transition: background 160ms ease; }
#clientsView .alphabet-letter:not(.active):hover { background: linear-gradient(135deg, #abd5f4cc, #8bbce8b3); }
#clientsView .alphabet-letter.active {
    flex: 1 0 27px; min-width: 27px; height: 50px; border-radius: 15px;
    position: relative; isolation: isolate; overflow: visible;
    color: #fff; font-size: 29px; font-weight: 600; line-height: 1;
    text-shadow: 0 2px 3px #002875;
    background: transparent;
    box-shadow: none;
    filter: none;
}
#clientsView .alphabet-letter.active::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset: -13px;
    background: url('/clients/alphabet-glass-key.webp') center / 76px 76px no-repeat;
}
@media (max-width: 800px) { #clientsView .clients-toolbar { flex-wrap: wrap; flex-basis: auto; padding: 12px 16px; gap: 8px; } #clientsView .clients-toolbar .search-box { order: 3; flex-basis: 100%; max-width: none; } #clientsView .clients-header-actions { margin-left: auto; } #clientsView .clients-main { margin: 0 8px; padding-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { #clientsView #clientsTable .client-row td, #clientsView .alphabet-letter { transition: none; } }
/* Continuous reflections across the complete ribbon, without cell seams. */
:is(#clientsView, #clientView) { font-family: var(--crm-font); }
#clientsView #clientsTable td { background: var(--client-ribbon-fill); }
#clientsView #clientsTable .client-row:is(:hover, .highlight) td { background: var(--client-ribbon-hover); }
:is(#clientsView, #ordersListView) .client-note .order-comment-button::before { content: ''; position: absolute; width: 10px; height: 12px; left: 4px; bottom: -3px; background: #176bea; clip-path: polygon(20% 0, 100% 0, 0 100%); }
body:has(#clientsView:not([hidden])) .main-menu { background: radial-gradient(ellipse at 0 100%, #153e78, transparent 58%), linear-gradient(155deg, #031023, #0b1b37 65%, #092348); }
body:has(#clientsView:not([hidden])) .main-menu-item--active { background: linear-gradient(160deg, #367acd, #0c438f 60%, #092f69); box-shadow: inset 0 2px 4px #a9d9ff55, 0 5px 14px #00142c80; }
#clientsView #clientsTable td { box-shadow: inset 0 2px #fff, inset 0 -2px #ffffffb3; }
#clientsView #clientsTable td:first-child { box-shadow: inset 3px 0 #ffffffed, inset 9px 0 #64baff66, inset 0 2px #fff, inset 0 -2px #ffffffb3; }
#clientsView #clientsTable td:last-child { box-shadow: inset -3px 0 3px #fff, inset 0 2px #fff, inset 0 -2px #ffffffb3; }
#clientsView #clientsTable th { box-shadow: inset 0 2px #fff, inset 0 -2px #afcbed60; }

#clientsView #clientsTable th { font-size: var(--crm-text-size); }
#clientsView #clientsTable .client-phones, #clientsView #clientsTable .client-last-order { font-size: var(--crm-text-size); font-weight: 600; color: #173c70; font-variant-numeric: tabular-nums; }
#clientsView #clientsTable th { background: linear-gradient(#f4faff, #d9e9fb); }
/* Comment actions use the same motion as header icons. */
:is(#clientsView, #ordersListView) .client-note .order-comment-button {
    transition: transform 160ms ease, filter 160ms ease;
}
:is(#clientsView, #ordersListView) .client-note .order-comment-button:hover {
    transform: translateY(-2px) scale(1.06);
    filter: drop-shadow(0 3px 3px #1e40af26);
}
:is(#clientsView, #ordersListView) .client-note .order-comment-button:active {
    transform: translateY(1px) scale(.96); filter: none;
}
@media (prefers-reduced-motion: reduce) {
    :is(#clientsView, #ordersListView) .client-note .order-comment-button { transition: none; }
}
/* Empty and filled comments must be distinguishable without hovering. */
:is(#clientsView, #ordersListView) .client-note .order-comment-button:not(.order-comment-button--filled) {
    background: radial-gradient(ellipse at 30% 12%, #fff, transparent 36%), linear-gradient(155deg, #f4faff, #d7e8f6 48%, #abc7df);
    box-shadow: inset 0 2px 2px #fff, 0 4px 6px #426b8d26;
}
:is(#clientsView, #ordersListView) .client-note .order-comment-button:not(.order-comment-button--filled)::after {
    background: radial-gradient(circle at 30% 50%, #6686a3 0 2px, transparent 2.6px), radial-gradient(circle at 50% 50%, #6686a3 0 2px, transparent 2.6px), radial-gradient(circle at 70% 50%, #6686a3 0 2px, transparent 2.6px);
}
:is(#clientsView, #ordersListView) .client-note .order-comment-button:not(.order-comment-button--filled)::before { background: #abc7df; }
:is(#clientsView, #ordersListView) .client-note .order-comment-button--filled {
    background: radial-gradient(ellipse at 30% 12%, #ffffffdb, transparent 32%), linear-gradient(155deg, #72c2ff, #1474f7 42%, #0345b5 76%, #39a8ff);
}
#clientsView .client-count-pill {
    border: 0;
    border-radius: 15px;
    background: linear-gradient(145deg, #6aaeff, #1262ce 42%, #063781);
    box-shadow: inset 0 2px 2px #ffffffb3, inset 0 -3px 5px #001c675e, 0 5px 8px #19589e38;
    color: #f4f9ff;
    text-shadow: 0 2px 2px #073476;
}
#clientsView .client-count-pill::before { content: none; }


:is(#clientsView, #ordersListView) .client-data-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
#ordersListView .client-data-with-icon > :is(img, crm-icon) { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; pointer-events: none; }
#clientsView .client-data-with-icon > :is(img, crm-icon) { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; pointer-events: none; }
#clientsView .client-note .order-comment-button.client-comment-action {
    display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
}
#clientsView .client-note .order-comment-button.client-comment-action::before,
#clientsView .client-note .order-comment-button.client-comment-action::after { content: none; display: none; }
#clientsView .client-note .client-comment-action img {
    display: block; width: 40px; height: 40px; object-fit: contain; pointer-events: none;
}

#clientsView .client-history-button { display: inline-grid; place-items: center; padding: 0; width: 40px; height: 40px; border: 0; border-radius: 0; cursor: pointer; background: none; box-shadow: none; transition: transform 160ms ease, filter 160ms ease; }
#clientsView .client-history-button img { display: block; width: 40px; height: 40px; object-fit: contain; pointer-events: none; }
#clientsView .client-history-button:disabled { cursor: default; opacity: .5; }
#clientsView .client-history-button:not(:disabled):hover { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#clientsView .client-history-button:not(:disabled):active { transform: translateY(1px) scale(.96); filter: none; }
@media (prefers-reduced-motion: reduce) { #clientsView .client-history-button { transition: none; } }

/* Approved alphabet glass is the shared surface for initials, counts and search. */
#clientsView .client-identity::before {
    left: 12px; width: 76px; height: 76px;
    background: url('/clients/alphabet-glass-key.webp') center / 76px 76px no-repeat;
    box-shadow: none; border-radius: 0; text-shadow: 0 2px 3px #002875;
}
#clientsView .client-count-pill {
    display: inline-grid; place-items: center; position: relative; isolation: isolate;
    min-width: 50px; height: 50px; padding: 0 5px; box-sizing: border-box;
    background: transparent; box-shadow: none; text-shadow: 0 2px 3px #002875;
}
#clientsView .client-count-pill::before {
    content: ''; position: absolute; inset: -13px; z-index: -1; pointer-events: none;
    border: 0; border-radius: 0; box-shadow: none;
    border-image: url('/clients/alphabet-glass-key.webp') 90 fill / 27px / 0 stretch;
}
#clientsView .clients-toolbar .search-box {
    isolation: isolate; background: transparent; border: 0; border-radius: 16px;
    box-shadow: none; padding: 0 14px;
}
#clientsView .clients-toolbar .search-box::before {
    content: ''; inset: -13px; z-index: -1; border: 0; border-radius: 0; box-shadow: none;
    border-image: url('/clients/alphabet-glass-key.webp') 90 fill / 29px / 0 stretch;
}
#clientsView .clients-toolbar .search-box:focus-within {
    box-shadow: 0 0 12px #48bfff55 !important;
}

#clientsView #clientsTable th:nth-child(7) { text-indent: 0; }

#clientsView .search-box input::selection, #ordersListView #orderSearch::selection { background: #b9edff; color: #052d69; text-shadow: none; }

/* Small silver-glass clear control, matching the search magnifier. */
:is(#clientsView, #ordersListView, .order-product-search) .search-clear { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; box-shadow: none; }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear[hidden] { display: none; }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear:hover { background: transparent; }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear-glyph { position: relative; display: block; pointer-events: none; transition: transform 160ms ease, filter 160ms ease; filter: drop-shadow(0 2px 2px #00236280); }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear-glyph::before, :is(#clientsView, #ordersListView, .order-product-search) .search-clear-glyph::after { content: ''; position: absolute; left: 8px; top: 0; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(90deg, #689bd2, #e4f7ff 28%, #ffffff 48%, #9dcced 72%, #548cc4); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #24558e; }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear-glyph::before { transform: rotate(45deg); }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear-glyph::after { transform: rotate(-45deg); }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear:hover .search-clear-glyph { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
:is(#clientsView, #ordersListView, .order-product-search) .search-clear:active .search-clear-glyph { transform: translateY(1px) scale(.96); filter: none; }
@media (prefers-reduced-motion: reduce) { :is(#clientsView, #ordersListView, .order-product-search) .search-clear-glyph { transition: none; } }

#clientsView .clients-main:has(#alphabet[hidden]) { padding-bottom: 0; }

/* Client filter menus: pale blue glass with a single selected surface. */


/* Message templates: approved glass surfaces, scoped to this workflow. */
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-modal-card,
:is(#templateDeleteModal, :is(#templateDiscardModal, #noteDiscardModal)) > .purchase-delete-modal-card {
    background: var(--crm-modal-surface);
    box-shadow: var(--crm-modal-shadow);
    backdrop-filter: blur(20px);
    color: #173c70;
}
#messageTemplatesView .template-row {
    border: 0; border-radius: 18px;
    background: linear-gradient(165deg, #fff, #edf8ff 45%, #cce7fa);
    box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #94c6e780, 0 5px 12px #235d9020;
}
#messageTemplatesView .template-row:hover {
    background: linear-gradient(165deg, #fff, #dff3ff 45%, #b4dcfa);
    box-shadow: inset 0 2px 2px #fff, inset 0 -2px 3px #72b7eb88, 0 5px 14px #235d9030;
}
#messageTemplatesView .template-row-name { color: #173c70; font-size: var(--crm-text-size); }
:is(.documents-editor, #invoiceCardView, #orderSplitModal, #productView, #orderCardView, #commentModal, #ttnModal, #orderCommentPanel, #templateModal, #clientNoteModal, #purchaseCommentModal, #clientTypeModal, #clientView .client-page, #purchaseCardView, #purchaseForwarderDateModal, #purchaseReceiveModal) :is(input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])), textarea),
.login-emergency input,
#physicalStockPanel .physical-bin-name,
#stockHistoryForm input,
#warehouseView .warehouse-price-input,
#warehouseView .product-my-qty-cell input,
#clientDiscountModal input,
#purchaseCardView #purchaseDeliveriesBody .field :is(input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])), textarea) {
    box-sizing: border-box; padding: 12px 14px; line-height: 1.5;
    border: 1px solid #a6cce9; border-radius: 14px;
    background: linear-gradient(170deg, #ffffffed, #f2faffd9 55%, #deefffd9);
    color: #173c70; font-size: var(--crm-text-size);
    box-shadow: inset 0 2px 4px #417ba41a, 0 2px 1px #fff;
}
:is(.documents-editor, #invoiceCardView, #orderSplitModal, #productView, #orderCardView, #commentModal, #ttnModal, #orderCommentPanel, #templateModal, #clientNoteModal, #purchaseCommentModal, #clientTypeModal, #clientView .client-page, #purchaseCardView, #purchaseForwarderDateModal, #purchaseReceiveModal) :is(input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])), textarea):focus,
.login-emergency input:focus,
#physicalStockPanel .physical-bin-name:focus,
#stockHistoryForm input:focus,
#warehouseView .warehouse-price-input:focus,
#warehouseView .product-my-qty-cell input:focus,
#purchaseCardView #purchaseDeliveriesBody .field :is(input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])), textarea):focus {
    border-color: #6db5ea; outline: none;
    box-shadow: inset 0 2px 4px #417ba41a, 0 0 12px #50b9f84d;
}
#clientView .client-page input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) { height: 46px; }
#clientDiscountModal input { height: 46px; }
#clientView .client-page :is(.phone-row, .email-row) { height: 46px; }
#clientView .client-page input:is(.client-phone--error, [aria-invalid="true"]) { border-color: #dc2626; }
:is(#orderCardView, #commentModal, #ttnModal, #orderCommentPanel, #templateModal, #clientNoteModal, #purchaseCommentModal, #clientTypeModal) .template-modal-label { color: #244e7a; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-variables-label { color: #517497; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-variable {
    color: #134b80; border: 0; border-radius: 12px;
    background: linear-gradient(170deg, #fff, #e2f4ff 50%, #a9d6f7);
    box-shadow: inset 0 2px 2px #fff, inset 0 -2px 2px #5b9ccc40, 0 3px 6px #1f5d8c18;
}
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-variable:hover { background: linear-gradient(170deg, #fff, #c6eaff 50%, #8ec8f3); }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .comment-modal-actions { border-top: 0; }
:is(#templateDeleteModal, :is(#templateDiscardModal, #noteDiscardModal)) :is(h3, p),
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-header strong,
#messageTemplatesView #templatesPanelTitle { color: #173c70; }
:is(#templateDeleteModal, :is(#templateDiscardModal, #noteDiscardModal)) .purchase-delete-modal-actions button {
    border: 0; border-radius: 13px;
    box-shadow: inset 0 2px 2px #ffffffd9, inset 0 -2px 3px #18385c24, 0 4px 8px #193c5c20;
}
:is(#templateDeleteModal, :is(#templateDiscardModal, #noteDiscardModal)) .crm-confirm-cancel {
    color: #244e7a; background: linear-gradient(170deg, #fff, #dfedfa 55%, #bdd8ee);
}
#templateDeleteModal .crm-confirm-delete {
    color: #fff; background: linear-gradient(170deg, #ff9cab, #d93959 50%, #a91e43);
}
:is(#templateDiscardModal, #noteDiscardModal) .crm-confirm-warning {
    color: #633d0c; background: linear-gradient(170deg, #fff1b9, #ffd477 50%, #eab348);
}

:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action,
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action :is(img, crm-icon) { width: 70px; height: 70px; }
:is(#templateDeleteModal, :is(#templateDiscardModal, #noteDiscardModal)) .purchase-delete-modal-icon { mix-blend-mode: multiply; }

/* Template controls and ribbons use the Clients table reference. */
#messageTemplatesView .template-row,
#messageTemplatesView .template-row:hover {
    border: 0; border-radius: 26px;
    background: var(--client-ribbon-fill);
    box-shadow: inset 3px 0 #ffffffed, inset 9px 0 #64baff66,
        inset -3px 0 3px #fff, inset 0 2px #fff, inset 0 -2px #ffffffb3;
}
#messageTemplatesView .template-row:hover { background: var(--client-ribbon-hover); }
#messageTemplatesView .template-row-handle-cell { padding-left: 12px; }
#messageTemplatesView .template-add-art { position: relative; display: block; width: 100%; height: 100%; transition: transform 160ms ease, filter 160ms ease; }
#messageTemplatesView .templates-add-top:hover .template-add-art { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#messageTemplatesView .templates-add-top:active .template-add-art { transform: translateY(1px) scale(.96); filter: none; }
#messageTemplatesView .templates-add-top:is(:hover,:active) :is(img, crm-icon) { transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { #messageTemplatesView .template-add-art { transition: none; } }

/* Shared pedestal: symbols and platform move as one control. */
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-button-art,
#messageTemplatesView .template-button-art { position: relative; display: block; width: 100%; height: 100%; transition: transform 160ms ease, filter 160ms ease; }
.template-button-art::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 39.453125%; background: url('/icons/template-pedestal.webp') center bottom / contain no-repeat; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-button-art :is(img, crm-icon),
#messageTemplatesView .template-button-art :is(img, crm-icon) { position: absolute; left: 0; bottom: 20%; width: 100%; height: 80%; object-fit: contain; object-position: center bottom; transform: none; filter: none; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action:hover:not(:disabled) .template-button-art { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action:active:not(:disabled) .template-button-art { transform: translateY(1px) scale(.96); filter: none; }
:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action:is(:hover,:active) :is(img, crm-icon) { transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { :is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-button-art, #messageTemplatesView .template-button-art { transition: none; } }

:is(#templateModal, #clientNoteModal, #purchaseCommentModal, #commentModal) .template-icon-action { flex: 0 0 70px; min-width: 70px; }

#messageTemplatesView .templates-add-top { width: 70px; height: 70px; min-width: 70px; flex: 0 0 70px; }

/* Template confirmations share the editor glass controls. */
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .purchase-delete-modal-icon { mix-blend-mode: normal; object-fit: contain; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .purchase-delete-modal-actions { align-items: flex-start; gap: 48px; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .purchase-delete-modal-actions .template-confirm-action { display: flex; flex-direction: column; align-items: center; width: 70px; min-width: 70px; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #173c70; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .purchase-delete-modal-actions .template-confirm-action:hover { background: transparent; box-shadow: none; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .template-button-art { position: relative; display: block; width: 70px; height: 70px; flex: 0 0 70px; transition: transform 160ms ease, filter 160ms ease; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .template-button-art :is(img, crm-icon) { position: absolute; left: 0; bottom: 20%; width: 100%; height: 80%; object-fit: contain; object-position: center bottom; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .template-confirm-label { margin-top: 8px; font-size: var(--crm-text-size); font-weight: 700; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .template-confirm-action:hover .template-button-art { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .template-confirm-action:active .template-button-art { transform: translateY(1px) scale(.96); filter: none; }
:is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .template-confirm-action:focus-visible .template-button-art { filter: drop-shadow(0 0 5px #4daeff88); }
@media (prefers-reduced-motion: reduce) { :is(:is(#templateDiscardModal, #noteDiscardModal), #templateDeleteModal, #clientTypeModal) .template-button-art { transition: none; } }

/* Long labels must fit their content box to stay centered over the column. */
#clientsView #clientsTable th:nth-child(3) { padding-left: 2px; padding-right: 2px; }

:is(#clientNoteModal, #purchaseCommentModal) textarea { width: 100%; }
#noteDiscardModal { z-index: calc(var(--crm-z-modal) + 2); }
#clientChangesPanel { padding: 0; justify-content: flex-end; align-items: stretch; }
#clientChangesPanel > .purchase-receive-card { display: flex; flex-direction: column; position: relative; box-sizing: border-box; width: min(560px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0; padding: 24px 28px max(20px, env(safe-area-inset-bottom)); border-radius: 22px 0 0 22px; border-left: 1px solid #dce5ef;  box-shadow: -16px 0 60px rgb(23 40 63 / 18%); }
#clientChangesPanel .client-changes-head { flex-shrink: 0; padding: 0 0 16px; border: 0; text-align: center; }
#clientChangesPanel h2 { font-size: 22px; font-weight: 800; line-height: 1.25; color: #173c70; }
#clientChangesScroll .client-changes-head { padding-bottom: 4px; }
#clientChangesScroll .client-changes-client-name { position: sticky; top: 0; z-index: 2; display: block; max-width: none; margin: 0 0 12px; padding: 18px 32px 16px; text-align: center; background: none; }
#clientChangesList { clip-path: inset(var(--history-clip-top, 0px) 0 0); }
#clientChangesPanel .client-changes-list { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; overscroll-behavior: contain; padding-bottom: 44px; }
#clientChangesPanel .client-changes-list::-webkit-scrollbar { display: none; }
#clientChangesPanel .client-changes-scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; padding: 2px; display: grid; place-items: center; border: 0; background: transparent; box-shadow: none; }
#clientChangesPanel .client-changes-scroll-hint[hidden] { display: none; }
#clientChangesPanel .client-changes-scroll-hint :is(img, crm-icon) { display: block; width: 40px; height: 40px; object-fit: contain; rotate: -90deg; transition: transform 160ms ease, filter 160ms ease; }
#clientChangesPanel .client-changes-scroll-hint:hover img { transform: scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#clientChangesPanel .client-changes-scroll-hint:active img { transform: scale(.96); }
#clientChangesPanel .client-changes-event { margin: 0 0 12px; padding: 16px; border: 0; border-radius: 26px; background: var(--client-ribbon-fill); box-shadow: inset 3px 0 #ffffffed,inset 9px 0 #64baff66,inset -3px 0 3px #fff,inset 0 2px #fff,inset 0 -2px #ffffffb3; }
#clientChangesPanel .client-changes-empty { text-align: center; padding: 40px 16px; }
#clientChangesPanel .client-changes-symbol { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 auto 12px; }
#clientChangesPanel .client-changes-event { padding: 18px 22px; overflow-wrap: anywhere; }
#clientChangesPanel .client-changes-event-date { margin: 0 0 7px; color: #52677f; font-size: var(--crm-text-size); font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
#clientChangesPanel .client-changes-event-head { margin: 0; color: #173c70; font-size: var(--crm-text-size); font-weight: 600; line-height: 1.35; }
#clientChangesPanel .client-changes-lines,
#clientChangesPanel .client-changes-event-meta { margin-top: 10px; }
#clientChangesPanel .client-changes-line,
#clientChangesPanel .client-changes-block,
#clientChangesPanel .client-changes-event-meta { font-size: var(--crm-text-size); line-height: 1.5; color: #173c70; }
#clientChangesPanel .client-changes-arrow { padding: 0 6px; color: #52677f; }
@media (max-height: 700px) {
    #clientChangesPanel .client-changes-symbol { width: 72px; height: 72px; margin-bottom: 8px; }
    #clientChangesPanel .client-changes-head { padding: 6px 20px 14px; }
}
@media(max-width:680px) { #clientChangesPanel > .purchase-receive-card { border-radius: 0; padding-left: 16px; padding-right: 16px; } }
@media(max-height:600px) { #clientChangesPanel > .purchase-receive-card { padding-top: 16px; padding-bottom: 16px; } }

/* Client card uses the approved smooth-glass surface. */
#clientView { container: client-card / inline-size; min-height: 100vh; background: #dceeff url('/clients/glass-background.webp') center / cover fixed; padding: 20px 28px; box-sizing: border-box; }
#clientView .client-view-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px 24px; height: auto; position: sticky; top: 20px; z-index: 40; isolation: isolate; padding: 0; background: transparent; border: 0; box-shadow: none; }
#clientView .client-view-header::before { content: ''; position: absolute; inset: -20px -28px -10px; z-index: -1; pointer-events: none; background: #dceeff url('/clients/glass-background.webp') center / cover fixed; }
@media (max-width: 680px) { #clientView .client-view-header { top: 12px; } #clientView .client-view-header::before { inset: -12px -12px -10px; } }
#clientView .client-header-center { grid-column: 2; grid-row: 1; display: grid; justify-items: center; gap: 8px; min-width: 0; }
#clientView .client-card-title { margin: 0; text-align: center; }
#clientView .client-card-title::after { content: none; }
#clientView .client-header-context { display: flex; align-items: center; justify-content: center; gap: 16px; }
#clientView .client-header-context :is(#clientCardOrders, #clientCardComment, #openClientDiscount, #clientChangesButton) { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; }
#clientView .client-header-context :is(img, crm-icon) { width: 40px; height: 40px; }
#clientView .client-header-left { grid-column: 1; grid-row: 1; }
#clientView .client-header-actions { grid-column: 3; grid-row: 1; justify-self: end; width: max-content; }
@container client-card (max-width: 1180px) {
    #clientView .client-view-header { grid-template-columns: auto minmax(0, 1fr); }
    #clientView .client-header-center { grid-column: 1 / -1; grid-row: 1; }
    #clientView .client-header-left { grid-column: 1; grid-row: 2; }
    #clientView .client-header-actions { grid-column: 2; grid-row: 2; justify-content: flex-end; width: auto; max-width: 100%; }
}
#clientView .client-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#clientView .client-page { max-width: none; margin: 20px auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
@container client-card (max-width: 1250px) {
    #clientView .client-page { grid-template-columns: minmax(0, 1fr); }
}
#clientView .client-overview, #clientView .client-main-section { grid-column: 1 / -1; }
#clientView .client-page-section { min-width: 0; container: client-section / inline-size; }
#clientView .client-page-section:has(#contactsList, #deliveriesList) > .section-header { min-height: 40px; margin-bottom: 16px; box-sizing: border-box; align-items: center; }
#clientView .client-page > .client-page-section { margin-bottom: 0; }
:is(#clientView .client-page-section, #orderCardView .order-block, #orderCardView .order-progress-wrapper) { border: 0; border-radius: 26px; padding: 24px; background: linear-gradient(180deg,#ffffffed,#f4f9ffd9 45%,#d8eaffd9); box-shadow: inset 3px 0 #ffffffed,inset 9px 0 #64baff66,inset -3px 0 3px #fff,inset 0 2px #fff,inset 0 -2px #ffffffb3; }
#clientView h1, #clientView h2, #clientView label { color: #173c70; }
#clientView .client-fields-row { display: flex; flex-wrap: wrap; gap: 20px; }
#clientView .client-company-field { flex: 1 1 320px; }
#clientView .contact-block, #clientView .delivery-block { border: 0; background: #ffffff60; border-radius: 20px; }
#clientView .contact-primary { color: #285985; background: #dceeff; border: 0; padding: 7px 12px; border-radius: 12px; }
#clientView .contact-primary[aria-pressed="true"] { background: #b9e0ff; color: #123d76; }
#clientView .delivery-copy-contact { max-width: 220px; padding: 8px 12px; border: 0; border-radius: 12px; background: #dceeff; color: #173c70; }
#clientView :is(#saveClient,#clientChangesButton,#createOrderFromClient) { position: relative; width: 70px; height: 70px; min-width: 70px; padding: 0; border: 0; background: transparent; font-size: 0; box-shadow: none; transition: transform 160ms ease,filter 160ms ease; }
#clientView :is(#saveClient,#clientChangesButton,#createOrderFromClient)::before { content: ''; position: absolute; inset: 0; background: var(--card-action-icon) center / contain no-repeat; z-index: 1; }
#saveClient { --card-action-icon: url('/icons/template-save-style4.png'); }
#clientChangesButton { --card-action-icon: url('/icons/client-card-history-style4.png'); }
#createOrderFromClient { --card-action-icon: url('/icons/orders-create-folder-style4.png'); }
#clientView :is(#saveClient,#clientChangesButton,#createOrderFromClient):hover:not(:disabled) { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#clientView :is(#saveClient,#clientChangesButton,#createOrderFromClient):active:not(:disabled) { transform: translateY(1px) scale(.96); filter: none; }
#clientView button:disabled { opacity: .4; cursor: default; }
#clientView [hidden] { display: none !important; }
#clientTypeModal .purchase-delete-modal-card { background: var(--crm-modal-surface); width: min(480px,calc(100vw - 32px)); border: 0; border-radius: 26px; padding: 24px 32px; position: relative; max-height: calc(100dvh - 32px); overflow: auto; }
#clientTypeModal .purchase-delete-modal-icon { width: 120px; height: 120px; object-fit: contain; }
#clientTypeModal h3 { color: #173c70; font-size: 22px; text-align: center; }
#clientTypeModal p { color: #355273; line-height: 1.5; text-align: center; }
#clientTypeModal #clientTypeError { color: #a12530; }
:is(#clientNoteModal, #purchaseCommentModal, #commentModal) .template-modal-card { width: min(520px, 100%); }
#clientTypeModal .purchase-delete-modal-actions { display: flex; justify-content: center; gap: 32px; }
@media (max-width: 680px) { #clientView { padding: 12px; } :is(#clientView .client-page-section, #orderCardView .order-block, #orderCardView .order-progress-wrapper) { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { #clientView button { transition: none !important; } }

#clientView #contactsList, #clientView #deliveriesList { grid-template-columns: minmax(0,1fr); }
#clientView .contact-field-header:first-child { flex-wrap: wrap; gap: 8px; }
#clientView .client-page { width: 100%; }
#clientView .contact-content, #clientView .delivery-second-row { grid-template-columns: minmax(0, 1fr) 280px; }
@container client-card (max-width: 760px) {
    #clientView .client-page { grid-template-columns: minmax(0, 1fr); }
}
@container client-section (max-width: 600px) {
    #clientView .section-header { flex-wrap: wrap; gap: 12px; }
    #clientView .contact-content { grid-template-columns: minmax(0, 1fr); }
    #clientView .contact-content > .contact-field-header:nth-child(1) { grid-column: 1; grid-row: 1; height: auto; min-height: 22px; flex-wrap: wrap; }
    #clientView .contact-name-cell { grid-column: 1; grid-row: 2; }
    #clientView .contact-email-container { grid-column: 1; grid-row: 3; }
    #clientView .contact-content > .contact-field-header:nth-child(2) { grid-column: 1; grid-row: 4; margin-top: 8px; }
    #clientView .phones-list { grid-column: 1; grid-row: 5; }
    #clientView .phone-add-button { grid-column: 1; grid-row: 6; }
    #clientView .delivery-first-row, #clientView .delivery-second-row { grid-template-columns: minmax(0, 1fr); }
}


/* Contact card preview: name and phone share one row. */
#clientView #contactsList .contact-block { height: auto; padding: 16px; box-shadow: none; background: #ffffff45; }
#clientView #contactsList .contact-content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px 12px; }
#clientView #contactsList .contact-content > * { width: 100%; min-width: 0; }
#clientView #contactsList .contact-field-header:first-child { grid-column: 1; grid-row: 1; flex-wrap: nowrap; height: 28px; gap: 8px; }
#clientView #contactsList .contact-name-cell { grid-column: 1; grid-row: 2; }
#clientView #contactsList .contact-field-header:nth-child(2) { grid-column: 2; grid-row: 1; height: 28px; margin: 0; }
#clientView #contactsList .phones-list { grid-column: 2; grid-row: 2; width: 100%; }
#clientView #contactsList .phone-add-button { grid-column: 2; grid-row: 3; width: auto; justify-self: start; }
#clientView #contactsList .contact-email-container { grid-column: 1; grid-row: 3; margin: 0; }
#clientView #contactsList .phone-row, #clientView #deliveriesList .phone-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
#clientView #contactsList .phone-row .contact-phone { padding-inline: 8px; font-size: var(--crm-text-size); }
#clientView #contactsList .phone-row .remove-phone { flex-basis: 20px; width: 20px; }
#clientView #contactsList .contact-primary { margin-left: auto; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; background: transparent; border-radius: 0; font-size: 25px; line-height: 1; color: #8da9c2; text-shadow: 0 1px 0 #fff; }
#clientView #contactsList .contact-primary.is-primary { color: #d19a24; text-shadow: 0 1px 0 #fff6cd, 0 1px 3px #ad771530; }
#clientView #contactsList .remove-contact { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; background: transparent; box-shadow: none; border: 0; }
#clientView #contactsList .remove-contact :is(img, crm-icon) { display: block; width: 40px; height: 40px; object-fit: contain; }
#clientView #contactsList :is(.contact-primary, .remove-contact) { transition: transform 160ms ease, filter 160ms ease; }
#clientView #contactsList :is(.contact-primary, .remove-contact):hover:not(:disabled) { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
@media (prefers-reduced-motion: reduce) { #clientView #contactsList :is(.contact-primary, .remove-contact) { transition: none; } }
#clientView #contactsList .contact-primary :is(img, crm-icon) { display: block; width: 40px; height: 40px; object-fit: contain; opacity: .4; filter: grayscale(1); }
#clientView #contactsList .contact-primary.is-primary :is(img, crm-icon) { opacity: 1; filter: none; }
#clientView :is(.remove-phone, .remove-email, .remove-delivery) { padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0; }
#clientView :is(.remove-phone, .remove-email, .remove-delivery) :is(img, crm-icon) { display: block; width: 20px; height: 20px; margin: auto; object-fit: contain; }
#clientView .messenger-link :is(img, crm-icon) { object-fit: contain; }
#clientView .default-delivery { width: 40px; height: 40px; padding: 0; font-size: 0; background: transparent; }
#clientView .default-delivery :is(img, crm-icon) { display: block; width: 40px; height: 40px; object-fit: contain; opacity: .4; filter: grayscale(1); }
#clientView .default-delivery[aria-pressed="true"] :is(img, crm-icon) { opacity: 1; filter: none; }
#clientView #contactsList .contact-block { display: grid; grid-template-columns: 49px minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
#clientView #contactsList .contact-block-actions { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 8px 4px 0; border-right: 1px solid #a6cce966; }
#clientView #contactsList .contact-block-actions .contact-primary { margin: 0; }
#clientView #contactsList .contact-content { grid-template-columns: minmax(0, 1fr) 300px; gap: 8px 12px; }
#clientView #contactsList .contact-email-container { grid-column: 1 / -1; grid-row: 3; }
#clientView #contactsList .email-row { margin-top: 6px; }
#clientView #contactsList .contact-email-write { display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; background: transparent; cursor: pointer; }
#clientView #contactsList .contact-email-write :is(img, crm-icon) { width: 40px; height: 40px; object-fit: contain; }
#clientView #contactsList .contact-email-write[aria-disabled="true"] { opacity: .4; cursor: default; }
#clientView #contactsList .remove-email { flex: 0 0 20px; width: 20px; height: 32px; }
#clientView #contactsList .phone-row .contact-phone { font-size: var(--crm-text-size); }
#clientView .messenger-link, #clientView .messenger-link :is(img, crm-icon) { width: 40px; height: 40px; }
#clientView :is(.messenger-link, .contact-email-write) { transition: transform 160ms ease, filter 160ms ease; }
#clientView :is(.messenger-link, .contact-email-write):hover:not([aria-disabled="true"]) { opacity: 1; transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#clientView :is(.messenger-link, .contact-email-write):active:not([aria-disabled="true"]) { transform: translateY(1px) scale(.96); filter: none; }
@media (prefers-reduced-motion: reduce) { #clientView :is(.messenger-link, .contact-email-write) { transition: none; } }
#clientView #contactsList .messenger-links { gap: 4px; }
@container client-section (max-width: 420px) {
    #clientView #contactsList .contact-block { grid-template-columns: 49px minmax(0, 1fr); gap: 8px; padding: 12px 8px; }
    #clientView #contactsList .contact-content { grid-template-columns: minmax(0, 1fr) 300px; gap: 8px; }
}
#clientView #contactsList .contact-primary:disabled { opacity: 1; cursor: default; }
#clientView #contactsList .contact-content { grid-template-rows: 28px var(--client-field-body-height, auto) auto; align-items: start; }
#clientView #contactsList :is(.contact-name-cell, .phones-list) { align-self: start; }
#clientView #contactsList .contact-email-container label, #clientView #deliveriesList .delivery-address-field > label { display: block; height: 20px; line-height: 20px; margin: 0 0 6px; }
#clientView #contactsList .email-row { margin-top: 0; gap: 8px; }
#clientView #deliveriesList .delivery-content { grid-template-rows: calc(36px + var(--client-field-body-height, 46px)) auto; row-gap: 8px; }
#clientView #deliveriesList :is(.delivery-name-field, .delivery-phone-field) > label { display: flex; align-items: center; height: 28px; line-height: 20px; margin: 0 0 8px; }
#clientView #deliveriesList .delivery-block { display: grid; grid-template-columns: 49px minmax(0, 1fr); gap: 12px; padding: 14px 12px; background: #ffffff45; box-shadow: none; }
#clientView #deliveriesList .delivery-actions { position: static; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 8px 4px 0; border-right: 1px solid #a6cce966; }
#clientView #deliveriesList .delivery-actions > button, #clientView #deliveriesList .delivery-actions :is(img, crm-icon) { width: 40px; height: 40px; padding: 0; margin: 0; background: transparent; object-fit: contain; }
#clientView #deliveriesList .delivery-content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
#clientView #deliveriesList :is(.delivery-first-row, .delivery-second-row) { display: contents; }
#clientView #deliveriesList .delivery-name-field { grid-column: 1; grid-row: 1; }
#clientView #deliveriesList .delivery-phone-field { grid-column: 2; grid-row: 1; }
#clientView #deliveriesList .delivery-carrier-field { grid-column: 1 / -1; grid-row: 2; }
#clientView #deliveriesList .delivery-address-field { grid-column: 1 / -1; grid-row: 3; }
#clientView #deliveriesList .field { margin: 0; }
#clientView #deliveriesList .messenger-links { gap: 4px; }
#clientView #deliveriesList .delivery-phone { padding-inline: 8px; font-size: var(--crm-text-size); }
#clientView #deliveriesList .delivery-actions > button { transition: transform 160ms ease, filter 160ms ease; }
#clientView .delivery-copy-action { position: relative; display: block; flex: 0 0 40px; width: 40px; height: 40px; }
#clientView #deliveriesList .delivery-copy-action .delivery-copy-contact { position: absolute; inset: 0; width: 40px; height: 40px; min-width: 0; padding: 0; margin: 0; opacity: 0; cursor: pointer; }
#clientView .delivery-copy-picker .purchase-select-trigger :is(img, crm-icon) { transition: transform 160ms ease, filter 160ms ease; }
#clientView .delivery-copy-picker .purchase-select-trigger:hover:not(:disabled) :is(img, crm-icon) { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#clientView .delivery-copy-picker .purchase-select-trigger:active:not(:disabled) :is(img, crm-icon) { transform: translateY(1px) scale(.96); filter: none; }
#clientView .delivery-copy-picker .purchase-select-trigger:focus-visible :is(img, crm-icon) { filter: drop-shadow(0 2px 4px #69aefb80); }
#clientView #deliveriesList .delivery-copy-picker .purchase-select-trigger { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; box-shadow: none; }
#clientView .delivery-copy-picker .purchase-select-trigger > span { display: block; width: 40px; height: 40px; overflow: visible; }
#clientView .delivery-copy-picker .purchase-select-trigger::after, #clientView .delivery-copy-picker .purchase-select-option::after { display: none; }
#clientView .delivery-copy-picker .purchase-select-menu { min-width: min(240px,calc(100vw - 24px)); border: 0; border-radius: 16px; padding: 6px; background: linear-gradient(180deg,#ffffffed,#f4f9fff2 45%,#d8eaffed); box-shadow: inset 0 2px 2px #fff,inset 0 -2px 3px #86bce566,0 8px 24px #173d6926; backdrop-filter: blur(14px); }
#clientView #deliveriesList .delivery-copy-picker .purchase-select-option { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: auto; min-height: 50px; padding: 8px 12px; gap: 2px; border-radius: 10px; background: transparent; color: #173c70; text-align: left; white-space: normal; }
#clientView #deliveriesList .delivery-copy-picker .purchase-select-option[hidden] { display: none; }
#clientView .delivery-copy-picker .copy-contact-name { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--crm-text-size)/1.35 var(--crm-font); }
#clientView .delivery-copy-picker .copy-contact-phone { font: 400 var(--crm-text-size)/1.5 var(--crm-font); color: #52677f; }
#clientView #deliveriesList .delivery-copy-picker .purchase-select-option:is(:hover,:focus-visible) { background: #a9d8f94d; }
#clientView .client-carrier-picker .purchase-select-trigger { height: 52px; padding: 8px 12px; border: 0; border-radius: 14px; background: linear-gradient(180deg,#ffffffed,#f4f9ffd9 45%,#d8eaffd9); color: #173c70; box-shadow: inset 0 2px 2px #fff,inset 0 -2px 3px #86bce533; font: 500 var(--crm-text-size) var(--crm-font); }
#clientView .client-carrier-picker .purchase-select-trigger > span { display: flex; align-items: center; gap: 10px; overflow: visible; }
#clientView .client-carrier-picker .carrier-brand-circle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #fff; overflow: hidden; }
#clientView .client-carrier-picker .carrier-brand-circle :is(img, crm-icon) { display: block; width: 40px; height: 40px; object-fit: contain; }
#clientView .client-carrier-picker .carrier-brand-circle--empty, #clientView .client-carrier-picker .carrier-brand-circle--pickup, #clientView .client-carrier-picker .carrier-brand-circle:has(> img[src="/icons/carrier-nova.svg"]) { background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
#clientView .client-carrier-picker .carrier-brand-circle--empty :is(img, crm-icon) { width: 40px; height: 40px; }
:is(#clientView .client-carrier-picker, #ordersListView .order-glass-select.client-icon-picker) .purchase-select-menu { border: 0; border-radius: 16px; padding: 6px; background: linear-gradient(180deg,#ffffffed,#f4f9fff2 45%,#d8eaffed); box-shadow: inset 0 2px 2px #fff,inset 0 -2px 3px #86bce566,0 8px 24px #173d6926; backdrop-filter: blur(14px); }
:is(#clientView .client-carrier-picker, #ordersListView .order-glass-select.client-icon-picker) .purchase-select-option { display: grid; grid-template-columns: 40px minmax(0,1fr); justify-content: start; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 10px; background: transparent; box-shadow: none; text-shadow: none; color: #173c70; font: 500 var(--crm-text-size) var(--crm-font); }
:is(#clientView .client-carrier-picker, #ordersListView .order-glass-select.client-icon-picker) .purchase-select-option::after { display: none; }
:is(#clientView .client-carrier-picker, #ordersListView .order-glass-select.client-icon-picker) .purchase-select-option[aria-selected="true"], :is(#clientView .client-carrier-picker, #ordersListView .order-glass-select.client-icon-picker) .purchase-select-option:hover { background: #a9d8f94d; }
:is(#clientView .client-carrier-picker, #ordersListView .order-glass-select.client-icon-picker) .purchase-select-option > img { width: 40px; height: 40px; object-fit: contain; }
#clientView #deliveriesList .delivery-first-row { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: 40px minmax(0,1fr); align-items: end; gap: 10px; margin: 0; min-height: 72px; }
#clientView #deliveriesList .delivery-carrier-field { grid-column: 1; grid-row: 1; }
#clientView #deliveriesList .delivery-address-field { grid-column: 2; grid-row: 1; }
#clientView .delivery-carrier-field > label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#clientView .client-carrier-picker .purchase-select-trigger { width: 40px; height: 40px; padding: 0; background: transparent; box-shadow: none; }
#clientView .client-carrier-picker .purchase-select-trigger > span { width: 40px; flex: 0 0 40px; }
#clientView .client-carrier-picker .purchase-select-trigger > span > span:last-child { display: none; }
#clientView .client-carrier-picker .purchase-select-trigger::after { display: none; }
#clientView .client-carrier-picker .purchase-select-trigger .carrier-brand-circle { transition: transform 160ms ease,filter 160ms ease; }
#clientView .client-carrier-picker .purchase-select-trigger:hover .carrier-brand-circle { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#clientView .client-carrier-picker .purchase-select-trigger:active .carrier-brand-circle { transform: translateY(1px) scale(.96); }
#clientView #deliveriesList .delivery-actions > button:hover:not(:disabled) { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
@media (prefers-reduced-motion: reduce) { #clientView .delivery-copy-picker .purchase-select-trigger :is(img, crm-icon) { transition: none; } }
@container client-section (max-width: 420px) {
    #clientView #deliveriesList .delivery-block { gap: 8px; padding: 12px 8px; }
    #clientView #deliveriesList .delivery-content { grid-template-columns: minmax(0, 1fr) 300px; gap: 8px; }
}
#clientView #deliveriesList .delivery-content { row-gap: 8px; }

#deleteClientButton[hidden] { display: none; }

/* Card currency keeps its separate optical size; list decoration follows ui.md. */
#clientsView .client-list-money :is(img, crm-icon)[src="/icons/currency-uah-smooth.webp"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
}
/* Shared desktop header height: Clients and Purchases, lists and cards. */
#clientView { padding-top: 0; }
#clientView .client-view-header { top: 0; height: 112px; min-height: 112px; box-sizing: border-box; }
#clientView .client-view-header::before { inset: 0 -28px 0; }
@media (max-width: 900px) {
 #clientView .client-view-header { height: auto; min-height: 112px; padding-block: 16px; }
}
@media (max-width: 680px) {
 #clientView .client-view-header::before { inset: 0 -12px 0; }
}

/* Decorative field icons are 20px; actions retain their separate 40px size. */
#clientView #clientCompany { --client-field-icon:url('/icons/client-company-style4.png'); }
#clientView :is(.contact-name,.delivery-name) { --client-field-icon:url('/icons/client-person-side-style4.png'); }
#clientView :is(.contact-phone,.delivery-phone) { --client-field-icon:url('/icons/table-phone-style4.png'); }
#clientView .contact-email { --client-field-icon:url('/icons/source-gmail-original.svg'); }
#clientView .delivery-address { --client-field-icon:url('/icons/client-location-style4.webp'); }
#clientView .client-page input:is(#clientCompany,.contact-name,.contact-phone,.delivery-name,.delivery-phone,.contact-email,.delivery-address) {
 padding-left:40px;
 background-image:var(--client-field-icon),linear-gradient(170deg,#ffffffed,#f2faffd9 55%,#deefffd9);
 background-size:20px 20px,auto; background-position:12px center,center; background-repeat:no-repeat;
}
#clientView #contactsList .phone-row .contact-phone { padding-left:40px; }

/* Approved style 4 search assets retain the existing field icon sizes. */
#clientsView .search-clear-glyph { object-fit: contain; filter: none; }

/* Header filters: focus alone must not highlight action icons. */
#clientsView .clients-list-filters .client-icon-picker .purchase-select-trigger:focus-visible:not(:hover) :is(img, crm-icon) { filter: none; }

/* Current typography, palette and field feedback. */
#clientsView #clientsTable :is(th,td), #clientsView .client-display-name { color: #173c70; line-height: 1.25; }
#clientsView .client-display-name { font-weight: 600; }
#clientsView .client-contact-name { color: #52677f; line-height: 1.25; }
#clientsView .client-count-pill { font-size: var(--crm-text-size); }
#clientView .client-page label { font-weight: 500; }
#clientView .client-page .section-header h2 { font-weight: 800; }
#clientView .client-card-stat-label { color: #52677f; font-weight: 500; }
#clientView .client-page { gap: 24px; }
#clientView #contactsList .contact-email-container label, #clientView #deliveriesList .delivery-address-field > label { margin-bottom: 8px; }
.client-field-error { color: #dc2626; font: 400 var(--crm-text-size)/1.5 var(--crm-font); margin-top: 8px; overflow-wrap: anywhere; white-space: normal; }
#clientView #deliveriesList .delivery-first-row > .client-field-error { grid-column: 1 / -1; margin-top: 0; }
#clientView .client-required-label { display: inline-flex; align-items: baseline; gap: 4px; }
.client-required { color: #dc2626; }
:is(#clientView,#templateModal,#clientTypeModal) :is(input,textarea)[aria-invalid="true"] { border-color: #dc2626; }
#clientsView #alphabet { overflow: visible; }
#clientsView .alphabet-letters { flex-wrap: wrap; height: auto; justify-content: center; }
#clientsView .alphabet-letter, #clientsView .alphabet-letter.active { flex: 0 0 50px; width: 50px; min-width: 50px; height: 50px; }
:is(#clientsView,#clientView,#messageTemplatesView) * { scrollbar-width: none; }
:is(#clientsView,#clientView,#messageTemplatesView) *::-webkit-scrollbar { display: none; }
:is(#clientsView,#clientView,#messageTemplatesView) { scrollbar-width: none; }
:is(#clientsView,#clientView,#messageTemplatesView)::-webkit-scrollbar { display: none; }
html:has(#clientView:not([hidden])), body:has(#clientView:not([hidden])) { scrollbar-width: none; }
html:has(#clientView:not([hidden]))::-webkit-scrollbar, body:has(#clientView:not([hidden]))::-webkit-scrollbar { display: none; }
#clientView .client-main-section { align-items: start; }
#clientView #deliveriesList .delivery-content { grid-template-rows: auto auto; }
@container client-card (max-width: 1180px) {
    #clientView .client-view-header { height: auto; min-height: 112px; padding-block: 16px; }
}

/* Keep all columns available by wrapping each row when the workspace is narrow. */
#clientsView .clients-main { container: clients-list / inline-size; }
@container clients-list (max-width: 1120px) {
    #clientsView .clients-table-wrapper > .table-frame, #clientsView #clientsTable { min-width: 0; width: 100%; }
    #clientsView #clientsTable, #clientsView #clientsTable tbody { display: block; }
    #clientsView #clientsTable thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
    #clientsView #clientsTable .client-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 16px; margin: 12px 0; padding: 16px; border-radius: 26px; background: var(--client-ribbon-fill); }
    #clientsView #clientsTable .client-row:hover { background: var(--client-ribbon-hover); }
    #clientsView #clientsTable .client-row td { width: auto; height: auto; min-width: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
    #clientsView #clientsTable .client-row td:first-child { grid-column: 1 / -1; min-height: 56px; padding-left: 76px; }
    #clientsView .client-identity::before { left: 0; }
    #clientsView #clientsTable td[data-label]::before { content: attr(data-label); display: block; color: #52677f; font-weight: 500; margin-bottom: 8px; }
}
@container clients-list (max-width: 460px) {
    #clientsView #clientsTable .client-row { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 800px) {
    #clientsView .clients-toolbar { height: auto; min-height: 112px; flex-shrink: 0; }
    #clientView .client-page-section { padding: 16px; }
}
@container client-section (max-width: 620px) {
    #clientView #contactsList .contact-content, #clientView #deliveriesList .delivery-content { display: flex; flex-direction: column; gap: 8px; }
    #clientView #contactsList .contact-content > *, #clientView #deliveriesList .delivery-content > * { width: 100%; min-width: 0; }
    #clientView #contactsList .contact-field-header:nth-child(1) { order: 0; }
    #clientView #contactsList .contact-name-cell { order: 1; }
    #clientView #contactsList .contact-field-header:nth-child(2) { order: 2; }
    #clientView #contactsList .phones-list { order: 3; }
    #clientView #contactsList .contact-email-container { order: 4; }
    #clientView #deliveriesList .delivery-name-field { order: 0; }
    #clientView #deliveriesList .delivery-phone-field { order: 1; }
    #clientView #deliveriesList .delivery-first-row { order: 2; }
    #clientView #deliveriesList .delivery-second-row > .field { width: 100%; min-width: 0; }
}

/* Message templates: current shared UI rules, including nested dialogs. */
#messageTemplatesView > .purchase-receive-card {
    box-shadow: -16px 0 60px rgb(23 40 63 / 18%);
    backdrop-filter: none;
}
#messageTemplatesView #templatesPanelTitle { color: #17283f; font-size: 22px; font-weight: 800; line-height: 1.25; margin: 0 0 24px; }
#messageTemplatesView .template-row-name { line-height: 1.25; }
#messageTemplatesView .templates-add-top { margin-bottom: 16px; }
#messageTemplatesView .templates-table-pane { min-width: 0; overflow: auto; overscroll-behavior: contain; }
#messageTemplatesView #templatesTable { overflow: visible; }
:is(#messageTemplatesView, #templateModal) .template-button-art::before { content: none; }
:is(#messageTemplatesView, #templateModal) .template-button-art :is(img, crm-icon) {
    position: static; width: 70px; height: 70px; object-fit: contain; object-position: center;
}
#templateModal .template-modal-label { color: #173c70; font-weight: 500; margin-bottom: 8px; }
#templateModal :is(input, textarea) { font-weight: 400; margin-bottom: 16px; }
#templateModal .template-variables { gap: 8px; margin-bottom: 0; }
#templateModal .template-variables-label { color: #52677f; font-weight: 500; line-height: 1.5; }
#templateModal .template-variable {
    color: #173c70; font-weight: 600; line-height: 1.25; max-width: 100%; white-space: normal;
    border: 0; border-radius: 14px;
    background: linear-gradient(135deg, #abd5f4cc, #8bbce8b3);
    box-shadow: none; text-shadow: none;
    transition: background 160ms ease, transform 160ms ease, filter 160ms ease;
}
#templateModal .template-variable:hover { background: linear-gradient(110deg, #ffffffad, #87cdff70); transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 3px 3px #1e40af26); }
#templateModal .template-variable:active { transform: translateY(1px) scale(.96); filter: none; }
#templateModal .comment-modal-actions { justify-content: flex-end; gap: 16px; margin-top: 24px; padding-top: 0; }
#templateModal .template-icon-action:disabled { opacity: .4; cursor: default; }
#templateModal .template-icon-action:disabled .template-button-art { transform: none; filter: none; }
:is(#templateDeleteModal, #templateDiscardModal) .purchase-delete-modal-actions { gap: 32px; }
:is(#templateDeleteModal, #templateDiscardModal) .template-confirm-label { margin-top: 0; font-weight: 600; line-height: 1.25; }
:is(#templateDeleteModal, #templateDiscardModal) p { color: #52677f; }
:is(#templateDeleteModal, #templateDiscardModal) .purchase-delete-modal-actions > :is(#confirmTemplateDelete, #discardTemplateDraft) {
    --confirm-art-size: 70px 70px !important; --confirm-base: none !important;
}
@media (prefers-reduced-motion: reduce) { #templateModal .template-variable { transition: none; } }
/* Templates: no close crosses; backdrop and Escape retain their existing handlers. */
:is(#templateModal, #templateDeleteModal, #templateDiscardModal) .crm-modal-close { display: none !important; }
#messageTemplatesView #templatesPanelTitle { color: #173c70; }
/* Template editor actions: 70px, requested for this preview. */
#templateModal :is(#saveTemplate, #deleteEditingTemplate),
#templateModal :is(#saveTemplate, #deleteEditingTemplate) .template-button-art,
#templateModal :is(#saveTemplate, #deleteEditingTemplate) img {
    width: 70px; height: 70px; min-width: 70px; flex-basis: 70px;
}
/* Approved surface is shared with all centered dialogs. */
#templateModal .template-modal-card {
    background: var(--crm-modal-surface);
    backdrop-filter: blur(28px) saturate(1.15);
    box-shadow: var(--crm-modal-shadow);
}

/* Client card: approved artwork and common dialog actions, without pedestals. */
#clientView #backToClients::before { inset: 0; background-image: url('/icons/client-back-style4.png'); }
#clientView #backToClients::after { content: none; }
:is(#clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-header { padding: 0; }
:is(#clientNoteModal, #purchaseCommentModal, #commentModal) .order-modal-header strong { color: #173c70; }
:is(#clientNoteModal, #purchaseCommentModal, #commentModal) .purchase-delete-modal-actions { margin-top: 24px; }
#purchaseCommentModal .purchase-delete-modal-actions > #savePurchaseComment,
#clientNoteModal .purchase-delete-modal-actions > #saveClientNoteModal,
#clientTypeModal.client-type-save-order .purchase-delete-modal-actions > #confirmClientType {
    --confirm-art: url('/icons/template-save-style4.png');
}
:is(#clientNoteModal, #purchaseCommentModal) button:disabled { opacity: .4; cursor: default; }
#clientTypeModal p { color: #52677f; }
#clientChangesPanel :is(.purchase-receive-card, .client-changes-list) { scrollbar-width: none; }
#clientChangesPanel :is(.purchase-receive-card, .client-changes-list)::-webkit-scrollbar { display: none; }
#clientChangesPanel .client-changes-list { scrollbar-gutter: stable; }

:is(#clientNoteModal #clientNoteError, #purchaseCommentError) { color: #a12530; }
:is(#clientNoteError, #purchaseCommentError):empty { display: none; }

#clientView .client-company-field { flex:2 1 240px; min-width:0; align-self:end; }
#clientView .client-code-field { flex:0 0 calc(10ch + 30px); width:calc(10ch + 30px); min-width:0; }
#clientView .client-full-name-field { flex:3 1 360px; min-width:240px; }
#clientView .client-legal-form-field { position:relative; flex:0 1 var(--legal-form-width, max-content); width:var(--legal-form-width, max-content); max-width:100%; min-width:0; }
#clientView .client-contract-field { flex:1 1 180px; min-width:0; }
#clientView .client-legal-form-suggestions { position:absolute; top:calc(100% + 6px); left:0; width:100%; z-index:30; padding:6px; border-radius:14px; background:var(--crm-modal-surface); box-shadow:var(--crm-modal-shadow); backdrop-filter:blur(28px) saturate(1.15); }
#clientView .client-legal-form-suggestions[hidden] { display:none; }
#clientView .client-legal-form-suggestions button { display:block; width:100%; min-height:40px; padding:8px 12px; text-align:left; border:0; border-radius:10px; background:transparent; color:#173c70; font:inherit; font-weight:600; overflow-wrap:anywhere; cursor:pointer; }
#clientView .client-legal-form-suggestions button:hover,
#clientView .client-legal-form-suggestions button[aria-selected="true"] { background:var(--client-ribbon-hover); }

/* NP selection uses the existing input, suggestion and carrier-icon components. */
#clientView #deliveriesList .delivery-block--np .delivery-content { grid-template-columns: minmax(0,1fr) 300px; }
#clientView #deliveriesList .delivery-block--np .delivery-first-row { align-items: start; gap: 16px; }
#clientView #deliveriesList .delivery-block--np .delivery-carrier-field { margin-top: 32px; }
#clientView .np-fields { display: contents; }
#clientView .np-settlement-field { grid-column: 2 / -1; grid-row: 1; }
#clientView .np-destination-field { grid-column: 2; grid-row: 2; }
#clientView .np-fields[hidden], #clientView .np-house-fields[hidden] { display: none; }
#clientView .np-fields > .field { position: relative; min-width: 0; }
#clientView .np-type-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#clientView .np-type-field { grid-column: 1; grid-row: 2; align-self: start; padding-top: 32px; }
#clientView .np-fields :is(input, textarea) { width: 100%; }
#clientView .np-destination { text-overflow: ellipsis; }
#clientView .np-fields textarea { display: block; field-sizing: content; height: auto; min-height: 46px; min-width: 0; max-width: 100%; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
#clientView .client-page .np-fields textarea[aria-invalid="true"] { border-color: #dc2626; }
#clientView #deliveriesList .delivery-block--np .delivery-first-row--np-address { grid-template-columns: 40px minmax(0,1fr) calc(18ch + 56px + 12px); }
#clientView .np-house-fields { grid-column: 3; grid-row: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#clientView .np-house-fields > .field { min-width: 0; }
#clientView .np-cache-state { color: #52677f; line-height: 1.5; margin-top: 8px; }
#clientView .np-cache-state:empty { display: none; }
#clientView .np-suggestions { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }