:root {
  --ivqa-card-radius: 14px;
  --ivqa-card-border: 1px solid #e6eaf0;
  --ivqa-card-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  --ivqa-text: #0f172a;
  --ivqa-muted: rgba(15, 23, 42, 0.62);
  --ivqa-muted-2: rgba(15, 23, 42, 0.46);
  --ivqa-icon-bg: rgba(79, 70, 229, 0.10);
  --ivqa-icon-fg: #4f46e5;
}

/* Global container */
.ivqa-profile-page {
  width: 100%;
}

.ivqa-profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

@media (min-width: 1400px) {
  .ivqa-profile-container {
    max-width: 1400px;
  }
}

.ivqa-profile-page .row.g-3 {
  row-gap: 18px;
  column-gap: 18px;
}

/* Profile card grid (forces left/right layout) */
.ivqa-profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.ivqa-profile-grid-col {
  min-width: 0;
}

.ivqa-profile-grid-col--full {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .ivqa-profile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 576px) {
  .ivqa-profile-container { padding: 16px; }
}

/* One card system for ALL cadres */
.ivqa-card {
  border-radius: var(--ivqa-card-radius);
  background: #fff;
  border: var(--ivqa-card-border);
  box-shadow: var(--ivqa-card-shadow);
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: auto !important;
}

.ivqa-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid #e6eaf0;
}

.ivqa-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
  margin: 0;
  color: var(--ivqa-text);
}

.ivqa-card-body {
  padding: 16px 18px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  color: var(--ivqa-text);
  height: auto !important;
}

/* Safety: ensure profile details remain visible even if other theme CSS overrides colors */
.ivqa-card-body .ivqa-field-label {
  color: var(--ivqa-muted-2) !important;
}

.ivqa-card-body .ivqa-field-value {
  color: var(--ivqa-text) !important;
}

/* Ensure profile cards grow with content */
.ivqa-profile-page .ivqa-card-body,
.ivqa-profile-page .ivqa-field-list {
  height: auto !important;
}

.ivqa-profile-hero {
  padding: 18px;
  border-radius: var(--ivqa-card-radius);
  background: #fff;
  border: var(--ivqa-card-border);
  box-shadow: var(--ivqa-card-shadow);
}

.ivqa-profile-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ivqa-text);
}

.ivqa-profile-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ivqa-muted);
}

.ivqa-profile-card {
  border-radius: var(--ivqa-card-radius);
  background: #fff;
  border: var(--ivqa-card-border);
  box-shadow: var(--ivqa-card-shadow);
}

.ivqa-profile-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid #e6eaf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ivqa-profile-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  color: var(--ivqa-text);
}

.ivqa-profile-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ivqa-icon-bg);
  color: var(--ivqa-icon-fg);
}

.ivqa-profile-card-icon i {
  font-size: 16px;
  line-height: 1;
}

.ivqa-profile-card-body {
  padding: 16px;
}

.ivqa-profile-section {
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  padding: 14px;
}

.ivqa-profile-section-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ivqa-text);
}

.ivqa-profile-field-label {
  font-size: 12px;
  color: var(--ivqa-muted-2);
  margin-bottom: 4px;
}

.ivqa-profile-field-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ivqa-text);
}

.ivqa-profile-muted {
  color: var(--ivqa-muted);
  font-weight: 600;
}

.ivqa-minw-0 {
  min-width: 0;
}

/* ===== New SaaS Profile Layout (2026 refresh) ===== */
.ivqa-profile-header {
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(56, 189, 248, 0.08));
}

.ivqa-card-divider {
  height: 1px;
  background: rgba(230, 234, 240, 1);
  margin-top: 14px;
}

.ivqa-avatar {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ivqa-text);
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10);
  flex: 0 0 auto;
}

.ivqa-profile-name {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ivqa-text);
  line-height: 1.2;
}

.ivqa-profile-role {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ivqa-muted);
}

.ivqa-profile-meta {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.66);
}

.ivqa-profile-meta-strong {
  color: rgba(15, 23, 42, 0.86);
}

.ivqa-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.28);
  margin: 0 8px;
  position: relative;
  top: -1px;
}

.ivqa-cta {
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
}

/* Icon wrapper (single system) */
.ivqa-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: rgba(15, 23, 42, 0.85);
  flex: 0 0 auto;
}

.ivqa-ico i {
  font-size: 19px;
  line-height: 1;
}

.ivqa-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.78);
  font-weight: 900;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.82);
}

.ivqa-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.ivqa-status--inactive .ivqa-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* Field (label + value) component */
.ivqa-field-list {
  display: flex;
  flex-direction: column;
}

.ivqa-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.ivqa-field + .ivqa-field {
  border-top: 1px solid #e6eaf0;
}

.ivqa-field-main {
  min-width: 0;
}

.ivqa-field-label {
  font-size: 12px;
  color: var(--ivqa-muted-2);
  margin-bottom: 4px;
  font-weight: 800;
}

.ivqa-field-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--ivqa-text);
  min-width: 0;
}

.ivqa-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ivqa-muted {
  color: var(--ivqa-muted);
  font-weight: 700;
}

@media (max-width: 576px) {
  .ivqa-profile-header { padding: 16px; }
  .ivqa-profile-name { font-size: 18px; }
  .ivqa-avatar { width: 48px; height: 48px; }
  .ivqa-truncate { white-space: normal; overflow-wrap: anywhere; }
}