/* Open Design-inspired client directory, scoped away from the approved sidebar. */
#view-clients {
  --ws-bg:#15171b; --ws-panel:#202226; --ws-raised:#27292e; --ws-input:#1b1d21;
  --ws-line:#41444c; --ws-line-soft:#34363e; --ws-muted:#b9bbc3;
}
:root[data-theme="light"] #view-clients {
  --ws-bg:#f5f2ed; --ws-panel:#fff; --ws-raised:#faf8f5; --ws-input:#fff;
  --ws-line:#c9c5c0; --ws-line-soft:#e4dfd9; --ws-muted:#66666e;
}
#app #main-content #view-clients .page-heading {margin-bottom:18px;padding-bottom:20px;gap:20px}
#app #main-content #view-clients .clients-eyebrow {font-size:11px;letter-spacing:1.6px;font-weight:650;margin:0 0 8px;color:var(--ws-muted)}
#app #main-content #view-clients .page-heading h1 {font-size:34px;letter-spacing:-1px;margin-bottom:5px}
#app #main-content #view-clients .page-heading::after {display:none}
#app #main-content #view-clients #new-client-btn {white-space:nowrap;min-height:46px;border-radius:11px;padding:11px 20px;font-size:15px}
#app #main-content #view-clients .client-section-nav {background:transparent;border:0;border-bottom:1px solid var(--ws-line-soft);box-shadow:none;border-radius:0;padding:0 0 12px;margin-bottom:20px;gap:6px}
#app #main-content #view-clients .client-section-nav button {padding:9px 16px;font-size:14px;border-radius:10px}
#client-level-overview {margin-bottom:22px}
.clients-level-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:13px;color:var(--ws-muted)}
#app #main-content #view-clients .clients-level-heading button {font-size:13px;padding:6px 10px}
.clients-level-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#app #main-content #view-clients .clients-level-card {display:flex;align-items:center;gap:14px;text-align:left;padding:20px 18px;min-height:112px;min-width:0;color:var(--ws-ink);background:linear-gradient(120deg,color-mix(in srgb,var(--category-color) 8%,transparent),transparent),var(--ws-panel);border:1px solid var(--ws-line-soft);border-radius:15px;box-shadow:0 5px 16px #00000009;transition:border-color .15s,background .15s}
#app #main-content #view-clients .clients-level-card:hover,#app #main-content #view-clients .clients-level-card[aria-pressed=true] {border-color:var(--category-color);background:linear-gradient(120deg,color-mix(in srgb,var(--category-color) 16%,transparent),transparent),var(--ws-panel)}
#app #main-content #view-clients .clients-level-card[aria-pressed=true] {box-shadow:inset 0 0 0 1px var(--category-color)}
.clients-level-icon {display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;color:color-mix(in srgb,var(--category-color) 65%,white);background:color-mix(in srgb,var(--category-color) 14%,transparent)}
:root[data-theme="light"] .clients-level-icon {color:var(--category-color)}
.clients-level-icon svg {width:25px;height:25px}
.clients-level-copy {display:grid;gap:6px;min-width:0;flex:1}
.clients-level-copy strong {font-size:17px;font-weight:650;overflow-wrap:anywhere;line-height:1.3}
.clients-level-copy>span {font-size:13px;line-height:1.4;color:var(--ws-muted);font-weight:400}
.clients-level-number {display:grid;gap:4px;text-align:right;flex-shrink:0}
.clients-level-number strong {font-size:26px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}
.clients-level-number>span {font-size:11px;color:var(--ws-muted);font-weight:400}
.clients-level-error {display:flex;gap:12px;align-items:center;color:var(--ws-muted);font-size:14px}
#app #main-content #view-clients #client-base-panel>.toolbar {grid-template-columns:minmax(200px,1fr) minmax(170px,.55fr) minmax(140px,.45fr);padding:16px;gap:12px;border-radius:14px;box-shadow:none;margin-bottom:0}
#app #main-content #view-clients #client-base-panel .premium-client-tools {padding-top:10px;gap:6px}
#app #main-content #view-clients .premium-list-heading {margin:20px 2px 12px;align-items:center}
#app #main-content #view-clients .premium-list-heading h2 {font-size:18px}
#app #main-content #view-clients .table-wrap {border-radius:15px;box-shadow:0 8px 25px #0000000c}
#app #main-content #view-clients #clients-list table {min-width:920px}
#app #main-content #view-clients #clients-list th {font-size:12px;padding:0 14px;height:45px;white-space:nowrap;letter-spacing:.3px}
#app #main-content #view-clients #clients-list .client-sort-button {font:inherit;font-weight:600;color:inherit;letter-spacing:inherit;text-align:inherit;border:0;background:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center;gap:6px}
#app #main-content #view-clients #clients-list td {padding:14px;font-size:14px;height:66px}
#app #main-content #view-clients #clients-list .premium-person {gap:11px;min-width:210px}
#app #main-content #view-clients #clients-list .premium-avatar {border-radius:50%;width:36px;height:36px;flex-basis:36px;font-size:12px}
#app #main-content #view-clients #clients-list .client-name-link {font-size:15px;font-weight:600;line-height:1.4}
#app #main-content #view-clients #clients-list td:nth-child(3) {min-width:145px}
#app #main-content #view-clients #clients-list .loyalty-chip {font-size:12px;padding:5px 8px;border-radius:8px}
#app #main-content #view-clients #clients-list :is(.sessions-left,.finance-cell,.cell-date,.cell-phone) {font-variant-numeric:tabular-nums;white-space:nowrap}
#app #main-content #view-clients #clients-list .amount-sale {font-weight:650;color:var(--ws-ink)}
#app #main-content #view-clients #clients-list .clients-empty {padding:44px 20px;text-align:center;color:var(--ws-ink)}
.clients-empty strong {font-size:20px}
.clients-empty p {font-size:14px;color:var(--ws-muted);margin:8px 0 16px}
#app #main-content #view-clients :is(button,input,summary):focus-visible {outline:2px solid var(--ws-red);outline-offset:3px}
dialog#client-drawer {background:var(--ws-panel);border-color:var(--ws-line-soft)}
dialog#client-drawer .client-drawer-panel {background:var(--ws-bg)}
dialog#client-drawer .client-drawer-header {background:var(--ws-panel);padding:22px 24px;border-color:var(--ws-line-soft)}
dialog#client-drawer .client-drawer-title {font-size:25px;line-height:1.3}
dialog#client-drawer .client-drawer-subtitle {font-size:14px;margin-top:7px}
dialog#client-drawer .client-drawer-body {padding:20px 24px;gap:18px}
dialog#client-drawer .client-drawer-section {background:var(--ws-panel);border-color:var(--ws-line-soft);padding:18px;border-radius:14px}
dialog#client-drawer .client-drawer-section h3 {font-size:18px;letter-spacing:-.3px;margin-bottom:12px;color:var(--ws-ink)}
dialog#client-drawer :is(.client-drawer-item-meta,.client-drawer-note,.client-drawer-subheading,.muted) {font-size:14px;line-height:1.6}
dialog#client-drawer .client-drawer-stat {border-color:var(--ws-line-soft);border-radius:12px;padding:14px}
dialog#client-drawer .client-drawer-stat .label {font-size:13px}
dialog#client-drawer .client-drawer-stat .value {font-size:26px}
@media(max-width:1199px) {
  #app #main-content #view-clients .clients-level-card {flex-wrap:wrap;gap:10px;padding:16px}
  .clients-level-icon {flex-basis:32px;width:32px;height:32px}
  .clients-level-number {width:100%;display:flex;align-items:baseline;gap:6px;text-align:left;padding-left:42px}
}
@media(max-width:700px) {
  #app #main-content #view-clients .page-heading {align-items:flex-start;flex-wrap:wrap;gap:14px}
  #app #main-content #view-clients .page-heading h1 {font-size:30px}
  .clients-level-grid {grid-template-columns:1fr;gap:10px}
  #app #main-content #view-clients .clients-level-card {min-height:86px;flex-wrap:nowrap}
  .clients-level-number {width:auto;display:grid;padding:0;text-align:right}
  #app #main-content #view-clients #client-base-panel>.toolbar {grid-template-columns:1fr 1fr;padding:14px}
  #client-base-panel>.toolbar>input {grid-column:1/-1}
  #app #main-content #view-clients .client-section-nav button {padding:9px 8px;font-size:13px}
  #app #main-content #view-clients .premium-list-heading {align-items:flex-start}
  .clients-level-heading {flex-wrap:wrap;gap:2px}
  dialog#client-drawer .client-drawer-header,dialog#client-drawer .client-drawer-body {padding:16px}
  dialog#client-drawer .client-drawer-section {padding:14px}
  dialog#client-drawer .client-drawer-title {font-size:22px}
}
@media(prefers-reduced-motion:reduce) {#app #main-content #view-clients .clients-level-card {transition:none}}