/* ZETAPE — Client detail experience v1.1.0
   Visual-only layout override. Existing data, forms and business logic stay intact. */

#clientModal.modal{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow:hidden;
}

#clientModal .modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(9,24,34,.48);
  backdrop-filter:blur(3px);
}

#clientModal .modal-panel{
  position:relative;
  z-index:1;
  width:min(1180px,calc(100vw - 72px));
  max-width:1180px;
  height:auto;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  border:1px solid rgba(229,231,235,.95);
  border-radius:22px;
  background:#f6f8fb;
  box-shadow:0 30px 90px rgba(9,24,34,.26);
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

#clientModal .modal-head{
  position:sticky;
  top:0;
  z-index:5;
  margin:0;
  padding:26px 30px 20px;
  background:rgba(246,248,251,.96);
  border-bottom:1px solid rgba(229,231,235,.92);
  backdrop-filter:blur(10px);
}

#clientModal .modal-head h2{
  max-width:880px;
  overflow-wrap:anywhere;
  font-size:30px;
  letter-spacing:-.02em;
}

#clientModal #clientModalMsg:not(:empty){
  margin:18px 28px 0;
}

#clientModal .profile-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:20px 28px 32px;
}

#clientModal .profile-grid > .profile-card{
  min-width:0;
  grid-column:1 / -1 !important;
}

/* Stable visual hierarchy independent of dynamic insert order */
#clientModal .ux-results-card{order:10}
#clientModal .ux-client-card{order:20}
#clientModal #clientBillingHistoryCard{order:30}
#clientModal #clientPendingInvoicesCard{order:40}
#clientModal #clientSurveyHistoryCard{order:50}
#clientModal .ux-products-card{order:60}
#clientModal .ux-contacts-card{order:70}

#clientModal .profile-card{
  padding:22px;
  border-radius:17px;
  box-shadow:0 2px 12px rgba(16,24,40,.035);
}

#clientModal .profile-card > .section-head{
  align-items:flex-start;
  margin-bottom:14px;
}

#clientModal .profile-card > .section-head h3{
  font-size:18px;
  letter-spacing:-.01em;
}

/* Results are the primary navigation of the client record */
#clientModal .ux-results-card{
  padding:24px;
}

#clientModal .ux-results-card .result-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px;
}

#clientModal .ux-results-card .result-item{
  position:relative;
  min-width:0;
  min-height:132px;
  padding:17px 42px 16px 17px;
  border:1px solid #e7eaee;
  border-radius:14px;
  background:#f9fafb;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease;
}

#clientModal .ux-results-card .result-item.ux-kpi-action{
  cursor:pointer;
  user-select:none;
}

#clientModal .ux-results-card .result-item.ux-kpi-action::after{
  content:'›';
  position:absolute;
  top:13px;
  right:15px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  border:1px solid #e4e7ec;
  color:#667085;
  font-size:19px;
  line-height:1;
  font-weight:800;
  transition:transform .16s ease,color .16s ease,border-color .16s ease;
}

#clientModal .ux-results-card .result-item.ux-kpi-action:hover,
#clientModal .ux-results-card .result-item.ux-kpi-action:focus-visible{
  outline:none;
  border-color:rgba(15,107,91,.34);
  background:#fff;
  box-shadow:0 9px 24px rgba(16,35,49,.08);
  transform:translateY(-2px);
}

#clientModal .ux-results-card .result-item.ux-kpi-action:hover::after,
#clientModal .ux-results-card .result-item.ux-kpi-action:focus-visible::after{
  transform:translateX(2px);
  color:var(--brand);
  border-color:rgba(15,107,91,.26);
}

#clientModal .ux-results-card .result-item span{
  font-size:12px;
  font-weight:700;
  color:#667085;
}

#clientModal .ux-results-card .result-item strong{
  display:block;
  margin-top:9px;
  font-size:24px;
  line-height:1.12;
  letter-spacing:-.02em;
  white-space:normal;
  overflow-wrap:anywhere;
}

#clientModal .ux-results-card .result-item small{
  display:block;
  margin-top:8px;
  line-height:1.35;
  color:#667085;
}

#clientModal .ux-inline-detail{
  margin-top:14px;
  padding:16px 18px;
  border:1px solid #dfe7e4;
  border-radius:13px;
  background:#f4faf8;
  color:#344054;
  animation:uxDetailIn .16s ease-out;
}

#clientModal .ux-inline-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

#clientModal .ux-inline-detail-title{
  font-size:14px;
  font-weight:800;
  color:#17202a;
}

#clientModal .ux-inline-detail-copy{
  margin-top:5px;
  font-size:13px;
  line-height:1.5;
  color:#667085;
}

#clientModal .ux-inline-detail-close{
  border:0;
  background:transparent;
  color:#667085;
  font-size:18px;
  padding:0 2px;
}

@keyframes uxDetailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Client master data gets room; edit fields use the width instead of stacking vertically */
#clientModal .ux-client-card .identity-list{
  grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr);
  gap:12px;
}

#clientModal .ux-client-card #clientIdentityEdit.form-stack:not(.hidden){
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr);
  gap:13px 16px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #e7eaee;
}

#clientModal .ux-client-card #clientIdentityEdit .field:nth-child(3),
#clientModal .ux-client-card #saveClientIdentityBtn{
  grid-column:1 / -1;
}

#clientModal .ux-client-card #detailDescription{
  min-height:86px;
}

#clientModal .ux-client-card #saveClientIdentityBtn{
  width:auto;
  min-width:190px;
  justify-self:end;
}

#clientModal .result-item,
#clientModal .identity-item,
#clientModal .contact-row > *,
#clientModal .contact-form > *{
  min-width:0;
}

#clientModal .identity-item strong,
#clientModal .contact-row{
  overflow-wrap:anywhere;
}

#clientModal .finance-wide-card,
#clientModal .sat-client-history-card{
  grid-column:1 / -1 !important;
}

#clientModal .finance-chart-wrap{
  max-width:100%;
}

#clientModal .tags{row-gap:8px}

#clientModal #clientBillingHistoryCard,
#clientModal #clientPendingInvoicesCard,
#clientModal #clientSurveyHistoryCard{
  scroll-margin-top:112px;
  transition:border-color .18s ease,box-shadow .18s ease;
}

#clientModal .ux-target-highlight{
  border-color:rgba(15,107,91,.40) !important;
  box-shadow:0 0 0 4px rgba(15,107,91,.08),0 12px 30px rgba(16,35,49,.08) !important;
}

@media(max-width:1050px){
  #clientModal .modal-panel{
    width:min(940px,calc(100vw - 40px));
  }
  #clientModal .ux-results-card .result-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:900px){
  #clientModal.modal{
    padding:0;
    align-items:stretch;
  }
  #clientModal .modal-panel{
    width:100%;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    border:0;
    border-radius:0;
  }
  #clientModal .modal-head{
    padding:20px;
  }
  #clientModal .profile-grid{
    padding:18px 20px 26px;
  }
  #clientModal #clientModalMsg:not(:empty){
    margin:16px 20px 0;
  }
  #clientModal .ux-client-card .identity-list,
  #clientModal .ux-client-card #clientIdentityEdit.form-stack:not(.hidden){
    grid-template-columns:1fr;
  }
  #clientModal .ux-client-card #clientIdentityEdit .field:nth-child(3),
  #clientModal .ux-client-card #saveClientIdentityBtn{
    grid-column:auto;
  }
  #clientModal .ux-client-card #saveClientIdentityBtn{
    width:100%;
  }
}

@media(max-width:600px){
  #clientModal .modal-head{
    padding:16px;
  }
  #clientModal .modal-head h2{font-size:25px}
  #clientModal .profile-grid{
    gap:14px;
    padding:14px 14px 22px;
  }
  #clientModal #clientModalMsg:not(:empty){
    margin:14px 14px 0;
  }
  #clientModal .profile-card,
  #clientModal .ux-results-card{
    padding:16px;
  }
  #clientModal .ux-results-card .result-grid{
    grid-template-columns:1fr !important;
  }
  #clientModal .ux-results-card .result-item{
    min-height:112px;
  }
}