/* Intech CRM — contact action buttons (Call / WhatsApp / Email). */

.contact-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.contact-row .ctx-label {
  font-size: 12px; color: #475569; margin-right: 6px;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #1E293B;
  line-height: 1;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, transform 60ms;
}
.contact-btn:hover    { background: #F1F5F9; }
.contact-btn:active   { transform: translateY(1px); }
.contact-btn[disabled],
.contact-btn[disabled]:hover {
  opacity: 0.4; pointer-events: none; cursor: not-allowed;
}

.contact-btn .ctx-ico { font-size: 13px; line-height: 1; }

/* Variants — colour-coded so the eye finds the right button */
.contact-btn-call { color: #1E40AF; border-color: #BFDBFE; background: #EFF6FF; }
.contact-btn-call:hover { background: #DBEAFE; }
.contact-btn-wa   { color: #15803D; border-color: #BBF7D0; background: #F0FDF4; }
.contact-btn-wa:hover   { background: #DCFCE7; }
.contact-btn-mail { color: #9333EA; border-color: #E9D5FF; background: #FAF5FF; }
.contact-btn-mail:hover { background: #F3E8FF; }

.contact-btn-share { color: #9333EA; border-color: #DDD6FE; background: #F5F3FF; }
.contact-btn-share:hover { background: #EDE9FE; }


/* Compact icon-only mode — for table rows */
.contact-row.compact .contact-btn { padding: 4px 7px; }
.contact-row.compact .contact-btn .ctx-text { display: none; }

/* Hero placement — used at top of inquiry / vendor / customer profile */
.contact-row.hero {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 12px;
  gap: 10px;
}
.contact-row.hero .contact-btn { padding: 7px 14px; font-size: 13px; }


/* Quadrant block on quotation editor — INTERNAL ONLY */
.quad-block {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 18px; border-radius: 10px; margin: 12px 0;
  background: color-mix(in srgb, var(--quad-color) 12%, white);
  border-left: 4px solid var(--quad-color);
}
.quad-shape {
  flex-shrink: 0; align-self: center;
  font-size: 36px; line-height: 1;
  color: var(--quad-color);
  width: 48px; text-align: center;
}
.quad-meta { flex: 1; font-size: 13px; }
.quad-meta strong { display: block; color: color-mix(in srgb, var(--quad-color) 70%, black); font-size: 14px; }
.quad-meta small { display: block; color: #475569; font-size: 12px; margin-top: 4px; }
.quad-meta .muted-light { font-weight: 400; opacity: .7; }
.quad-internal-pill {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  padding: 2px 7px; border-radius: 999px;
  background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;
  margin-bottom: 4px; text-transform: uppercase;
}
.quad-meta details { margin-top: 6px; }
.quad-meta details summary { cursor: pointer; font-size: 11.5px; color: #475569; }
.quad-meta details ul { margin: 4px 0 0 18px; padding: 0; font-size: 12px; }
.quad-meta details li { margin: 2px 0; }

.quad-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px; margin: 12px 0;
  background: #F8FAFC; border: 1px dashed #CBD5E1;
  color: #64748B; font-size: 13px;
}
.quad-empty strong { color: #334155; }
.quad-empty-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px dashed #94A3B8; flex-shrink: 0;
}