/* Customer directory: people first, account tools inside each profile. */
.customer-directory-page .crm-main { max-width: 1440px; }
.customer-directory-page .crm-topbar p { font-size: 1rem; }
.customer-directory-page [hidden] { display: none !important; }
.customer-summary { display:flex; flex-wrap:wrap; gap:14px 30px; margin:24px 0 30px; padding:0 2px; }
.customer-summary > div { display:flex; align-items:baseline; gap:8px; }
.customer-summary strong { color:#173a2d; font:500 1.4rem/1.2 "Outfit",sans-serif; font-variant-numeric:tabular-nums; }
.customer-summary span { font-size:.875rem; color:#66736c; }
.customer-directory { border:1px solid #dde5df; border-radius:18px; background:#fff; box-shadow:0 8px 30px #173a2d06; }
.customer-toolbar { display:flex; align-items:center; gap:16px; padding:24px 26px 18px; }
.customer-search { display:flex; align-items:center; gap:12px; flex:1; min-width:0; color:#64766c; }
.customer-search input { width:100%; min-width:0; border:0; outline-offset:5px; background:transparent; color:#173a2d; font:400 1rem/1.5 "Outfit",sans-serif; padding:10px 0; }
.customer-search svg { flex-shrink:0; }
.customer-advanced { position:relative; flex-shrink:0; }
.customer-advanced summary { display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 15px; border:1px solid #dce4de; border-radius:9px; color:#365346; font-size:.875rem; cursor:pointer; list-style:none; }
.customer-advanced summary::-webkit-details-marker { display:none; }
.customer-advanced[open] summary { background:#edf4ef; border-color:#a8bfb0; }
[data-customer-filter-count] { display:grid; place-items:center; min-width:20px; height:20px; background:#173a2d; color:white; border-radius:50%; font-size:.75rem; }
.customer-filter-panel { position:absolute; z-index:20; right:0; top:calc(100% + 10px); width:min(310px,calc(100vw - 60px)); padding:20px; background:white; border:1px solid #dde5df; border-radius:13px; box-shadow:0 14px 40px #173a2d20; display:grid; gap:16px; }
.customer-filter-panel label { display:grid; gap:7px; color:#40584b; font-size:.875rem; }
.customer-filter-panel input,.customer-filter-panel select { width:100%; min-width:0; height:44px; padding:9px 12px; border:1px solid #dce4de; border-radius:8px; background:#fafcfb; color:#173a2d; font:400 .9375rem "Outfit",sans-serif; }
.customer-segments { display:flex; flex-wrap:wrap; gap:6px; padding:0 26px 20px; }
.customer-segments button { border:0; background:transparent; border-radius:8px; padding:10px 14px; color:#65736a; font:400 .875rem/1.3 "Outfit",sans-serif; cursor:pointer; }
.customer-segments button:hover { background:#f4f7f4; color:#173a2d; }
.customer-segments button[aria-pressed="true"] { background:#173a2d; color:#fff; }
.customer-directory-caption { display:flex; justify-content:space-between; gap:15px; padding:16px 28px; border-top:1px solid #edf0ec; border-bottom:1px solid #edf0ec; color:#68766d; font-size:.8125rem; background:#fbfcfa; }
.customer-list { padding:0 12px; }
.customer-list > div + div { border-top:1px solid #edf1ec; }
.customer-person { display:flex; width:100%; align-items:center; gap:17px; padding:22px 16px; text-align:left; background:transparent; border:0; border-radius:11px; cursor:pointer; color:#203b2e; font:400 1rem/1.4 "Outfit",sans-serif; transition:background .15s ease; }
.customer-person:hover { background:#f4f8f4; }
.customer-directory-page :is(button,summary,input,select,textarea,a):focus-visible { outline:2px solid #367951; outline-offset:4px; }
.customer-avatar { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:16px; color:#315e43; background:#eaf1e7; font:500 1rem/1 "Outfit",sans-serif; letter-spacing:.025em; }
.customer-list > div:nth-child(3n+2) .customer-avatar { background:#eef0f7; color:#536381; }
.customer-list > div:nth-child(3n) .customer-avatar { background:#f5efdf; color:#7a6535; }
.customer-person-info { flex:1; min-width:0; display:grid; gap:5px; }
.customer-name-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.customer-name-line > strong { font-size:1.0625rem; font-weight:500; overflow-wrap:anywhere; }
.customer-status { display:inline-flex; align-items:center; gap:5px; width:max-content; font-size:.75rem; font-weight:400; line-height:1.4; padding:3px 8px; border-radius:6px; background:#edf5ee; color:#37633e; }
.customer-status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.customer-status.is-archived { background:#f0f1f0; color:#626d65; }
.customer-status.is-suspended { background:#fff0e7; color:#954a29; }
.customer-email { color:#65766b; font-size:.875rem; overflow-wrap:anywhere; }
.customer-person-context { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; color:#788278; font-size:.8125rem; }
.customer-inline-tags { display:inline-flex; flex-wrap:wrap; gap:5px; }
.customer-directory-page .customer-inline-tags .crm-tag { background:#f3f4ef; border:0; color:#6a735f; font-size:.75rem; padding:2px 7px; }
.customer-value { display:grid; gap:5px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
.customer-value strong { font-weight:500; font-size:1.125rem; }
.customer-value > span { font-size:.875rem; color:#738075; }
.customer-chevron { margin-left:10px; color:#859b89; font-size:1.2rem; }
.customer-empty { padding:56px 24px; }
.customer-empty-icon { display:block; margin-bottom:14px; color:#8da68e; font-size:2.5rem; }
.customer-pagination { padding:20px; text-align:center; border-top:1px solid #edf1ec; }
.customer-directory-page .crm-drawer-panel { width:min(620px,100vw); background:#fbfcfa; }
.customer-directory-page .crm-drawer-top { background:#fff; color:#46624d; padding:18px 28px; font-size:.875rem; text-transform:none; letter-spacing:0; }
.customer-directory-page .crm-drawer-top button { color:#36563f; border-color:#dce5db; }
.customer-profile-head { display:flex; gap:18px; align-items:center; margin:4px 0 26px; }
.customer-avatar-large { flex-basis:68px; width:68px; height:68px; border-radius:22px; font-size:1.5rem; }
.customer-profile-head > div { min-width:0; }
.customer-profile-head h2 { font:500 clamp(1.6rem,3vw,2rem)/1.2 "Outfit",sans-serif; margin:8px 0; overflow-wrap:anywhere; color:#173a2d; letter-spacing:-.035em; }
.customer-profile-head p { margin:0; font-size:.875rem; color:#708073; }
.customer-profile-stats { display:grid; grid-template-columns:1.4fr .7fr 1fr; gap:14px; border-block:1px solid #e0e8de; padding:20px 0; margin-bottom:25px; }
.customer-profile-stats > div { display:grid; gap:7px; }
.customer-profile-stats strong { font:500 1.25rem/1.2 "Outfit",sans-serif; color:#244b32; overflow-wrap:anywhere; }
.customer-profile-stats span { font-size:.8125rem; color:#738073; }
.customer-directory-page .crm-contact-card { background:transparent; border:0; padding:0; margin:24px 0; }
.customer-directory-page .crm-contact-card :is(dt,dd) { font-size:.875rem; overflow-wrap:anywhere; }
.customer-directory-page .crm-contact-card > small { font-size:.8125rem; line-height:1.5; color:#6b786d; }
.customer-directory-page .crm-customer-orders { gap:0; border-left:1px solid #dce6d7; margin:10px 0 0 5px; padding-left:16px; }
.customer-directory-page .crm-customer-orders a { position:relative; border:0; border-radius:8px; margin:0 0 9px; padding:12px; background:#fff; }
.customer-directory-page .crm-customer-orders a::before { content:""; position:absolute; left:-21px; top:22px; width:8px; height:8px; border-radius:50%; background:#7a9874; box-shadow:0 0 0 4px #fbfcfa; }
.customer-directory-page .crm-customer-orders :is(strong,small) { font-size:.875rem; }
.customer-directory-page .crm-update-form { border:1px solid #e0e8de; padding:20px; border-radius:14px; background:#fff; }
.customer-directory-page .crm-update-form :is(label,input,textarea) { font-size:.9375rem; }
.customer-directory-page .crm-update-form small { font-size:.8125rem; color:#68756c; }
.customer-directory-page .crm-update-form textarea { min-height:130px; }
.customer-account-controls { margin-top:26px; border-top:1px solid #e0e8de; padding-top:20px; }
.customer-account-controls > summary { cursor:pointer; color:#617565; font-size:.875rem; padding:8px 0; }
.customer-directory-page .crm-danger-zone p { font-size:.875rem; }
.customer-contact-editor { padding:22px 0; border-bottom:1px solid #e0e8de; }
.customer-contact-editor h3 { margin:0 0 8px; font:500 1rem "Outfit",sans-serif; }
.customer-contact-editor > p { margin:0 0 18px; color:#68756c; font-size:.875rem; line-height:1.6; }
.customer-contact-email { display:grid; gap:5px; margin-bottom:20px; font-size:.875rem; }
.customer-contact-email span { color:#68756c; }
.customer-contact-email strong { font-weight:500; overflow-wrap:anywhere; }
.customer-contact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.customer-contact-fields label { display:grid; gap:7px; font-size:.875rem; color:#40584b; }
.customer-contact-fields .is-wide { grid-column:1/-1; }
.customer-contact-fields input { min-width:0; width:100%; box-sizing:border-box; border:1px solid #d6e0d5; border-radius:8px; padding:11px 12px; background:#fff; color:#173a2d; font:400 1rem/1.4 "Outfit",sans-serif; }
.customer-contact-fields input::placeholder { color:#879088; }
.customer-contact-editor > button { margin-top:20px; min-height:44px; }
.customer-contact-editor > button:disabled { opacity:.6; cursor:wait; }
.customer-contact-editor > small { display:block; margin-top:15px; color:#68756c; font-size:.8125rem; }
.customer-contact-editor .customer-contact-feedback { margin:16px 0 0; color:#2b6541; }
.customer-contact-editor .customer-contact-feedback.is-error { color:#a5392c; }
@media(max-width:400px) { .customer-contact-fields { grid-template-columns:1fr; } }
@media(max-width:700px) {
  .customer-summary { gap:12px 22px; margin:20px 0 24px; }
  .customer-summary > div { flex-basis:calc(50% - 22px); }
  .customer-toolbar { padding:16px 16px 12px; gap:10px; }
  .customer-segments { padding:0 12px 14px; gap:3px; }
  .customer-segments button { padding:10px; }
  .customer-directory-caption { padding:14px 18px; }
  .customer-directory-caption > span:last-child { display:none; }
  .customer-list { padding:0 7px; }
  .customer-person { gap:12px; padding:20px 10px; flex-wrap:wrap; }
  .customer-avatar { flex-basis:40px; width:40px; height:40px; border-radius:13px; }
  .customer-name-line { gap:5px; }
  .customer-person-info { flex-basis:calc(100% - 60px); }
  .customer-value { margin-left:52px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; text-align:left; }
  .customer-value strong { font-size:1rem; }
  .customer-chevron { margin-left:auto; }
  .customer-avatar-large { flex-basis:58px; width:58px; height:58px; }
  .customer-directory-page .crm-drawer-scroll { padding:22px 20px; }
  .customer-profile-stats { gap:9px; }
}
@media(prefers-reduced-motion:reduce) { .customer-person { transition:none; } }

.customer-membership-badges{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;vertical-align:middle}
.customer-membership-badge{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:7px;background:#f6efd9;color:#8a6418}
.customer-membership-badge svg{width:16px;height:16px}
.customer-badge-vip svg{fill:currentColor;stroke-width:1}
.customer-badge-founder{background:#f5e9ce;color:#8b5b11}
.customer-badge-affiliate{background:#e9f1e9;color:#365c45;width:21px;height:21px}
.customer-badge-affiliate svg{width:15px;height:15px}
.customer-profile-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.customer-status-tag-group{display:grid;gap:10px;margin:0 0 20px;color:#52675a}
.customer-status-tag-group>small{color:#7a877d;font-size:.8rem}
.customer-status-tags{display:flex;flex-wrap:wrap;gap:8px}
.customer-status-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid #dfe5dd;border-radius:8px;padding:8px 12px;background:#fafbf8;color:#8a958c;font-size:.875rem}
.customer-status-tag.is-selected{color:#214e34;background:#e9f2e4;border-color:#b3caaa;font-weight:500}

.customer-badge-subscription{background:#edf0f5;color:#5a6474}