body #team .directory-row .directory-contact-name{display:block;align-self:flex-start;text-align:left;white-space:normal;overflow-wrap:anywhere;height:auto;min-height:44px;padding:6px 0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-transform:none;letter-spacing:normal;font-size:1rem;font-weight:700;line-height:1.3}
body #team .directory-row .directory-contact-name:hover{text-decoration:underline;text-underline-offset:4px}
.customer-appointments-dialog{width:min(640px,calc(100vw - 32px));max-height:85dvh;overflow:auto}
.customer-appointments-contact{overflow-wrap:anywhere;font-weight:600}
.customer-appointments-list{display:grid;gap:12px;margin:16px 0}
.customer-history-card{display:grid;gap:10px;padding:16px;border:1px solid color-mix(in srgb,var(--staff-color) 40%,transparent);border-left:4px solid var(--staff-color);border-radius:12px;background:color-mix(in srgb,var(--staff-color) 8%,#16141c);overflow-wrap:anywhere}
.customer-history-card.is-completed{--staff-color:#92929c!important;background:#26262c;opacity:1}
.customer-history-card.is-cancelled{border-style:dashed}
.customer-history-card p{margin:0}
.customer-history-date{display:grid;gap:4px}
.customer-history-person{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.customer-history-person .badge{margin-left:auto}
.customer-history-person .da-avatar{width:28px;height:28px;flex:none;overflow:hidden;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--staff-color);color:#101014;font-size:10px}
.customer-history-person img{width:100%;height:100%;object-fit:cover}

.customer-appointments-dialog>.close{float:right;margin:0 0 12px 12px}
.customer-appointments-dialog>.close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.customer-history-person .da-avatar>span{width:100%;height:100%;display:flex;align-items:center;justify-content:center}

.customer-history-card{position:relative}
.customer-history-card:has(.customer-history-edit) .customer-history-date{padding-right:52px;min-height:44px}
body dialog.customer-appointments-dialog .customer-history-card button.customer-history-edit{position:absolute;inset:12px 12px auto auto;margin:0;transform:none;width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1}
.customer-history-edit svg{width:18px;height:18px;flex:none}
