/* entity-compose.css — UX-w7 (Finding 4): compact "AI write-email from CRM"
 * panel (entityCompose.js). Prefixed ec-. All var(--…) defined in styles.css
 * :root (css.vars guard enforced). Mounted inside the Company 360 view and,
 * via a reported snippet, from the kanban card quick-action. */

.ec-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.ec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ec-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ec-title i {
  color: var(--primary);
}

.ec-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color 0.18s ease, background 0.18s ease;
}
.ec-close:hover {
  color: var(--text-primary);
  background: var(--bg-light);
}

/* ── Field rows ───────────────────────────────────────────────────────────── */
.ec-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ec-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.ec-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-dark);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ec-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent);
}

textarea.ec-input {
  resize: vertical;
  line-height: var(--leading-normal);
}

/* ── Draft button row ─────────────────────────────────────────────────────── */
.ec-draft-row {
  flex-direction: row;
  justify-content: flex-start;
}

.ec-draft-btn {
  background: var(--bg-light);
  color: var(--accent);
  border: 1px solid var(--border-color);
}
.ec-draft-btn:hover {
  border-color: var(--accent);
  background: var(--secondary);
}
.ec-draft-btn i {
  margin-right: var(--space-1);
}

/* ── Status line ──────────────────────────────────────────────────────────── */
.ec-status {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  min-height: 1em;
  color: var(--text-secondary);
}
.ec-status-error   { color: var(--danger); }
.ec-status-success { color: var(--success); }
.ec-status-info    { color: var(--text-secondary); }

/* ── Action bar ───────────────────────────────────────────────────────────── */
.ec-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ec-cancel-btn {
  background: var(--bg-light);
  color: var(--text-primary);
}
.ec-cancel-btn:hover {
  background: var(--secondary);
}

.ec-send-btn i {
  margin-right: var(--space-1);
}

/* ── Phone: full-width action buttons ─────────────────────────────────────── */
@media (max-width: 600px) {
  .ec-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}