/* Customer workspace layout. Theme colours live in theme.css. */
.customer-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:15px;
}
.customer-summary article {
  min-width:0;
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
}
.customer-summary-icon {
  width:42px;
  height:42px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:11px;
}
.customer-summary-icon svg { width:19px; }
.customer-summary-icon.mint { color:var(--green);background:var(--green-soft); }
.customer-summary-icon.sky { color:var(--blue);background:var(--blue-soft); }
.customer-summary-icon.sand { color:var(--amber);background:var(--amber-soft); }
.customer-summary small,.customer-summary strong,.customer-summary em { display:block; }
.customer-summary small { color:var(--muted);font-size:13px;font-weight:600; }
.customer-summary strong { margin-top:2px;font:800 24px/1.1 Manrope,sans-serif; }
.customer-summary em { margin-top:3px;color:var(--muted);font-size:12px;font-style:normal; }

.customer-directory-panel { overflow:hidden; }
.customer-directory-tools { border-bottom:1px solid var(--line); }
.customer-table-search { width:min(460px,44vw); }
.customer-filter {
  min-height:38px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-raised);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.customer-filter select {
  max-width:135px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
}
.customer-directory-tools .toolbar-result { margin-left:auto; }
.customer-empty { padding:60px 20px;text-align:center;color:var(--muted); }
.customer-empty strong,.customer-empty span { display:block; }
.customer-empty strong { color:var(--ink);font:700 17px Manrope,sans-serif; }
.customer-empty span { margin-top:5px;font-size:14px; }

.customer-table-wrap { width:100%; }
.customer-table { min-width:990px; }
.customer-table th { padding:11px 14px;font-size:10px; }
.customer-table th button {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  cursor:pointer;
}
.customer-table th button::after { content:'↕';opacity:.45;font-size:11px; }
.customer-table th button.active::after { content:'↑';opacity:1;color:var(--green); }
.customer-table th button.active[data-direction="desc"]::after { content:'↓'; }
.customer-list-row { cursor:pointer;transition:background .15s,box-shadow .15s; }
.customer-list-row:hover { background:var(--surface-soft);box-shadow:inset 3px 0 0 var(--green); }
.customer-list-row:focus-visible { outline:2px solid var(--green);outline-offset:-2px; }
.customer-list-row td { height:62px;padding:10px 14px;font-size:13px; }
.customer-list-row td:first-child { display:flex;align-items:center;gap:10px;min-width:220px; }
.customer-list-row td > strong,.customer-list-row td > span { display:block; }
.customer-list-row td > span:not(.customer-list-avatar):not(.customer-contact-count):not(.customer-row-status):not(.customer-list-primary) { margin-top:3px;color:var(--muted);font-size:11px; }
.customer-list-avatar {
  width:36px;
  height:36px;
  flex:none;
  display:grid !important;
  place-items:center;
  border-radius:9px;
  background:var(--green-soft);
  color:var(--green);
  font-size:11px;
  font-weight:800;
}
.customer-list-primary strong,.customer-list-primary small { display:block; }
.customer-list-primary strong { font-size:13px; }
.customer-list-primary small { margin-top:3px;color:var(--muted);font-size:11px;font-weight:500; }
.customer-contact-count {
  width:29px;
  height:29px;
  display:grid !important;
  place-items:center;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:11px;
  font-weight:800;
}
.customer-row-status { display:inline-flex !important;padding:5px 8px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:11px;font-weight:800; }
.customer-row-status.pending { background:var(--amber-soft);color:var(--amber); }
.customer-row-actions { display:flex !important;align-items:center;justify-content:flex-end; }
.open-customer-full { width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--control-bg);color:var(--green);font-size:14px;font-weight:800;cursor:pointer; }
.open-customer-full:hover { border-color:var(--green);background:var(--green-soft); }

.customer-create-modal {
  width:min(860px,96vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.3);
  transform:translateY(12px) scale(.99);
  transition:.22s;
}
.modal-backdrop.open .customer-create-modal { transform:none; }
.customer-modal-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:21px 24px;
  border-bottom:1px solid var(--line);
}
.customer-modal-header h2 { font-size:21px; }
.customer-modal-header p { margin:5px 0 0;color:var(--muted);font-size:13px; }
.customer-form-body { padding:18px 24px;overflow-y:auto;display:grid;gap:14px; }
.customer-form-section { padding:17px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft); }
.customer-form-section > header { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.customer-form-section > header > span { width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:800; }
.customer-form-section h3 { font-size:15px; }
.customer-form-section header p { margin:2px 0 0;color:var(--muted);font-size:12px; }
.customer-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.customer-form-grid + .customer-form-grid { margin-top:12px; }
.customer-form-grid label { color:var(--muted);font-size:12px;font-weight:700; }
.customer-form-grid label.wide { grid-column:1 / -1; }
.customer-form-grid .text-input { margin-top:5px;height:42px;background:var(--input-bg);border-color:var(--line);color:var(--ink);font-size:14px; }
.customer-form-grid label > small { display:block;margin-top:5px;color:var(--muted);font-size:11px;font-weight:500; }
.customer-form-grid select:disabled { opacity:.78;cursor:not-allowed; }
.customer-checkbox { display:flex;align-items:center;gap:8px;margin:13px 0;color:var(--ink);font-size:13px;font-weight:700; }
.customer-checkbox input { width:17px;height:17px;accent-color:var(--green); }
.customer-form-error { min-height:18px;margin:0;color:var(--red);font-size:13px;font-weight:700; }
.customer-modal-footer { display:flex;justify-content:flex-end;gap:9px;padding:13px 22px;border-top:1px solid var(--line);background:var(--panel); }

.customer-active-badge { padding:5px 8px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:11px;font-weight:800; }
#customerDrawer .customer-drawer { left:0;right:auto;transform:translateX(-100%);box-shadow:20px 0 60px rgba(12,37,29,.2); }
#customerDrawer.open .customer-drawer { transform:none; }
.customer-drawer-body { align-content:start; }
.customer-detail-hero {
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:center;
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
}
.customer-detail-avatar { width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:var(--green-soft);color:var(--green);font-weight:800; }
.customer-detail-hero strong,.customer-detail-hero span { display:block; }
.customer-detail-hero strong { font:700 17px Manrope,sans-serif; }
.customer-detail-hero span { margin-top:3px;color:var(--muted);font-size:13px; }
.customer-detail-list { padding:0 15px 14px;display:grid;gap:10px; }
.customer-detail-row { display:grid;grid-template-columns:110px 1fr;gap:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px; }
.customer-detail-row:first-child { border-top:0;padding-top:2px; }
.customer-detail-row > span { color:var(--muted); }
.customer-detail-row > strong { white-space:pre-line; }
.customer-contact-list { padding:0 15px 14px;display:grid;gap:9px; }
.customer-contact { display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft); }
.customer-contact > span { width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--green-soft);color:var(--green);font-size:11px;font-weight:800; }
.customer-contact strong,.customer-contact small { display:block; }
.customer-contact strong { font-size:13px; }
.customer-contact small { margin-top:2px;color:var(--muted);font-size:12px; }
.customer-contact b { padding:4px 7px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:10px; }
.customer-contact b.pending { background:var(--amber-soft);color:var(--amber); }
.customer-contact-empty { padding:4px 15px 16px;color:var(--muted);font-size:13px; }

@media (max-width:900px) {
  .customer-summary { grid-template-columns:1fr; }
  .customer-directory-tools { flex-wrap:wrap; }
  .customer-table-search { width:100%; }
  .customer-directory-tools .toolbar-result { margin-left:0; }
}
@media (max-width:620px) {
  .customer-form-grid { grid-template-columns:1fr; }
  .customer-form-grid label.wide { grid-column:auto; }
  .customer-filter { flex:1; }
  .customer-filter span { display:none; }
  .customer-list-row td { height:58px; }
}

@media (max-width:760px) {
  .customer-summary {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .customer-summary article {
    min-height:104px;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    padding:10px 6px;
    text-align:center;
  }
  .customer-summary-icon { width:32px;height:32px;border-radius:9px; }
  .customer-summary-icon svg { width:16px; }
  .customer-summary small { min-height:24px;font-size:10px;line-height:1.2; }
  .customer-summary strong { margin-top:1px;font-size:19px; }
  .customer-summary em { display:none; }
  .customer-directory-panel,.customer-table-wrap { width:100%;max-width:100%;min-width:0;overflow:visible; }
  .customer-directory-tools { align-items:stretch; }
  .customer-filter { flex:1 1 calc(50% - 5px);min-width:0; }
  .customer-filter select { width:100%;max-width:none;min-width:0; }
  .customer-directory-tools .toolbar-result { flex:1 0 100%; }
  .customer-table { display:block;width:100%;min-width:0;white-space:normal; }
  .customer-table thead { display:none; }
  .customer-table tbody { display:grid;gap:10px;padding:10px; }
  .customer-table .customer-list-row {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px 16px;
    width:100%;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-raised);
    box-shadow:none;
  }
  .customer-table .customer-list-row:hover { background:var(--surface-soft);box-shadow:inset 3px 0 0 var(--green); }
  .customer-table .customer-list-row > td,
  .customer-table .customer-list-row > td:first-child {
    display:block;
    width:auto;
    min-width:0;
    height:auto;
    padding:0;
    border:0;
    font-size:13px;
    white-space:normal;
    background:transparent !important;
  }
  .customer-table .customer-list-row > td[data-label]::before {
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
  }
  .customer-table .customer-primary-cell { grid-column:1 / -1;padding-right:42px !important; }
  .customer-table .customer-primary-cell { display:flex !important;align-items:center;gap:10px; }
  .customer-table .customer-location-cell,
  .customer-table .customer-billing-cell,
  .customer-table .customer-rep-cell { grid-column:1 / -1; }
  .customer-table .customer-list-row td > strong { overflow-wrap:anywhere;font-size:13px; }
  .customer-table .customer-list-row td > span:not(.customer-list-avatar):not(.customer-contact-count):not(.customer-row-status):not(.customer-list-primary) { margin-top:3px;font-size:11px; }
  .customer-table .customer-contact-count { width:26px;height:26px; }
  .customer-table .customer-status-cell { padding-right:38px; }
  .customer-table .customer-action-cell { position:absolute;top:12px;right:12px; }
  .customer-table .customer-row-actions { margin:0 !important; }
  .customer-table .open-customer-full { width:31px;height:31px; }
}