/* Client profile isolated styles */
/* Container and header */
#profileModal[data-profile-type="client"] .profile-container { background: var(--profile-bg); border:1px solid var(--profile-border); margin:20px auto 0; padding:30px 30px 30px 30px; border-radius:10px; max-width:900px; width:90%; box-shadow:0 0 20px rgba(0,0,0,0.3); position:relative; display:flex; flex-direction:column; gap:20px; }
#profileModal[data-profile-type="client"] .profile-header { display:flex; justify-content:space-between; align-items:center; margin:0 auto; padding:12px 16px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow); position:relative; max-width:980px; width:100%; box-sizing:border-box; flex-wrap:nowrap; gap:8px; }

/* Ensure our rendered wrapper is constrained within the modal */
#profileModal[data-profile-type="client"] .client-profile { 
  display: flex;
  flex-direction: column;
  gap: 20px; /* Uniform gap between compliance, layout, paired row, and notes */
  max-width: 980px; 
  width: 100%; 
  margin: 0 auto; 
  padding: 0 12px 0; 
  box-sizing: border-box; 
}
#profileModal[data-profile-type="client"] .profile-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#profileModal[data-profile-type="client"] .profile-header h2 { color:var(--primary-dark); font-size:2rem; font-weight:700; display:flex; align-items:center; gap:12px; margin:0; flex:1; }

/* Layout */
#profileModal[data-profile-type="client"] .profile-body { display:flex; gap:20px; padding:0 12px 0; align-items:flex-start; position:relative; max-width:980px; width:100%; margin:0 auto; box-sizing:border-box; overflow-x:hidden; }
#profileModal[data-profile-type="client"] .profile-layout-modern { display:flex; gap:20px; padding:0; flex:1; min-height:0; box-sizing:border-box; overflow-x:hidden; overflow: visible; }
#profileModal[data-profile-type="client"] .profile-content-area { flex:1; display:flex; flex-direction:column; gap:20px; min-width:0; }
#profileModal[data-profile-type="client"] .profile-sidebar-area { width:320px; flex-shrink:0; display:flex; flex-direction:column; gap:20px; min-height:0; }

/* Card sizing: let JS precisely set Contact height; Address remains auto */
#profileModal[data-profile-type="client"] .contact-card { display:flex; flex-direction:column; }
#profileModal[data-profile-type="client"] .address-card { display:flex; flex-direction:column; }
#profileModal[data-profile-type="client"] .contact-card .profile-card-content,
#profileModal[data-profile-type="client"] .address-card .profile-card-content { flex:1; min-height:0; overflow:auto; }

/* Two-column pair for Contact + Address */
#profileModal[data-profile-type="client"] .profile-two-col-pair { display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin: 0; }
#profileModal[data-profile-type="client"] .profile-two-col-pair .col { min-width:0; margin: 0; }
#profileModal[data-profile-type="client"] .profile-two-col-pair .col > .profile-card { height: 220px; display:flex; flex-direction:column; margin: 0; }
#profileModal[data-profile-type="client"] .profile-two-col-pair .profile-card .profile-card-content { flex:1; min-height:0; overflow:auto; }

/* Paired row below main columns: keep bottoms flush */
#profileModal[data-profile-type="client"] .profile-paired-row { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:20px; padding:0; max-width:980px; width:100%; margin:0 auto; box-sizing:border-box; align-items:stretch; }
#profileModal[data-profile-type="client"] .profile-paired-row .paired-left, 
#profileModal[data-profile-type="client"] .profile-paired-row .paired-right { min-width:0; }
/* Paired cards equal height */
#profileModal[data-profile-type="client"] .profile-paired-row .paired-left > .profile-card,
#profileModal[data-profile-type="client"] .profile-paired-row .paired-right > .profile-card { height:420px; display:flex; flex-direction:column; }

/* Cards - No extra margins, gaps handled by parent containers */
#profileModal[data-profile-type="client"] .profile-card { 
  background:#fff; 
  border-radius:8px; 
  box-shadow:0 2px 4px rgba(0,0,0,0.1); 
  overflow:hidden; 
  position:relative; 
  border:1px solid var(--border,#e2e8f0); 
  max-width:100%; 
  margin: 0; /* critical: no margins so gap stays uniform */
}
#profileModal[data-profile-type="client"] .profile-card .profile-section-heading { background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:16px 20px 12px; margin:0; font-size:1.1rem; color:#1e293b; font-weight:600; display:flex; align-items:center; gap:8px; }
#profileModal[data-profile-type="client"] .profile-card .profile-card-content { padding:20px; flex:1; overflow-y:auto; }

/* Notes and sidebar specifics */
#profileModal[data-profile-type="client"] #profileNotesSection .profile-section-heading { padding:16px 0 12px; }
#profileModal[data-profile-type="client"] .profile-details-sidebar { background:#fff; border:1px solid #e9ecef; border-radius:8px; overflow:hidden; }
#profileModal[data-profile-type="client"] .profile-field { padding:10px 16px; border-bottom:1px solid #f8f9fa; display:flex; flex-direction:column; gap:4px; }
#profileModal[data-profile-type="client"] .profile-field label { font-size:var(--small-font-size); color:var(--secondary); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
#profileModal[data-profile-type="client"] .profile-field span { color:var(--dark); font-size:var(--base-font-size); word-break:break-word; }

/* Avatar block */
#profileModal[data-profile-type="client"] .avatar-block { display:flex; flex-direction:column; align-items:center; gap:8px; }
#profileModal[data-profile-type="client"] .avatar-wrapper { width:96px; height:96px; border-radius:50%; background:#f1f5f9; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.06); }
#profileModal[data-profile-type="client"] .avatar-img { width:100%; height:100%; object-fit:cover; display:block; }
#profileModal[data-profile-type="client"] .avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#334155; font-weight:700; font-size:28px; }

/* Overview grid */
#profileModal[data-profile-type="client"] .profile-overview-grid { display:grid; grid-template-columns: 120px 1fr; gap:16px; align-items:flex-start; }
#profileModal[data-profile-type="client"] .overview-fields { display:flex; flex-direction:column; gap:6px; }
#profileModal[data-profile-type="client"] .overview-fields > div { display:flex; align-items:baseline; gap:10px; }
#profileModal[data-profile-type="client"] .overview-fields > div > strong { width:110px; flex:0 0 110px; text-align:left; padding-right:4px; }

/* Meta card label/value alignment */
#profileModal[data-profile-type="client"] .meta-fields { display:flex; flex-direction:column; gap:6px; }
#profileModal[data-profile-type="client"] .meta-fields > div { display:flex; align-items:baseline; gap:10px; }
#profileModal[data-profile-type="client"] .meta-fields > div > strong { width:110px; flex:0 0 110px; text-align:left; padding-right:4px; }

/* Simple two-column grid */
#profileModal[data-profile-type="client"] .grid-two { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:12px; }

/* Notes list: limit height and scroll */
#profileModal[data-profile-type="client"] #profileNotesList { max-height: 220px; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:6px; }
#profileModal[data-profile-type="client"] .note-item { padding:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; }
#profileModal[data-profile-type="client"] .note-meta { font-size:12px; color:#64748b; margin-bottom:4px; }
#profileModal[data-profile-type="client"] .note-content { white-space:pre-wrap; word-break:break-word; color:#0f172a; }
#profileModal[data-profile-type="client"] .note-add textarea { width:100%; min-height:70px; }

/* Notes card: fixed height with internal vertical scroll */
#profileModal[data-profile-type="client"] .notes-card { margin: 0; height: 320px; display:flex; flex-direction:column; }
#profileModal[data-profile-type="client"] .notes-card .profile-card-content { padding-bottom: 12px; flex: 1 1 auto; display:flex; flex-direction:column; min-height:0; }
#profileModal[data-profile-type="client"] .notes-card #profileNotesList { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height:0; }

/* Remove bottom gutter - uniform padding handles it */
#profileModal[data-profile-type="client"] .profile-bottom-gutter { display: none; }

/* Beautify the notes input box */
#profileModal[data-profile-type="client"] .note-add textarea {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#profileModal[data-profile-type="client"] .note-add textarea:focus {
  border-color: #94a3b8;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(148,163,184,0.25), inset 0 1px 2px rgba(0,0,0,0.05);
}
#profileModal[data-profile-type="client"] .note-add textarea::placeholder { color:#94a3b8; }

/* Optional: tidy the Add Note button spacing */
#profileModal[data-profile-type="client"] .note-add > div { margin-top: 10px !important; }
/* Notes expanded rules removed — handled universally in profile-placement.css */

/* Activity timeline */
#profileModal[data-profile-type="client"] .activity-timeline { display:flex; flex-direction:column; gap:8px; }
#profileModal[data-profile-type="client"] .activity-item { padding:10px; border:1px solid #e2e8f0; border-radius:6px; background:#fff; }
#profileModal[data-profile-type="client"] .activity-meta { font-size:12px; color:#64748b; margin-bottom:4px; }
#profileModal[data-profile-type="client"] .activity-desc { white-space:pre-wrap; }

/* Neater multi-line address rendering */
#profileModal[data-profile-type="client"] .address-card .profile-card-content {
  line-height: 1.6; /* add line spacing between address lines */
}

/* Ensure bottom pale-blue border equals side thickness inside modal */
#profileModal[data-profile-type="client"] .modal-body { padding-bottom: 3px !important; }
#profileModal[data-profile-type="client"] .modal-content { padding-bottom: 0 !important; }

/* Free Text: fill card, vertical scroll inside */
#profileModal[data-profile-type="client"] .free-text-card { display:flex; flex-direction:column; }
#profileModal[data-profile-type="client"] .free-text-card .profile-card-content { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; }
#profileModal[data-profile-type="client"] .free-text-card textarea { flex:1; min-height:0; resize:vertical; }

#profileModal[data-profile-type="client"] .recent-activity-card { display:flex; flex-direction:column; }
#profileModal[data-profile-type="client"] .recent-activity-card .profile-card-content { flex:1; min-height:0; overflow:auto; display:flex; }
#profileModal[data-profile-type="client"] .recent-activity-card .activity-timeline { flex:1; min-height:0; overflow-y:auto; padding-right:6px; }

/* Header title block alignment */
#profileModal[data-profile-type="client"] .profile-title-block { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#profileModal[data-profile-type="client"] .profile-title-block .title-text { line-height:1.1; }
#profileModal[data-profile-type="client"] .profile-subtitle { font-size:14px; color:#64748b; line-height:1.1; }

/* Make compliance panel span the full client profile width and center
   so its outside edges line up with Overview + Meta columns */
#profileModal[data-profile-type="client"] #compliancePanel.profile-card {
  width: 100%;
  max-width: none;
  margin: 0 auto 12px; /* center within client-profile wrapper */
  box-sizing: border-box;
  position: relative;
  z-index: 9999 !important; /* Force above all other elements */
  will-change: transform; /* Create new stacking context */
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Ensure profile content stays below compliance panel */
#profileModal[data-profile-type="client"] .client-profile { 
  position: relative; 
  z-index: 1; 
  isolation: isolate; /* Create new stacking context */
}

/* Even spacing above the first compliance row */
#profileModal[data-profile-type="client"] #compliancePanel #complianceRows {
  margin-top: 8px; /* matches .compliance-row margin-bottom */
}

/* Compliance inputs: sleek, modern fields */
#profileModal[data-profile-type="client"] #compliancePanel .compliance-row input[type="text"],
#profileModal[data-profile-type="client"] #compliancePanel .compliance-row input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 8px;
  background: #f8fafc; /* slate-50 */
  font-size: 14px;
  color: #0f172a; /* slate-900 */
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none; /* remove default dark outline */
}

#profileModal[data-profile-type="client"] #compliancePanel .compliance-row input[type="text"]::placeholder {
  color: #94a3b8; /* slate-400 */
}

#profileModal[data-profile-type="client"] #compliancePanel .compliance-row input[type="text"]:focus,
#profileModal[data-profile-type="client"] #compliancePanel .compliance-row input[type="date"]:focus {
  border-color: #94a3b8; /* slate-400 */
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(148,163,184,0.25);
}

/* Tidy date inputs across browsers */
#profileModal[data-profile-type="client"] #compliancePanel .compliance-row input[type="date"]::-webkit-calendar-picker-indicator {
  filter: grayscale(40%);
  opacity: .8;
}

/* HYBRID PROFILES: Ensure same uniform gaps as client profiles */
#profileModal[data-profile-type="hybrid"] .profile-paired-row { 
  margin: 0 auto !important; /* Remove extra vertical margins */
}
#profileModal[data-profile-type="hybrid"] .notes-card { 
  margin: 0 !important; /* Remove extra top margin */
}

/* Enforce uniform 20px gaps exactly like candidate profile */
#profileModal[data-profile-type="client"] .client-profile { gap: 20px !important; }
#profileModal[data-profile-type="client"] .profile-content-area > .profile-card,
#profileModal[data-profile-type="client"] .profile-sidebar-area > .profile-card { margin: 0 !important; }
#profileModal[data-profile-type="client"] .profile-paired-row { margin: 0 auto !important; padding: 0 !important; }
#profileModal[data-profile-type="client"] .notes-card { margin: 0 !important; }

/* Absolute margin reset for all direct sections so only 'gap' governs spacing */
#profileModal[data-profile-type="client"] .client-profile > * { margin: 0 !important; }
#profileModal[data-profile-type="client"] .profile-layout-modern,
#profileModal[data-profile-type="client"] .profile-content-area,
#profileModal[data-profile-type="client"] .profile-sidebar-area { margin: 0 !important; }

/* Ensure first/last children do not add rogue outer space */
#profileModal[data-profile-type="client"] .profile-content-area > .profile-card:first-child,
#profileModal[data-profile-type="client"] .profile-sidebar-area > .profile-card:first-child,
#profileModal[data-profile-type="client"] .client-profile > .profile-card:first-child { margin-top: 0 !important; }
#profileModal[data-profile-type="client"] .profile-content-area > .profile-card:last-child,
#profileModal[data-profile-type="client"] .profile-sidebar-area > .profile-card:last-child,
#profileModal[data-profile-type="client"] .client-profile > .profile-card:last-child { margin-bottom: 0 !important; }