/* Client profile: one scroll area, clear balances, retained editing controls. */
body > dialog#client-drawer {width:min(1240px,calc(100vw - 32px));max-width:calc(100vw - 32px);border-radius:20px}
#client-drawer .client-drawer-header {padding:20px 24px;gap:20px;align-items:center;border-bottom:1px solid var(--ws-line);background:var(--ws-panel)}
#client-drawer .client-drawer-header > div:first-child {min-width:0;flex:1}
body > dialog#client-drawer .client-drawer-title {font:700 27px/1.25 var(--font-heading);letter-spacing:-.6px;margin:0}
#client-drawer .client-drawer-subtitle {display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;margin:8px 0 0;font-size:14px;color:var(--ws-muted)}
#client-drawer .client-drawer-subtitle a {color:var(--ws-ink);text-decoration:none}
#client-drawer .client-profile-header-category {display:inline-flex}
#client-drawer .client-profile-header-actions {display:flex;align-items:center;gap:8px;flex-shrink:0}
#client-drawer .client-profile-header-actions button {min-height:42px;font-size:14px}
#client-drawer .client-drawer-body {padding:20px 24px 24px;gap:18px;background:var(--ws-bg)}
#client-drawer .client-drawer-stats {grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#client-drawer .client-drawer-stat {padding:16px 18px;min-height:96px;border:1px solid var(--ws-line-soft);border-radius:14px;background:var(--ws-panel);box-shadow:0 4px 14px #00000005}
#client-drawer .client-drawer-stat .value {font:700 29px/1.25 var(--font-heading);color:var(--ws-ink)}
#client-drawer .client-drawer-stat .label {font-size:13px;line-height:1.5;margin-top:6px;color:var(--ws-muted)}
#client-drawer .client-drawer-stat--success {border-top:3px solid #5d917b}
#client-drawer .client-drawer-stat--next {border-top:3px solid var(--ws-red)}
#client-drawer .client-drawer-stat--next .value {font-size:20px;line-height:1.6}
#client-drawer .client-drawer-section {padding:20px;min-width:0;border-radius:16px;background:var(--ws-panel);border:1px solid var(--ws-line-soft);margin:0}
#client-drawer .client-drawer-section h3 {font:650 19px/1.4 var(--font-heading);letter-spacing:-.25px;color:var(--ws-ink);margin:0 0 14px}
#client-drawer .client-profile-section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
#client-drawer .client-profile-section-heading h3 {margin:0}
#client-drawer .client-profile-section-heading > span {font-size:12px;color:var(--ws-muted)}
#client-drawer .client-profile-finance-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#client-drawer .client-profile-finance-card {display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:var(--ws-raised);border:1px solid var(--ws-line-soft);min-width:0}
#client-drawer .client-profile-finance-card > span {font-size:13px;line-height:1.45;color:var(--ws-muted);min-height:38px}
#client-drawer .client-profile-finance-card > strong {font:700 24px/1.3 var(--font-heading);color:var(--ws-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#client-drawer .client-profile-finance-card small {font-size:11px;line-height:1.4;color:var(--ws-muted)}
#client-drawer .client-profile-finance-card.has-due {background:color-mix(in srgb,var(--ws-red) 7%,var(--ws-panel));border-color:color-mix(in srgb,var(--ws-red) 25%,var(--ws-line))}
#client-drawer .client-profile-finance-note {font-size:12px;line-height:1.5;color:var(--ws-muted);margin:12px 0 0}
#client-drawer .client-profile-columns {display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:18px;align-items:start}
#client-drawer :is(.client-profile-main,.client-profile-aside) {display:grid;gap:18px;min-width:0}
#client-drawer .client-profile-services {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#client-drawer .client-profile-service {display:grid;text-align:left;gap:7px;min-width:0;white-space:normal;padding:14px;border-radius:12px;border:1px solid var(--ws-line);background:var(--ws-raised);color:var(--ws-ink);box-shadow:none}
#client-drawer .client-profile-service strong {font-size:14px;line-height:1.5}
#client-drawer .client-profile-service > span {font-size:12px;color:var(--ws-muted)}
#client-drawer .client-profile-service small {font-size:12px;color:var(--ws-red);margin-top:3px}
#client-drawer .client-profile-service:hover:not(:disabled) {border-color:var(--ws-red);background:var(--ws-panel)}
#client-drawer .client-profile-quick > .muted {font-size:12px;line-height:1.55;margin:12px 0 0}
#client-drawer .client-drawer-abonements {gap:14px}
#client-drawer .client-drawer-abonement {padding:16px;background:var(--ws-raised);border:1px solid var(--ws-line);border-radius:12px;box-shadow:none}
#client-drawer .client-drawer-abonement-head {display:flex;justify-content:space-between;gap:12px;align-items:start;flex-wrap:wrap;margin-bottom:14px}
#client-drawer .client-drawer-abonement .package-name {font-size:17px;line-height:1.4;font-weight:650}
#client-drawer .client-drawer-abonement-completed {opacity:1}
#client-drawer .client-profile-sessions {display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:10px 0 12px}
#client-drawer .client-profile-sessions > span {font-size:13px;color:var(--ws-muted)}
#client-drawer .client-profile-sessions strong {font:700 30px/1.2 var(--font-heading);color:var(--ws-ink)}
#client-drawer .client-profile-sessions small {font-size:15px;color:var(--ws-muted);font-weight:500}
#client-drawer .client-profile-sessions progress {grid-column:1/-1;width:100%;height:6px;border:0;border-radius:8px;overflow:hidden;accent-color:var(--ws-red);background:var(--ws-line)}
#client-drawer progress::-webkit-progress-bar {background:var(--ws-line);border-radius:8px}
#client-drawer progress::-webkit-progress-value {background:var(--ws-red);border-radius:8px}
#client-drawer .client-drawer-finance {padding:12px 0;margin:12px 0;border-top:1px solid var(--ws-line);border-bottom:1px solid var(--ws-line)}
#client-drawer .client-drawer-finance-row {font-size:14px;gap:12px;line-height:1.6}
#client-drawer .client-drawer-actions {gap:8px;flex-wrap:wrap;margin-top:10px}
#client-drawer .client-drawer-actions button {font-size:13px;padding:9px 12px;white-space:normal;min-height:38px}
#client-drawer .client-drawer-pay-abonement {color:var(--ws-red);border-color:color-mix(in srgb,var(--ws-red) 40%,var(--ws-line))}
#client-drawer :is(.client-profile-management,.client-drawer-completed) {border-top:1px solid var(--ws-line);padding-top:12px;margin-top:12px}
#client-drawer summary {font-size:15px;line-height:1.5;cursor:pointer;color:var(--ws-ink)}
#client-drawer .client-profile-history > summary {font-size:18px;font-weight:650}
#client-drawer .client-drawer-list {max-height:none;overflow:visible;display:grid;gap:0}
#client-drawer .client-visit-row {display:flex;align-items:start;gap:16px;padding:16px 0;border-bottom:1px solid var(--ws-line-soft)}
#client-drawer .client-visit-date {display:grid;gap:5px;flex:0 0 108px;color:var(--ws-ink)}
#client-drawer .client-visit-date strong {font-size:13px;line-height:1.5}
#client-drawer .client-visit-date span {font-size:12px;color:var(--ws-muted)}
#client-drawer .client-visit-content {display:grid;gap:6px;min-width:0;flex:1}
#client-drawer .client-visit-content > strong {font-size:14px;line-height:1.5}
#client-drawer .client-visit-content > :is(span,small) {font-size:12px;color:var(--ws-muted);line-height:1.5}
#client-drawer .client-visit-labels {display:flex;flex-wrap:wrap;gap:6px}
#client-drawer .client-visit-row > button {font-size:12px;padding:7px 9px;white-space:normal;max-width:112px;flex-shrink:0}
#client-drawer .client-drawer-empty {padding:18px;background:var(--ws-raised);border:1px dashed var(--ws-line);border-radius:10px;font-size:14px;line-height:1.6}
#client-drawer .client-drawer-empty--upcoming::before {display:none}
#client-drawer .training-debt-row {padding:12px 0;border-bottom:1px solid var(--ws-line-soft)}
#client-drawer #client-profile-more-history {margin-top:14px;width:100%;font-size:14px}
#client-drawer #client-profile-more-history[hidden] {display:none}
#client-drawer :is(button,a,summary):focus-visible {outline:2px solid var(--ws-red);outline-offset:3px}
@media(max-width:1050px){
  #client-drawer .client-profile-columns {grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr)}
  #client-drawer .client-profile-finance-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #client-drawer .client-visit-row {flex-wrap:wrap}
  #client-drawer .client-visit-row > button {margin-left:124px}
  #client-drawer .client-profile-services {grid-template-columns:1fr}
}
@media(max-width:760px){
  body > dialog#client-drawer {width:calc(100vw - 12px);max-width:calc(100vw - 12px);border-radius:14px}
  #client-drawer .client-drawer-header {padding:14px;gap:12px;align-items:start;flex-wrap:wrap}
  body > dialog#client-drawer .client-drawer-title {font-size:23px}
  #client-drawer .client-profile-header-actions {width:100%;gap:8px}
  #client-drawer #client-drawer-close {margin-left:auto}
  #client-drawer .client-drawer-body {padding:14px;gap:14px}
  #client-drawer .client-drawer-stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #client-drawer .client-drawer-stat {padding:12px;min-height:88px}
  #client-drawer .client-drawer-stat--next .value {font-size:17px}
  #client-drawer .client-profile-columns {grid-template-columns:minmax(0,1fr);gap:14px}
  #client-drawer :is(.client-profile-main,.client-profile-aside) {gap:14px}
  #client-drawer .client-drawer-section {padding:14px}
  #client-drawer .client-profile-finance-card {padding:11px;gap:6px}
  #client-drawer .client-profile-finance-card > strong {font-size:21px}
  #client-drawer .client-profile-finance-card > span {font-size:12px;min-height:36px}
  #client-drawer .client-visit-row {gap:10px}
  #client-drawer .client-visit-date {flex-basis:92px}
  #client-drawer .client-visit-row > button {margin-left:102px}
}